I recently released a course on Treehouse called Chrome DevTools Basics which gives a detailed overview if you want to start from the beginning. However, there’s so much functionality packed into the DevTools that it’s hard to know about everything that’s there. Here are five less obvious features of the DevTools that most developers don’t know about!
1. Force Element State
Let’s start with an easy one that everyone can use. In the Elements panel of the Chrome DevTools, you can right click on any HTML element on the page. This will bring up a context menu with many options, one of which is a submenu labeled Force Element State. Inside of this submenu you’ll see that you can apply several common pseudo classes, including :active, :hover, :focus, and :visited.
2. DOM Breakpoints
In the Elements panel context menu is another item labeled Break on… with several submenu items. This submenu includes the items Subtree Modifications, Attributes Modifications, and Node Removal.
- Subtree Modifications item will break if there are any child elements that are added, removed, or modified.
- Attributes Modifications item will break if the element’s attributes change in any way.
- Node Removal will break if the element is deleted entirely.
If you’d like to see this in action, here’s a demo in the Chrome DevTools documentation.
3. The Console API
console.log() method to print messages to the console. This is useful for many purposes, such as viewing the values of variables or determining whether or not a specific conditional statement was indeed executed.
console.log() is just one method accessible through the Chrome DevTools Console API. Another useful method is
console.count() method, you can find out for sure.
There are many other useful methods, so be sure to check out the Console API Reference.
4. The Audits Panel
OK, so this one isn’t exactly hidden. However, developers spend a lot of time in the Elements panel or the Console, so it’s easy to overlook the Audits panel. This powerful tool automatically inspects several aspects of your web page’s performance and identifies areas for improvement. It’s difficult and often impossible to perfectly optimize every web page on every performance factor, but this still provides a good sanity check for areas you might have missed.
When you bring up the Audits panel, you can select which audits you’d like to run. You can optionally select to reload the page and run the audits at load time. After running an audit, you’ll be provided with a list of several common front-end performance best practices that can be applied to your page. Again, this isn’t a requirements list; they’re just helpful automated suggestions.
5. Additional Network Panel Columns
The Network panel in the Chrome DevTools paints a vivid picture of network activity. You can see which assets were loaded, when they were loaded, in what order they were loaded, and so on. This is represented in a colorful chart with several columns containing additional information about each asset. Some columns are enabled by default, but the majority of the available columns are hidden! You can access these columns by right clicking on any column header and, from the context menu, selecting the column you would like to enable.
Here’s a full list of the additional columns that are normally hidden:
Full disclosure: I don’t quite understand what every one of these does yet (I can’t find any complete documentation for these), but if you do know, feel free to elaborate in the comments. However, many of them are obviously useful right away. For example, by enabling the Content-Encoding menu item, you can see which assets are being served gzipped. This is helpful when you’re trying to minimize asset transfer time.
It’s amazing that the Chrome DevTools manage to stay elegant and simple to use when there are so many powerful features available. If you have any more tips or tricks, please share them in the comments!
Very helpful. Thanks!
#2 got it from here.. thanks..
So I was once able to load the devtools without actually being on a page. Problem is I forgot how I did it (hehehe). If anyone knows I’d appreciate it if you shared how you got to it.
Absolutely useful post. I already knew a couple of them, but had completely missed the “Audits” tab. Thanks for the advice!
Does anyone of you know of a screenshot extension to the developper tools. I would like to make screenshots of different mobile resolutions and now it’s kind of tedious.
Any help appreciated 🙂
download ninbus screenshot or awesome screenshot extension / plugin.
Don’t forget SASS source maps
Regarding No. 5, those are HTTP headers. If you’re not familiar with some of those, Google should provide more than enough information about each of them. So pick one of those additional headers that you find interesting, check which values are set for it on a bunch of sites to get a broad picture, and optionally Google search for a definition.
lol at the foot note