Increase your web development skill-set: 150 animated tips on Chrome DevTools
I’ve published over 150 animated gifs which showcase how to use Chrome DevTools — as part of my Dev Tips newsletter. For most tips, you can fully grasp the feature in less than 30 seconds. I also provide a text based alternative if you want to read more about it.
In this post, you can find some of the most popular tips which I’ve sent out recently.
Warning: These are slow and heavy gifs! Navigate to the link in the image captions if the gifs do not load.
CSS Coverage
This feature answers a question: What CSS is unused on my page, even during page interaction. It now also works for JavaScript.
CPU Throttling
You can throttle the CPU in DevTools to understand how your page performs under that constraint. Timeline recordings you make with CPU throttling enabled can better highlight where expensive operations are being performed.
Screenshot Capturing Without A Browser Extension
You can now capture screenshots without an extension. You can capture the entire page, or only what is in the viewport.
Line Level Profiling
This feature shows how long a line of JavaScript took to execute. It makes sense to combine this feature with CPU throttling. If you’re using a JavaScript framework/library, you can also profile that code and investigate whether the pros of using such a framework/library outweighs the cost your users pay to parse + evaluate it.
Timeline History
The point of this is to continually monitor improvements to your webpage over time. Especially useful during the development stage of a website.
More Tips
The rest of the tips live here: https://umaar.com/dev-tips/ — you’ll also find a few on Node.js. Please subscribe to the mailing list as this will help support the project.
I post most of these on Twitter: https://twitter.com/umaar and share other web development related resources too.
A Premium Video Course On DevTools
I have a premium course on ModernDevTools.com where I’ve already published a few hours worth of video. If you scroll down on the landing page (direct link), you’ll find the current video listing. I’ve put a huge focus on performance as that’s what you requested!
I’m Working On Free Video Lessons
I will be posting some Modern DevTools lessons on my YouTube channel for free. Please subscribe to let me know your interest.
Thanks for reading!
