Chrome DevTools Tips and Tricks

Photo of author

By Femi Gbajuola

Check out some chrome devtools tips. Chrome DevTools are a super powerful suite of tools for developing web applications. They can do so much, from very basic operations like traversing the DOM, to checking out network requests or even profiling your application’s performance.

Among the big, everyday features they enable, there are quite a lot of gems to be found if you look deep enough. Features that might save you a click or two – and isn’t that what we’re all about here?

Chrome DevTools Tips

jQuery style DOM queries in the Console

jQuery is awesome. It has ruled the web for over a decade, and some statistics state that more than 70% of the most popular web pages in the world run some version of jQuery. That’s crazy for a library dating all the way back to 2006.

The most popular API jQuery provides is the $, used for selecting DOM elements. The Chrome dev tools console allows you to make use of that $ selector, and more. Under the hood, $ is an alias to document.querySelector().

The most popular API jQuery provides is the $, used for selecting DOM elements. The Chrome dev tools console allows you to make use of that $ selector, and more. Under the hood, $ is an alias to document.querySelector().

For example, if you want to simulate a click on an element you can do:

Chrome DevTools
Using the $ selector to click a button

Similarly, $$ is an alias to document.querySelectorAll():

Chrome DevTools
Using the $$ selector to print class names

There are a few more tricks up the $ sleeve. Sometimes, a selector might be too complicated to write by heart, or you just don’t know a selector specific enough. If you pick an element in the Elements tab you can retrieve it with the $0 variable in the console:

0 selector 1
A gif showing usage of the $0 selector in console

The console goes even further, allowing us to access not only the last selection, but the last 5, in order. The selections are exposed through the $0 – $4 variables:

0 4 selector
A gif showing usage of the $0 – $4 selector in console

Copying an element’s properties

The elements tab is a really useful tab. It stores our website DOM tree, it allows us to see the CSS applied to each element, and we can make changes to elements on the fly from it.

A really cool trick I’ve found is the ability to copy properties of an element (and not only properties) from the context menu.

For example, you can copy an element’s selector:

copy selector
A gif showing how to copy an element’s selector

This selector might not be specific enough, or too specific for production, but should make your life a little easier when debugging.

As you can see in the previous gif, the copy context menu hides a few more nifty things you can copy. You can copy the element’s styles, JS path (document.querySelector(SELECTOR)) or XPath.

Filtering Network Requests

Sometimes, you work on a page that has a lot of requests. I mean, A LOT.

Working your way through all those requests can be difficult when you look for something specific. Thankfully, you can very easily filter the requests.

The filter toolbar has quick toggles for various request types, such as XHR/Fetch, stylesheets, JS scripts, images and more:

toolbar filters 1
Using toolbar filters to filter network requests

If you need to be even more specific, or so that you might find it quicker, you can just write a filter criteria in the filter input right above the toolbar to search in the requests’ names:

filter by name 1
Filtering network requests by name

Emulating Different Network Speeds

Using the Network tab again we can test our site in various internet speeds. The default preset is online, and you’ll enjoy the full bandwidth of your internet connection.

network speed menu
A menu allowing selection of various internet speeds

Besides online, there are a few more presets available: Fast 3GSlow 3G and offline, which vary in upload speed, download speed and latency. If you need to emulate a different, more exotic speed, you can add your own profile through the Add... button:

custom throttling profile
Adding a custom throttling profile

Using Live Expressions in Console

What are Live Expressions?

Live Expressions are expressions which evaluate constantly at the top of your console. Say, you want to track a variable’s value over time. You can log it over and over and over again:

print over and over 1
Printing a variable over and over again

With Live Expressions, you can focus on your code, and let Chrome do the monitoring:

live expression 1
Storing a variable in a live expression

This applies for variables defined both in the console and in a script.

Emulating Different Devices

Those of us working on responsive applications know the feeling where you work really hard to make a beautiful layout, only to see it misbehave on devices with different resolutions.

I’m not here to tell you about media queries, but rather a convenient way to test that they work.

dev tools topbar
A button to toggle device view

When you click on the button that looks like a tablet and a phone, you’ll see that your browser’s viewport changes to reflect a different device’s dimensions.

You can choose a device from a list of presets containing various popular devices, such as iPhone X, iPad Pro, Pixel 2, Pixel 2 XL and more. The list is admittedly a bit outdated, but I think it’s good enough for most cases.

If you can’t find a device that fits your needs, you can set a custom resolution. As you can see, I’ve set a custom resolution to emulate a Iphone 6/7 (which is my daily driver).

dev app
Iphone 6/7 simulated device

Forcing An Element’s State

Have you ever faced a situation where you wanted to play with an element’s :hover-specific CSS, but every time you moved your mouse to the styles section in the dev tools the element was no longer hovered?

Chrome DevTools
A menu for toggling an element’s state

Well, Chrome dev tools exposes a nice way to lock an element’s state, so you can fiddle with its properties with peace. This way you can quickly toggle an element’s :active:hover:focus:focus-within and :visited properties:

The tips mentioned above are just a few of the many features available. Do you have a favorite DevTools feature that we missed? If so, let us know in the comments below.

  • Read more in-depth about Chrome DevTools on the official Google Developers page.
  • Subscribe for Chrome DevTools updates on their web update page.

Thank you for reading!

If you liked this article, then please subscribe to our YouTube Channel for videos. You can also find us on Twitter and Facebook.

1 thought on “Chrome DevTools Tips and Tricks”

Leave a Comment