Some Cool Features to try with Chrome DevTools

Naviyaa Poonia — Wed, 02 Mar 2022 09:24:57 +0000

Chrome DevTools is the set of web developer tools, built directly into the Google Chrome browser, which are extremely useful and important to front-end debugging. It comes with a variety of features and we are going to discuss a few of the newest and lesser known ones here.

To open DevTools:

you can right-click and choose Inspect from the drop-down menu, or
Command + Option + C for Mac or Control + Shift + C for Windows, Linux, and Chrome OS.

1. Command Palette

You can open the DevTools command palette with Control + Shift + P.

2. Full-Page Accessibility Tree

In the Elements panel of DevTools, open the Accessibility pane and select the Enable full-page accessibility tree checkbox.

Then, reload DevTools and you will see a new accessibility button in the Elements panel.

You can click on it to toggle to the Full-page accessibility tree view. You can expand nodes or click to see details in the Accessibility pane.

3. Emulation

You can emulate dark theme using DevTools to view how you page looks in Chrome's auto dark theme.

This can be done using the Rendering Pane which can be accessed through the Command Palette (Show Rendering command) or using More Tools from the More Options Menu (vertical three dots) and choosing Rendering option. Then enable the Emulate auto dark mode dropdown.

4. Screenshots

There are four types of screenshots available with DevTools:

Screenshot (standard) - just the screenshot of the current view
Area screenshot - screenshot of the selected area of the webpage
Node screenshot - screenshot of the selected node (piece of individual content such as poll, article, etc.)
Full size screenshot - screenshot of the entire website (all the scrollable content)

The simplest method of taking screenshots using DevTools is through the Command Palette (Control + Shift + P):

5. Recorder Panel

You can use the Recorder panel of DevTools to record, replay and measure user flows.

You can open the Recorder Panel using the Command Palette/Menu, or by choosing Recorder from the More Tools under the three dot menu (More options (vertical three dots) -> More tools -> Recorder).

Once opened, click on the Start new recording button to begin.

Once you are done implementing different user actions (such as clicking buttons, closing windows, logging in, etc.), you can end the recording. This recording can be replayed, saved, deleted or used to measure performance.

You can click on the arrow next to the user event listed to view it in detail. You can also delete the step, or add steps before or after the step using the three dots menu.

These were some of the exciting tools provided by Chrome DevTools that you can use while working on web development, to make debugging easier.