What's New In DevTools (Chrome 106)

Jecelyn Yeen

Group files by Authored / Deployed in the Sources panel

The Group files by Authored / Deployed is now shown under the 3-dot menu. Previously, it showed directly on the navigation pane.

Open this demo. Enable the Group files by Authored / Deployed setting to view your original source code (Authored) first and navigate to them quicker.

Chromium bug: 1352488

Improved stack traces

Linked stack traces for asynchronous operations

When some operations are scheduled to happen asynchronously, the stack traces in DevTools now tell the “full story” of the operation. Previously, it tells only part of the story.

For example, open this demo and click on the increment button. Expand the error message in Console. In our source code, the operation includes an async timeout operation.

// application.component.ts

async increment() {
    await Promise.resolve().then(() => timeout(100));
    …
}

Previously, the stack trace only showed the timeout operation. It did not show the “root cause” of the operation.

With the latest changes, DevTools now shows the operation originates from the onClick event in the button component, then the increment function, followed by the timeout operation.

Behind the scenes, DevTools introduced a new “Async Stack Tagging” feature. You can tell the whole story of the operation by linking both parts of the async code together with the new console.createTask() method. See Modern debugging in DevTools to learn more.

Does it sound complicated? Not at all. Most of the time, the framework you are using handles the scheduling and async execution. In that case, it is up to the framework to use the API, you don’t need to worry about it. (e.g. Angular implemented these changes)

Chromium bug: 1334585

Automatically ignore known third-party scripts

Identify issues in your code quicker during debugging because DevTools now automatically adds known third-party scripts to the ignore list.

Open this demo and click on the increment button. Expand the error message in Console. The stack trace shows only your code (e.g. app.component.ts button.component.ts). Click Show more frames to view the full stack trace.

Previously, the stack trace included third-party scripts like zone.js and core.mjs. These are not your source code, they are generated by bundlers (e.g. webpack) or frameworks (e.g. Angular). It took a longer time to identify the root cause of an error.

Behind the scenes, DevTools ignores third-party scripts based on the new x_google_ignoreList property in source maps. Frameworks and bundlers need to supply this information. See Case Study: Better Angular Debugging with DevTools.

Optionally, if you prefer to always view full stack traces, you can disable the setting via Settings > Ignore list > Automatically add known third-party scripts to ignore list.

Chromium bug: 1323199

Improved call stack during debugging

With the Automatically add known third-party scripts to ignore list setting, the call stack now shows only frames that are relevant to your code.

Open this demo and set a breakpoint at the increment() function in app.component.ts. Click the increment button on the page to trigger the breakpoint. The call stack shows only frames from your code (e.g. app.component.ts and button.component.ts).

To view all frames, enable Show ignore-listed frames. Previously, DevTools displayed all frames by default.

Chromium bug: 1352488

Hiding ignore-listed sources in the Sources panel

Enable hide ignore-listed sources to hide irrelevant files in the Navigation pane. This way, you can focus only on your code.

Open this demo. In the Sources panel. The node_modules and webpack are the third-party scripts. Click on the 3-dot menu and select hide ignore-listed sources to hide them from the pane.

Chromium bug: 1352488

Hiding ignore-listed files in the Command Menu

With the hide ignore-listed sources setting, you can find your file quicker with the Command Menu. Previously, searching files in the Command Menu returns third-party files that might not be relevant to you.

For example, enable the hide ignore-listed sources setting and click on the 3-dot menu. Select Open file. Type “ton” to search for button components. Previously, the results include files from node_modules, one of the node_modules files even shown up as the first result.

Chromium bug: 1336604

New Interactions track in the Performance panel

Use the new Interactions track in the Performance panel to visualize interactions and track down potential responsiveness issues.

For example, start a performance recording on this demo page. Click on a coffee and stop recording. Two interactions show in the Interactions track. Both interactions have the same IDs, indicating the interactions are triggered from the same user interaction.

Chromium bug: 1347390

LCP timings breakdown in the Performance Insights panel

The Performance Insights panel now shows the timings breakdown of the Largest Contentful Paint (LCP). Use these timings information to understand and identify an opportunity to improve LCP performance.

Chromium bug: 1351735

Auto-generate default name for recordings in the Recorder panel

The Recorder panel now automatically generates a name for new recordings.

Chromium bug: 1351383

Miscellaneous highlights

• Previously, Recorder extensions don’t show up in the Recorder panel from time to time. (1351416)
• The Styles pane now displays a color picker for the SVG <stop> element’s stop-color property. (1351096)
• Identify scripts causing layout thrashing as the potential root causes for layout shifts in the Performance Insights panel. (1343019)
• Display critical path for LCP web fonts in the Performance Insights panel. (1350390)

Download the preview channels

Consider using the Chrome Canary, Dev or Beta as your default development browser. These preview channels give you access to the latest DevTools features, test cutting-edge web platform APIs, and find issues on your site before your users do!

Getting in touch with the Chrome DevTools team

Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

• Submit a suggestion or feedback to us via crbug.com.
• Report a DevTools issue using the More options     > Help > Report a DevTools issues in DevTools.
• Tweet at @ChromeDevTools.
• Leave comments on our What's new in DevTools YouTube videos or DevTools Tips YouTube videos.

What's new in DevTools

A list of everything that has been covered in the What's new in DevTools series.