Chrome 110: What’s New in DevTools

Last updated on Feb 28th, 2023 | 3 min

Chrome DevTools is an essential tool for site owners and web developers, enabling them to debug, optimize and improve web pages. 

With every update, Google Chrome introduces new features to make DevTools more powerful and user-friendly. 

The latest update, Chrome 110, introduces several new features to the Developer Tools that aim to enhance productivity and usability. 

In this article, we will explore the most notable ones. 

Let’s begin.

Performance Panel Updates


The Performance recording now begins with a blank trace

Clicking the Start profiling and reload page button in the Performance panel will now clear both the screenshot and trace. In the past, the panel displayed a timeline with previous recording screenshots, causing confusion about when the current measurement began. 

To address this issue, the panel now navigates to the about:blank page first to ensure that the recording starts with a blank trace. This change aligns with the Performance Insights panel, which has already adopted the same approach.

Performance panel with recording that starts with a blank trace

Recorder Panel Updates


Split code view now available in the Recorder

By introducing a split code view, the Recorder allows developers to view their user flow code more easily. 

To access the code view, open a user flow and click the Show Code button.

Show code for split code view

With the new update, the Recorder highlights the corresponding code as you hover over each step on the left, allowing developers to track their flow more effectively.

DevTols Recorder highlights the corresponding code

Additionally, developers can change the code format by using the dropdown, which provides various options:

Code format options panel

Customize selector types of a recording

The latest update allows you to create recordings that capture specific selector types according to your preferences.

You can customize selector types when creating a new recording by including or excluding selectors such as XPath. This capability ensures you capture only the selectors you want in your user flows, enhancing the precision and efficiency of the recording process.

new recording selector types

Make changes during the recording

The Recorder now offers the flexibility of applying real-time edits, enabling you to make changes without ending the recording. This update eliminates the need to end the recording to make adjustments.

applying real-time edits to recording

Enhanced Autocomplete in The Console

To improve the autocompletion experience, DevTools has implemented several changes, including the following:

  • Using Tab for autocompletion at all times
  • Varying the behavior of Arrow right and Enter depending on the context
  • Ensuring consistent auto-completion experience across text editors, including the Console, Sources, and Elements panels

As an example, consider what occurs when you type "tab" in the Console:

enhanced autocomplete field in console

What’s Coming Next: The Latest DevTools Improvements in Chrome Canary 111

Chrome Canary is Google’s experimental mode for Chrome. 

It is a cutting-edge web browser mainly targeted at developers, seasoned techies, and browser enthusiasts. 

It allows them to test new features, APIs, changes, and flags and get early access to new additions to Chrome DevTools.

And here are two exciting features that might get to Chrome 111:

Customizable Recorder shortcuts

The Recorder introduces convenient keyboard shortcuts to accelerate the process of recording and replaying user flows. 

These shortcuts enable developers to streamline their workflow, allowing them to perform these tasks more efficiently. 

In case you forget the shortcuts, you can simply click on the ? button to access a list of all the shortcuts at any time:

recorder shortcuts panel

You can customize these shortcuts via the Settings menu:

DevTools recorder customizable shortcuts

Use the Create a new recording command from the Command Menu in DevTools to start a user flow recording immediately:

create new recording command in DevTools Recorder

Caches reorganized in the Application panel

The Cache Storage settings can now be found in the Storage section of the Application section:

Application Panel Cache Storage Settings location

The Back/forward cache setting has been moved to the Background Services section.

When is Chrome 111 expected to be released?

The Chrome 111 release is scheduled for March 7th, 2023.

Niko Kaleev
Web Performance Geek

Niko has 5+ years of experience turning those “it’s too technical for me” topics into “I can’t believe I get it” content pieces. He specializes in dissecting nuanced topics like Core Web Vitals, web performance metrics, and site speed optimization techniques. When he’s taking a breather from researching his next content piece, you’ll find him deep into the latest performance news.