Chrome DevTools: The five most popular DevTools tips from 20188th January 2019
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.
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.
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.
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.
🔥️ Bonus Tip: You can now export this data as shown in Tip #187
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.