Debugging can be tedious and even more frustrating when you can't easily locate the bug. Chrome 106 developer tools (devtools) are set to simplify the debugging process, making it easier and fast.

You can now easily sort through files, optimize your search, hide third-party scripts, access in-depth performance reports, and much more discussed in this article. These devtools are essential, especially for developers working with JavaScript frameworks such as Angular, React, and Vue.js, who now have an interactive and simplified console to visualize and debug their code.

Let us take a closer look at some of these new features:

To fully benefit from the new updates on Chrome 106, download the Chrome Canary, Dev, or Beta versions as your default development browser. You will have access to the latest Developer tools that enable testing of web platform APIs, and quickly identifying issues or bugs on your site to ensure your users have the best customer experience.

1. Files Grouped by Authored/Deployed

You can now navigate directly to your application components by grouping files at authored/deployed on the source panel. Go to Source > 3-dot-menu > Group by Authored/Deployed. Now, when you open the files, you can only see your deployed files on the panel.

In previous Chrome versions, all the source code files were visible in the navigation panel, making it difficult to find a single file.

screenshot of files grouped in source pane

You can restrict your search on the source panel to only relevant files. In previous versions of Chrome, files generated by the framework and other third parties would show on the search results, making it hard to identify the search item.

This update is the devtools version of optimizing your search on web browsers with Google search cheat sheets. To configure this setting go to the 3-dot-menu > Hide ignore-list sources.

Search relevant results

3. Hide Third-Party Scripts

Third-party scripts filling up your console? Chrome 106 added an ignore-list extension in the source map to enable you to hide scripts auto-generated by frameworks and other third parties.

To activate this feature, go to Settings > Ignore list > Automatically add known third-party scripts to the ignore list. When you open the files again, the console will show only relevant files associated with your application. You can now see your code without distraction.

Adding third-party scripts to ignorelist

4. Detailed Stack Traces

You will take less time to identify an error on the console, thanks to a new feature on Chrome 106. Chrome Developer tools give you a detailed view of asynchronous operations and their root causes. In previous versions, only the events that led to the operation were visible. The latest devTools show the entire chain of operations and their root causes.

Google has configured a console.createTask() method in Chrome 106. This method enables frameworks to perform stack traces on the console. Debugging JavaScript using devtools is just as easy as debugging CSS using chrome.

stack traces of asynchronous operations

5. Track Interactions in the Performance Panel

Track new Interactions in the Performance panel to identify potential responsiveness issues to your application. In Chrome 106, all interactions show in the Interactions track after an operation. The track shows the source of the interactions and their IDs. Tracking helps to identify the source and intercept it accordingly.

Perfomance panel showing interactions

6. LCP Timing Insights in the Performance Panel

The Largest Contentful Paint (LCP) timing details are now available on the performance insights panel. LCP is a vital web performance metric that reports on the render time images or blocks of text take to load on the web page. A 2.5sec or below is a good performance score.

To see the insights navigate to performance panel>3-dot-menu-more tolls>performance insights. When you replay a recording, the Details panel will show the load timings.

performance insights panel showing timings

Additional Updates in Chrome 106

Other enhancements to Chrome 106 include:

  • You can export your script recordings without issues from the Recorder panel. The export button had a problem in previous versions.
  • You now have a color picker in the Styles pane SVG elements.
  • You can identify scripts distorting your layout in the Performance Insights panel.
  • You can display paths for LCP web fonts in the Performance Insights panel.

These features may improve how you use the browser's development tools.

What You Get From Chrome 106

The latest improvements to devtools in Chrome 106 make the debugging process faster. The new updates make it easier to visualize operations through a simplified and dynamic console that allows you to hide files, disable scripts, record, and have an in-depth view of your application when debugging.

Chrome 106's additions will enable you to manage your application and optimize its performance. Go ahead and enjoy these benefits by updating to the latest version of Chrome 106.