Chrome Devtools tips and tricks Part 1

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.

Getting that disappearing element

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:

1. You may use the DOM breakpoint. It looks like this
2. 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.

Take note that you have to be at the Sources panel for you to be able to freeze the script. When the script is freezed, all interactions managed by javascript will be paused so you can inspect the element with ease, if it is managed with JavaScript. If this doesn’t work, the element is likely toggled with CSS. You can then force it to appear by activating pseudo classes 👇

Activating pseudo classes

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.

Interacting with DOM element on console panel

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 $0, $1, $2, $3 and $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.

Utility functions usable on Chrome Devtool’s 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” (Ctrl + v`). I use it frequently when I wish to read an expanded and nicely formatted network response JSON in the network tab.

Returning the most recently evaluated expression

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.

Hiding messages on console

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 index.js:135.

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:135 and index.js:138, you can type -index.js:135 -index.js:138 into the filter bar.

You may also filter by URL

Debugging Iframes or other JavaScript context

By default, Chrome Devtool Console panel’s JavaScript context dropdown is set to 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 <iframe>, top would refer to your page’s JavaScript context. To select the <iframe> JavaScript context, you would first need to change console panel’s JavaScript context dropdown to point your your <iframe> browsing context before you can run any JavaScript to mutate the DOM in <iframe>.

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 👋