All Articles

5 Great Features of Chrome DevTools

Chrome Devtools

👋 Hey. There are many features of the Chrome DevTools that boost developer productivity and not all of them are well known. I’ll go through and show some of my favourite ones.

Inspector history

It’s possible to quickly access the last inspected elements via a temporary variable. The last element is saved to $0 the one before that to $1 and so on. Perfect for quick debugging. Want to copy the element to your clipboard or just add a class? Use inspect element Ctrl(⌘)+Shift+C and try it out!

Chrome console

Can’t inspect a DOM element? Open the Elements tab and navigate to the correct element, right-click and select “Store as global variable”. Now this element is saved to temp1.

Monitor events

It’s possible to monitor events of an element. The function monitorEvents takes a DOM element with optional event(s) that should be monitored. Some of the possible events are mousedown, mouseup, mouseover, click, keydown, resize,scroll.

When done debugging, use unmonitorEvents with the DOM element to stop monitoring.

Monitor events

The utility functions only work when you call them from the Chrome DevTools Console. They won’t work if you try to call them in your scripts.

Snippets

Snippets is a cool feature that stores pieces of code that can run on any page. Let’s demonstrate this by creating a snippet that adds faker - a tool for generating fake data. We’ll use it to add some Lorem Ipsum to a paragraph.

Press Ctrl+Shift+J or ⌘+⌥+J to open Devtools. Next, open the Command Menu with Ctrl(⌘)+Shift+P and search for “Create new snippet”.

Command menu

Create a snippet with the following content and name it as faker:

let script = document.createElement("script");
script.src = "https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.min.js";
document.head.appendChild(script);

Snippets faker

Reopen the Command Menu with Ctrl(⌘)+Shift+P and run the snippet by typing !faker

Run snippet

Should now have access to faker with autocompletion to discover all the available functions.

> faker.name.firstName()
"Newton"

Let’s add some lorem words using the previously covered inspector history trick.

Set lorem

Change the color format

It’s possible to quickly change between color formats by using Shift+Click on a color block.

I usually default to hex colors and switch to rgba when I need to access the alpha channel of an element. hlsa (Hue Saturation Lightness alpha) is especially useful for lightening/darkening a color by modifying the L (Lightness) value.

Chrome console

The debugger statement

This isn’t a feature of the Chrome DevTools, but not many know about the JavaScript debugger statement. It can be used to pause code execution and trigger the Chrome DevTools debugger.

const minutes = 60 * 5;
debugger;
document.getElementById("time-left").innerHTML = minutes;

It’s certainly faster than opening the Sources panel and setting a breakpoint. The functionality of the two approaches is the same.

To skip stopping at vendor code, right-click on a vendor file in the Sources panel and click Blackbox script. Now it will go straight to our code and skip vendor code.

Trying to inspect the state of a hover like effect, but forcing element to :hover state doesn’t work? Try this trick:

setTimeout(() => {
  debugger;
}, 3000);

The debugger statement will be called in 3 seconds. That’s how long you have to reach the desired state that you want to inspect.

References