What's New In DevTools (Chrome 106)

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.

Group files by Authored / Deployed

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.

Linked stack traces for asynchronous operations

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.

Automatically ignore known third-party scripts in the stack trace

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.

Setting to 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.

Improved call stack during debugging

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.

Hiding ignore-listed sources in the Sources panel

Chromium bug: 1352488

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.

Hiding ignore-listed files in the Command Menu

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.

Interactions track in the Performance panel

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.

LCP timings breakdown in the Performance Insights panel

Chromium bug: 1351735

Auto-generate default name for recordings in the Recorder panel

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

Default name for recordings in the Recorder panel

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   More   > 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.

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 was cancelled.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59