5 Great Hidden Features in the Chrome DevTools

1. State of the Force Element

Let’s start with something simple that everyone can utilize. You may right-click on any HTML element on the page in the Chrome DevTools’ Elements panel. This will open a context menu with a lot of choices, one of which is a submenu called “Force Element State.” You may use a number of popular pseudo classes in this submenu, such as :active, :hover, :focus, and :visited.

If you’re trying to fix CSS or JavaScript that uses these pseudo classes, this is really helpful. If you’re working with a stylesheet, you might want to try adding some specific :hover styling to a button. You can just add some CSS right in the Chrome DevTools instead of editing in your text editor, refreshing the browser, lingering over the button, going back to the text editor, and so on.

2. Breakpoints in the DOM

A lot of developers know about the breakpoints that may be applied to JavaScript in the Sources tab of the Chrome DevTools. If you add breakpoints to certain lines, your JavaScript will stop running so you can see what’s going on better. A lot of folks don’t know that you may also break each time the HTML is changed.

• If your page isn’t working the way you want it to, you might be able to figure out what’s wrong by paying close attention to how elements change.
• If you add, remove, or change any child components, the Subtree Modifications items will break.
• If the element’s attributes change in any manner, the Attributes Modifications item will stop working.
• If the element is completely removed, Node Removal will stop working.

3. The API for the Console

The Console is an extremely useful part of DevTools since it lets you run any JavaScript code right on a page and see any problems or log messages that the website is sending out. This is helpful for a lot of things, such checking the values of variables or figuring out if a certain conditional expression was run.

But console.log() is only one of the many ways to use the Chrome DevTools Console API. You can also use console.count() to count how many times a section of code has run. For instance, while you’re debugging JavaScript, you can think that a function is running too many times. You can find out for sure by using the console.count() function.

4. The Panel for Audits

So, this one isn’t really a secret. But developers spend a lot of time in the Elements panel or the Console, so it’s easy to forget about the Audits panel. This sophisticated tool checks several parts of your web page’s performance on its own and finds areas that need work. It’s hard, and often impossible, to properly optimize every web page for every performance element, but this is still an excellent way to ensure that you haven’t overlooked anything.

You may choose which audits you want to perform when you open the Audits panel. You can choose to restart the website and perform the audits when it loads. After the audit is done, you’ll get a list of some common best practices for front-end performance that you may use on your website. Once more, this isn’t a list of needs; it’s merely helpful automatic ideas.

5. More columns for the network panel

The Chrome DevTools Network panel shows you a clear picture of what’s going on with your network. You can see which assets were loaded, when they were loaded, and in what sequence they were loaded. A beautiful chart with numerous columns that give more information about each item shows this. By default, certain columns are turned on, but most of the columns that are accessible are hidden.

Here is a complete list of the extra columns that are usually not shown:

• Control of the Cache Connection
• Content-Encoding
• Length of Content Cookies Domain
• ETag, Keep-Alive, Last-Modified, Scheme, Server, Set-Cookies, and Vary

I don’t fully understand what each of them accomplishes yet (I can’t locate any detailed documentation for them), but if you do, please tell me more in the comments. But a lot of them are clearly valuable straight away. You can examine which assets are being supplied gzipped by turning on the Content-Encoding menu option, for example. This is useful if you want to cut down on the time it takes to move assets.

Disclaimer

This article is intended for informational and educational purposes only. The features, tools, and techniques discussed are based on publicly available functions within Google Chrome DevTools at the time of writing. We are not affiliated with Google or the Chrome development team in any official capacity.

All product names, trademarks, and registered trademarks are property of their respective owners. Use of these tools should always be done responsibly and in compliance with local laws and best practices. Any actions you take based on this article are at your own discretion and risk.