Get NitroPack with up to 37% OFF
Once you start with NitroPack, you can freely choose your integration platform.
Everything you need to know about
NitroPack features and compatibilities.
Whether you run a blog or
an agency, we have a
partnership opportunity for you!
The place to learn how to
improve your web performance,
how to get the most out of
NitroPack, and what is coming
next to our product.
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.
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.
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:
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.
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.
To improve the autocompletion experience, DevTools has implemented several changes, including the following:
As an example, consider what occurs when you type "tab" in the Console:
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:
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:
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.
The Chrome 111 release is scheduled for March 7th, 2023.
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.
