In this post, I'll introduce you to some of the most interesting and lesser-known Chrome DevTools Features that you might find useful.
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+
By default this tab is hidden, however, you can enable it by pressing
Cmd/Ctrl + Shift + Pand type "Show Rendering". This feature provides you a series of options to visualize your page's rendering performance.
Paint Flashingoption gives you the ability to visualize when something is repainted on the screen.
Layout shiftshows 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.
Frame rendering statsdisplay frames per second and GPU usage in realtime on your current page.
Scrolling performance issuesoption highlights elements that can slow down your page scrolling.
Highlight ad framesoption shows all ad frames present on your website
CSS Media Features
Emulate CSS prefers-color-schemeprefers-color-scheme allows us to set a system theme preference for interfaces like light or dark mode
Emulate CSS prefers-reduced-motionprefers-reduced-motion can set a preference to minimize the amount of animation or motion a website uses.
Emulate vision deficiencyis 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
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.
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.
Network Conditionstab it's very simple, you may notice that some of the features are the same presented in the
Networktab, 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
And finally, the search tab allows us to quickly search files by string or regex
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. ✌
[Chrome DevTools Performance Rendering] (https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference?hl=en#rendering)