Increase your web development skill-set: 150 animated tips on Chrome DevTools

Umar Hansa
Aug 17, 2017 · 3 min read

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.

Image for post
Image for post

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

Image for post
Image for post
Read more (Tip #121)

This feature answers a question: What CSS is unused on my page, even during page interaction. It now also works for JavaScript.

CPU Throttling

Image for post
Image for post
Read more (Tip #88)

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

Image for post
Image for post
Read more (Tip #151)

You can now capture screenshots without an extension. You can capture the entire page, or only what is in the viewport.

Line Level Profiling

Image for post
Image for post
Read more (Tip #99)

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

Image for post
Image for post
Read more (Tip #148)

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!

Dev Channel

Developers Channel - the thoughts, opinions and musings…

Umar Hansa

Written by

Video Course: https://ModernDevtools.com, Weekly gifs in your inbox https://umaar.com/dev-tips/, useful resources: https://twitter.com/umaar

Dev Channel

Developers Channel - the thoughts, opinions and musings from members of the Chrome team.

Umar Hansa

Written by

Video Course: https://ModernDevtools.com, Weekly gifs in your inbox https://umaar.com/dev-tips/, useful resources: https://twitter.com/umaar

Dev Channel

Developers Channel - the thoughts, opinions and musings from members of the Chrome team.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store