Six Tips for Chrome DevTools
The following is a guest post by Umar Hansa. Umar has a newsletter I’m a fan of and graciously offered to write this guest post in that style. I’ll let him introduce himself.
Hey, I’m Umar. I like to share web development related tips on Twitter (@umaar) and also through Dev Tips which is a newsletter of developer tips in the form of gifs. Right now, it’s all primarily Chrome DevTools related. Before we get started, thank you to CSS-Tricks for letting me contribute to a community I’ve always been very fond of.
This post will cover six popular tips for Chrome DevTools. You may have seen some of these before, but hopefully if you have they’ll act as a refresher for what you can do during your Inspect Element journey.
DOM Search by CSS Selector
This is a handy trick to quickly find the DOM nodes you need. In the Elements Panel, press Cmd + F (Ctrl + F on Windows) to open the search box. You can search using the following:
- CSS Selector: this is the cool one and what the tip is about. Find all of the anchor tags without an
hrefattribute value usinga[href=''], or traverse your way through the DOM thanks to live updating of your search result. - String: for example, a piece of a text in a paragraph element.
- XPath: maybe not the most popular, but worth knowing it’s there.
Media Query Inspector
This tip assumes you already know about Device Mode.
Your stylesheets can register media queries. When in Device Mode, such media queries display in the Media Query Inspector. The width of the coloured media query bars align with the viewport ruler.
- You can click a segment within the media query bar to trigger that media query — this in turn sets the viewport dimensions.
- You can hover over a segment to see a tooltip with the exact rule.
- You can right click on a segment within the bar and select Reveal in Source Code. This takes you to the point in the source code where the media query is defined.
Copy a Response
While in the Network Panel, you can right click on a resource and select Copy response to get the contents into your clipboard. In addition to that, you can head on over to the Sources Panel and drag and drop a resource onto your code editor. This embeds the contents of that file into the editor.
Copy as cURL
While in the Network Panel, you can right click on a resource and select Copy as cURL. DevTools puts a terminal-friendly command in your clipboard, along with the original request headers. This way, you can be sure the request you make is as close to the original as possible.
Inline JS Values
Debugging JavaScript in DevTools has improved a lot recently. You can now pause at a breakpoint and receive visual feedback for the current state of variable values. These inline values will typically reveal near function arguments.
The on/off switch for this feature is in Settings > General > Sources > “Display variable values inline while debugging”.
Network Filmstrip (sneak peek!)
To finish up, I thought I’d show a possible upcoming feature which I think is really cool. A feature so cool in fact, that it needs its own warning.
This is an experimental DevTools feature. Experimental features can break, change, or vanish so please keep this in mind.
If you have used WebPageTest before, this filmstrip feature may look familiar to you. It shows you screenshots of page rendering, and is valuable for understanding what your users may see.
In the recording of CSS-Tricks, we notice:
- The page renders initially without text due to the font not being ready.
- Secondary content, like the ads/sponsor loads after the primary content loads.
- Because time data is shown, a particular screenshot can be matched with the time it took to reach that point and we can see primary content is visible in less than a second.
This isn’t enabled by default, but a quick search will show you how to enable DevTools hidden experiments. But keep in mind the warning above!
Conclusion
I know, this has all been very Chrome-centric. Firefox DevTools has also been adding some excellent features, however.
Thank you for reading. If you like these sorts of tips, you can subscribe to Dev Tips or follow me on Twitter.
Six Tips for Chrome DevTools is a post from CSS-Tricks
