Chrome DevTools is a popular tool for frontend debugging these days, with new features being added frequently. In this post we’ll go beyond the common patterns and highlight features that are perhaps less known, but useful nonetheless.
1. Get inspected element
There are a few situations where you would want to access the last inspected element (from the Elements panel):
- for quick debugging inside the console: the element can be accessed via the
$0 global variable (see for yourself:
- for writing tests using Selenium: in Selenium you can locate the element on the page using its XPath, and luckily Chrome has an option (right click element in the Elements panel) to copy XPath
2. Console features beyond
- console.table(data[, columns]) logs data using tabular layout, making it a lot more readable for the human eye
- console.trace() prints a stack trace from the point of the method call (which is a less hacky way of doing
console.log(new Error().stack)); this is useful for determining what part of the code is calling the current function for example
- console.group(object[, object, …]) and console.groupEnd() are used to (visually) group certain logs together (such as by feature); groups can also be nested
- console.time(label) and console.timeEnd(label) allow us to measure execution times
3. Extra functions available in the console
- monitorEvents(object[, types]) enables logging for all events dispatched to an object
- copy(object) copies a string representation of the object to the clipboard
- getEventListeners(object) returns all event listeners added on the object
4. Store as global variable
When paused at a breakpoint we can inspect locally scoped objects in the console, but we might also want to keep track of them for later inspection as well. Instead of manually storing such an object as a global variable in the console, DevTools has a handy option to “Store as global variable” by right clicking on it in the
Sources panel (
Scopes section on the right).
DevTools provides a “snippets” section within “Source” panel which allows us to manage a list of scripts that can be injected onto a page. These things can range from inject a script into a page to printing out cookies or event more complex tasks. The point of this feature is to allow code reusability during debugging without having to resort to other tricks (such as using bookmarks for example).
6. Replay Ajax requests
There are situations when Ajax requests return an unexpected result or even an error. For replicating the request one might think we need to click the button that triggered it (or replicate the series of actions that triggered it). Fortunately there’s an easier way with DevTools:
- an option is to open the Network panel, right click on the Ajax request and click ‘Replay XHR’
- another way of doing the same thing is to click on ‘Copy as cURL’ (again, Network panel > right click request) and run the command into the terminal
7. Toggle element state
There are other styles to be applied to an element besides that of its regular state. For example a button could look differently when hovering over it, the same way a visited link is diffent than a regular link. These special states are the following: active, hover, focus, visited.
You could manually trigger these states by yourself, but you wouldn’t be able to edit their styles in DevTools as well (once you’ll open DevTools the special state of the will be gone – except for visited links).
But lucky for us there are solutions to force an element’s state with DevTools:
- in the
Elements panel you can right click on the element and select ‘Force Element State’, then choose the preffered state
- the second option would be to select the element from the
Elements panel, then go to the ‘Styles’ section on the right and click on the ‘Toggle Element State’ icon (the 2nd one)
8. DOM breakpoints
Sometimes an element changes and we would like to determine what part of the code triggered that change.
DOM breakpoints are a good fit for these kind of situations, since they can pause the execution whenever an element is removed, its attributes are changed or there are subtree modifications.
To add a breakpoint simply right click on an element (in the
Elements panel), select
Break on.. and check the situations where you want the breakpoint to be added to. Now when the DOM element is being changed the execution will be paused and you will see what caused the update in the
9. Test responsive design and bad connections
If you want to see how an application feels like on a smartphone with a bad connection, you don’t have to leave your browser. By clicking on the smartphone icon near the DevTools panels on the left side you enter the Device Mode. Here you will be able to setup the viewport to match known smartphones/tablets, as well as throttle the network connection to simulate bad connections.
10. Locate an element by its selector
Let’s assume that you are visiting a relatively big page and you’re looking for a specific element. You search through source code of the page and you find that element. For the sake of the argument we’ll say that it has an id named
The next step would be to go to the
Console panel and paste the following code:
What’s going on here?
- document.querySelector() will return the DOM element
inspect(element) function will open the
Elements panel and select the element
At this point you will be able to take a look at the element’s DOM structure, checkout its styles or inspect other stuff.
But we can achieve more than that, to actually have a look at the element on the page. To do that just right click on the element in the
Elements panel and select ‘Scroll into view’. This will scroll to the element and highlight it, so mission acomplished.
While you might not need to master all DevTools features, it’s a good thing to be aware of these tricks. Who knows, maybe you’ll end up as those people using DevTools as their IDE.