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.

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

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

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

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

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

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

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’m Working On Free Video Lessons

Thanks for reading!

Dev Channel

Developers Channel - the thoughts, opinions and musings…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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