I recently spent some time diving into all that Chrome's developer tools have to offer. It's quite impressive what the Chrome team has built to make the lives of web developers easier. In this post, I will share a handful of the nifty things I learned.
Let's jump in.
Most people are probably familiar with the Console tab. But you can open a console drawer from almost any other tab as well. This can easily be toggled by simply hitting the
Clicking an element within the Elements tab will expand that particular element and show you any children elements belonging to it. Sometimes, elements can be nested several layers deep. By holding the
option key while clicking an element, you can expand all children nested within that element.
Sometimes you may see an element with your Elements tab and wonder where exactly that element lives on the page. Usually, you can see the element get highlighted on the page as you hover it in the Elements tab, but sometimes the element is not within the page view. If you right-click the element, you can choose the "Scroll into view" option and Chrome will do just that.
For whatever reason, you may want to toggle whether an element on your page can be seen or not. This can easily be done by simply hitting the
h key while the element is selected in the Elements tab.
When viewing an element's CSS
color property in dev tools, you can toggle between RGB, HSL, and hex color formats by holding the
shift key and clicking the color square. This can be convenient in various situations where you may find a color in one format, but need it in another.
Sometimes we need access to DOM elements in the console so that we can inspect various properties or behavior. Chrome provides a quick shortcut to access these elements within the console. If you type
$0 into the console, you will get the element you most recently interacted with in the Elements tab. If you type in
$1, you will get the second most recent element you interacted with, and so forth...
p, you can search dev tools for nearly anything and quickly run various commands. This gives you extremely quick access to many features of the dev tools. Give this one a try, you may find something you didn't know existed.
Ever get stuck debugging in some random runtime file that you never wanted to be in? Blackboxing scripts is your new friend. If there is a script that you do not want your debugger to go into, you can right-click it and select "Blackbox script". Easy enough.
If you have used the debugger in the dev tools before, you are likely aware that you can set breakpoints to pause your code execution. In addition to your standard breakpoint, Chrome allows you to also set conditional breakpoints. This allows you to specify that a variable must have a certain value in order for the breakpoint to hit. This can be very convenient when you are trying to debug an issue where a particular value must be present. To set a conditional breakpoint, right-click the line you want to set it at and click "Add conditional breakpoint..."
Sometimes we see network calls in the Network tab and we're not sure where they came from. Chrome has a neat trick that shows you if one network call was initiated by another call and if that network call in turn has dependencies of its own. To take a look, simply hold
shift while hovering a network call. Initiators are colored green and dependencies are colored red.
If you are familiar with the Network tab, you are likely aware that you can select a certain type of network request to filter your results, e.g. XHR. But maybe you are interested in both XHR and JS requests. By holding
command and clicking different request types, you can select multiple types of requests at once.
The Chrome Dev Tools are seriously impressive. These tips are just the tip of the iceberg. The deeper you dive into what features are available to you, the more amazed you will be. The documentation is a great reference. If you are more of a visual learner, I would recommend the Mastering Chrome Dev Tools on Frontend Masters by Jon Kuperman.
Thanks for reading, I hope you learned something!
If you enjoyed this post or found it useful, please consider sharing it on Twitter.
If you want to stay updated on new posts, follow me on Twitter
If you have any questions, comments, or just want to say hello, send me a message.
Thanks for reading!