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.
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 using
a[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.
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.
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.
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.
The on/off switch for this feature is in Settings > General > Sources > “Display variable values inline while debugging”.
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!
I know, this has all been very Chrome-centric. Firefox DevTools has also been adding some excellent features, however.