DEV Community

loading...

DevTools Features You Might Not Know About

jeferson_sb profile image Jeferson Brito Updated on ・3 min read

Chrome dev tools is a suite of tools that, we web developers, can use on our daily basis to prototype, analyze and debug our Javascript, CSS, and HTML code.

In this post, I'll introduce you to some of the most interesting and lesser-known Chrome DevTools Features that you might find useful.

Getting started

You can open up your browser DevTools by pressing Ctrl + Shift + I (Windows) or Cmd + Option + I (Mac)

Note: Some of the features are available only on Chrome 85+

Rendering

By default this tab is hidden, however, you can enable it by pressing Cmd/Ctrl + Shift + P and type "Show Rendering". This feature provides you a series of options to visualize your page's rendering performance.

show

Paint Flashing option gives you the ability to visualize when something is repainted on the screen.

paint

Layout shift shows you which areas of your page (highlighted blue) are being shifted at any point in time. A layout shift occurs when a visible element on your page changes position or size, affecting the position of content around it.

layout_shift

Frame rendering stats display frames per second and GPU usage in realtime on your current page.

fps

Scrolling performance issues option highlights elements that can slow down your page scrolling.

scroll

Highlight ad frames option shows all ad frames present on your website

ad

CSS Media Features

Emulate CSS prefers-color-scheme prefers-color-scheme allows us to set a system theme preference for interfaces like light or dark mode

prefers-color-scheme

Emulate CSS prefers-reduced-motion prefers-reduced-motion can set a preference to minimize the amount of animation or motion a website uses.

reduced

Emulate vision deficiency is a nice accessibility option to simulate color vision deficiencies in realtime on your current page. This feature can give us a better understanding of how people with different types of vision deficiencies experience our website

vision_deficiency

Animations

In the animations panel, you have access to a timeline of each animation frame happening on the page.
It's fully interactive, you can go back and forth, play, and pause in each frame.

animation

Coverage

The Coverage tab allows us to find unused blocks of code in our application. Shipping lots of JS/CSS code can be a problem in web development if the user is downloading extra content.

Coverage shows a list of resources each containing how many bytes it has and how many of them are unused and you can actually open the file then the unused parts will be highlighted in red at the left.

coverage

Network Conditions

Network Conditions tab it's very simple, you may notice that some of the features are the same presented in the Network tab, but it has one of the most useful features, User-Agent.

In DevTools now you can emulate a browser or device by disabling "Select automatically" the dropdown will now be enabled for you to select a different User-Agent like Firefox or Safari, or Chrome on Android, and so on. You can even create your custom User-Agent.

Note: This only works in your current website tab and while the DevTools is open

agent

Search

And finally, the search tab allows us to quickly search files by string or regex

search


Good to mention that even though these demos were captured on Chrome, you can experiment with the features in any Chromium-based browser as well.

I hope you found these features helpful, if you have some feedback or suggest please leave a comment in the section below. ✌

Further Reading

Debugging JavaScript - Chrome DevTools 101

What's New in DevTools

Chrome DevTools Performance Rendering

Performance Analysis Reference

prefers-reduced-motion

prefers-color-scheme

Discussion

pic
Editor guide