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.
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.
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.
Additionally, developers can change the code format by using the dropdown, which provides various options:
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.
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.
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:
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:
You can customize these shortcuts via the Settings menu:
Use the Create a new recording command from the Command Menu in DevTools to start a user flow recording immediately:
Caches reorganized in the Application panel
The Cache Storage settings can now be found in the Storage section of the Application section:
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.
