At the time of writing, I am using Stable Chrome 80.
I started seriously digging into Chrome Devtools a few months back. This was partially caused by 2 events, watching my colleague debugging on Chrome Devtools in real time and having tasked to benchmark our site’s performance.
Since every web developer uses devtools, not necessary Chrome Devtools, I think it will be meaningful to share an encapsulation of all the things that I learnt which I think would benefit others if they know it too. So here is the list.
I’m sure you have seen disappearing elements that only pops up on hover. At some point, you will probably need to inspect them. Here are 2 ways to do so:
- You may use the DOM breakpoint. It looks like this
- You may freeze script execution (This is my preferred choice).
Go to sources panel and point your cursor at the disappearing element. When it appears, press
F8. This will cause the debugger mode to start and your script will be paused.
Say you activate the pseudo class of an element, you can trigger this effect by clicking the element you wish to inspect in Elements panel, followed by clikcing the Styles tab, then click the
:hov button. It looks like this.
Did you know you can interact with the DOM elements you clicked in Element panel on console panel?
You can do so by typing in these commands in console panel
$4 and they will return the historical reference to the last 5 DOM elements you clicked.
$0 gives you the most recently selected DOM element and
$1 gives you the second most recently selected DOM element and so on. With this command, you can now mutate the DOM elements you have “selected” in Elements panel.
In fact, there are many other ways to select DOM elements in the console panel.
One of my favourite and most frequently used util in Chrome Devtools is the
copy() function. It can copy an unformatted JSON and return a nicely formatted JSON on “paste” (
). I use it frequently when I wish to read an expanded and nicely formatted network response JSON in the network tab.
Another utility I find useful at times is the
$_. It returns you the most recently evaluated expression. I use this often with
String.prototype.split() when I wish to do multiple quick and dirty secondary evaluations on my evaluated expression.
Sometimes we have too many console log messages appearing and we would like to focus on those on a few. We can use the filter bar in console panel to filter the messages we want. But did you know we can do the inverse too? We can filter out the messages we don’t want by prepending
- at the front to exclude them. For example, you have a console warning printed on every
index.js:135, you can type
-index.js:135 into the filter bar in console panel to filter out messages that contain
You can have multiple commands in your filter bar. Just add a space in between! So if you wish to filter out both lines
index.js:138, you can type
-index.js:135 -index.js:138 into the filter bar.
You may also filter by URL
top and it represents the main document’s browsing context, which is the environment the browser displays it’s DOM. It looks like this.
So suppose your page has embedded an
Here are the docs and reference I read to learn how to use Chrome Devtools.
That’s it for Element and Console panel. Thanks for reading 👋