/dev tips

(189) Code Folding

Chrome DevTools: The five most popular DevTools tips from 2018

8th January 2019
The five most popular DevTools tips from 2018

⭐️ This is the 190th developer tip! Thank you to the whole community for supporting this project. ⭐️

Here are five of the most popular Dev Tips from 2018! Alongside each title will include a screenshot showing the feature, a description & a link to the original Dev Tip.

Screenshot Capture

Capturing a viewport screenshot from DevTools

Tip #151 shows the ability to capture a screenshot   πŸ“ΈοΈ of whatever is in your browser viewport.

If you enable Device Mode, the screenshot includes a Device Frame which is a nice touch. Here's Reddit on iPhone πŸ“±οΈ landscape making excellent use of screen real estate.

Capturing a viewport screenshot from DevTools

Element Screenshots

Capturing a screenshot of an element from DevTools

As you'll see in Tip #156, with a particular element selected in the Elements Panel, you can hit Cmd + Shift + P and then select Capture node screenshot. DevTools exports a PNG image file of only the element you selected πŸ”οΈ.

πŸ”₯️ Bonus Tip: Cmd + Shift + 4 on Mac lets you click and drag on any portion of your screen to capture it as an image file.

CPU Throttling

CPU Throttling in DevTools

It's definitely worth applying CPU throttling while performance profiling your site as it gets you a little closer to the constraints of your end-user devices. Learn more in Tip #88.

When you're browsing the web in general and page interactivity has slowed down to a snails   🐌️ pace, switch CPU throttling and Network throttling back to off. I have learnt this the hard way.

Code Coverage

Code Coverage in DevTools

As shown in Tip #121, DevTools can continuously instrument your CSS and JavaScript code and alert you of code which has been used, and code which has been unused. For example a CSS Selector which does not apply on the current page is treated as unused.

πŸ”₯️ Bonus Tip: You can now export this data as shown in Tip #187

Network Overrides

Using Network overrides in DevTools

With Network Overrides, you can replace resources which would have typically been loaded over the network with your own local filesystem resources. This is a powerful feature which can be useful in a variety of use cases. See more in Tip #162.

When developing a website, I'll use Network Overrides to quickly replay mock data I have on my filesystem, which means I don't have to wait for resources to download over the network.

πŸ”₯️ Bonus Tip: Watch this YouTube video which shows a practical use of this feature.

Sign up to receive a developer tip, in the form of a gif, in your inbox each week.