10 Chrome Devtools Features Frontend Developers Should Know

1. Animations Drawer

The animations tab lets you debug animations. You can slow down, replay, inspect code for an animation group, and modify an animation group’s timing, delay, duration, or keyframe offsets.

An animation group is a set of animations that appear to be related to each other.

What is animation group ?

• Open Chrome dev tools, and open the command palette by pressing Ctrl + P, search for Show Animations. This will open the animations drawer.

2. Show Source Code Order

Source code viewer helps to visualize the order of the HTML elements present in the document source.

This feature can be used to find in which order assistive technologies will read the document source elements.

Once enabling this feature, we can iterate through the accessibility tree to find the subtree element’s ordering.

Follow these steps for using this feature

• Inspect an element on the page.
• Open Accessibility Drawer inside Elements Panel – Use CTRL + SHIFT + P and search for Show Accessibility.
• Enable the Show Source Order flag.

3. Paint Flashing Rectangles

Use Paint Flashing Reactangles to find out the part of the webpage which gets re-rendered due to certain user interactions.

Follow these steps for using this feature

• Type CTRL + SHIFT + P and search for Show paint flashing rectangles and select the filtered option.

4. XHR / Fetch Breakpoints

As a frontend developer, we consume many API responses and many times there probably want to check which function fetches the request, what arguments we’ve provided to fetch the request, or maybe what’s the current execution context on the call stack.

All the above things can be debugged by using XHR / Fetch Breakpoints, which let you set breakpoints on API calls.

Follow these steps –

• Go to Source Panel – Type CMD + SHIFT + P and search for Show Source.
• Look for XHR / Fetch Breakpoints and mention the API endpoint on which you want to add a break.

5. Code Coverage

Code Coverage in chrome dev tools can help you find out unused code deployed on your website, this may lead to smaller page build size and lesser page load speed.

Follow the below steps to access the code coverage drawer.

• Open command menu – CMD + SHIFT + P on Chrome dev tools.
• Search coverage and select Show Coverage, this will open the coverage panel in the drawer. You can bring this to the top by using bring to top the feature.
• Start recording code coverage by reloading the page or by clicking on instrumenting coverage.
• The table in the Coverage tab shows you what resources were analyzed, and how much code is used within each resource.
• Click on any one of the rows to open that file in the sources section with line by line breakdown of used and unused code.

6. Visualize Javascript Bundles

Chrome dev tools TreeMap can help you to better visualize the javascript bundles of your website. This can even help you to understand unused code. This feature can be integrated with source maps.

Steps for using this feature

• Open Lighthouse section and run a performance check.
• Find View TreeMap and click on it.
• Explore the various parts which make up your bundle. You can also highlight unused bytes, and dive into code that uses source maps.

7. Identify Potential CSS Improvements

CSS Overview panel helps you identify all the fonts, colors, media queries, and unused declarations. We can even click any of the above entities to find out which associated elements. This also shows color contrast issues as well.

Follow these steps for accessing the CSS Overview section

• Open Command Menu by CMD + SHIFT + P short key.
• Search for CSS overview and select Show CSS Overview.
• Explore font info, unused declarations, colors, and media queries used in your website.

8. Layout Shift Regions

We can interactively find all the possible layout shift regions. Layout Shift Region highlights areas of the page (in blue color) that were shifted.

Steps for using this feature

• Open Command Menu – use CTRL + SHIFT + P short key.
• Search for rendering and select Show Rendering. This will open the rendering drawer on the bottom side.
• Search for Layout Shift Region and enable the same.
• Now, You can find the layout shifted region in the blue color on the website.

9. Frame Rendering Stats

If you are working on building 60 FPS website, then this feature of DevTools can help you out to see interactive animation rate in FPS.

Steps for using this feature –

• Open Command Menu – use CTRL + SHIFT + P short key.
• Search for rendering and select Show Rendering. This will open the rendering drawer on the bottom side.
• Search for Frame Rendering Stats and enable the same.
• You can find dropped frame distribution and other GPU info on the page.

10. Find LCP Element

Use Performance Panel to find out largest contentful paint element of you webpage.

The Largest Contentful Paint (LCP) metric reports the render time of the largest image or text block visible within the viewport, relative to when the page first started loading.

What is LCP ?

• Open Command Menu – use CTRL + SHIFT + P short key.
• Search for performance and select Show Performance.
• Start performance analysis and click over LPS, you will find the LPS element on the summary panel on the bottom side.