|
| 1 | +--- |
| 2 | +layout: "layouts/blog-post.njk" |
| 3 | +title: "What's New In DevTools (Chrome 106)" |
| 4 | +authors: |
| 5 | + - jecelynyeen |
| 6 | +date: 2022-09-16 |
| 7 | +updated: 2022-09-16 |
| 8 | +description: "Better support for modern web debugging, LCP timings breakdown in the Performance Insights, and more." |
| 9 | +hero: 'image/dPDCek3EhZgLQPGtEG3y0fTn4v82/XCDqHkWVeQ03WpwmgQq5.jpg' |
| 10 | +alt: '' |
| 11 | +tags: |
| 12 | + - new-in-devtools |
| 13 | + - devtools |
| 14 | + - chrome-106 |
| 15 | +--- |
| 16 | + |
| 17 | +{% include 'partials/devtools/en/banner.md' %} |
| 18 | + |
| 19 | + |
| 20 | +## Group files by Authored / Deployed in the Sources panel {: #authored } |
| 21 | + |
| 22 | +The **Group files by Authored / Deployed** is now shown under the 3-dot menu. Previously, it showed directly on the navigation pane. |
| 23 | + |
| 24 | +Open this [demo](https://ng-devtools.netlify.app/). Enable the **Group files by Authored / Deployed** setting to view your original source code (Authored) first and navigate to them quicker. |
| 25 | + |
| 26 | +{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/HI12Jz3K7CCy0cm01jBk.png", alt="Group files by Authored / Deployed", width="800", height="405" %} |
| 27 | + |
| 28 | +{# https://chromium.googlesource.com/devtools/devtools-frontend/+/73c559d02676e4329645120e657416e7f15de42b #} |
| 29 | + |
| 30 | +Chromium bug: [1352488](https://crbug.com/1352488) |
| 31 | + |
| 32 | + |
| 33 | +## Improved stack traces {: #stack-traces } |
| 34 | + |
| 35 | +### Linked stack traces for asynchronous operations {: #async } |
| 36 | + |
| 37 | +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. |
| 38 | + |
| 39 | +For example, open this [demo](https://ng-devtools.netlify.app/) and click on the increment button. Expand the error message in **Console**. In our source code, the operation includes an async `timeout` operation. |
| 40 | + |
| 41 | +```js |
| 42 | +// application.component.ts |
| 43 | + |
| 44 | +async increment() { |
| 45 | + await Promise.resolve().then(() => timeout(100)); |
| 46 | + … |
| 47 | +} |
| 48 | +``` |
| 49 | + |
| 50 | +Previously, the stack trace only showed the timeout operation. It did not show the “root cause” of the operation. |
| 51 | + |
| 52 | +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. |
| 53 | + |
| 54 | +{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/2jAETpw8QWzsg1Wqk0Ya.png", alt="Linked stack traces for asynchronous operations", width="800", height="442" %} |
| 55 | + |
| 56 | +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](/blog/devtools-modern-web-debugging/#linked-stack-traces) to learn more. |
| 57 | + |
| 58 | +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 implement the API, you don’t need to worry about it. (e.g. Angular implemented these [changes](https://chromium-review.googlesource.com/c/v8/v8/+/3776678)) |
| 59 | + |
| 60 | +{# https://chromium.googlesource.com/v8/v8/+/c53c20fe64b5b21f5a4838ebcfdb96357189fc76 #} |
| 61 | + |
| 62 | +Chromium bug: [1334585](https://crbug.com1334585) |
| 63 | + |
| 64 | + |
| 65 | +### Automatically ignore known third-party scripts {: #auto-ignore } |
| 66 | + |
| 67 | +Identify issues in your code quicker during debugging because DevTools now automatically adds known third-party scripts to the ignore list. |
| 68 | + |
| 69 | +Open this [demo](https://ng-devtools.netlify.app/) 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. |
| 70 | + |
| 71 | +{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/GQ9B11tKBcFc1BxQYW9z.png", alt="Automatically ignore known third-party scripts in stack trace", width="800", height="425" %} |
| 72 | + |
| 73 | +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. |
| 74 | + |
| 75 | +{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/GQ9B11tKBcFc1BxQYW9z.png", alt="Automatically ignore known third-party scripts in the stack trace", width="800", height="425" %} |
| 76 | + |
| 77 | +Behind the scenes, DevTools ignores third-party scripts based on the new `x_google_ignoreList` property in sourcemaps. Frameworks and bundlers need to supply this information. See [Case Study: Better Angular Debugging with DevTools](/blog/devtools-better-angular-debugging/#x_google_ignorelist-in-angular). |
| 78 | + |
| 79 | +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**. |
| 80 | + |
| 81 | +{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/elkhLqA0KV8pWYFgKk8g.png", alt="Setting to automatically add known third-party scripts to ignore list", width="800", height="516" %} |
| 82 | + |
| 83 | +{# https://chromium.googlesource.com/devtools/devtools-frontend/+/e09e489c2b1233ab424d562abc22f297c6322878 #} |
| 84 | + |
| 85 | +Chromium bug: [1323199](https://crbug.com/1323199) |
| 86 | + |
| 87 | + |
| 88 | +## Improved call stack during debugging {: #call-stack } |
| 89 | + |
| 90 | +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. |
| 91 | + |
| 92 | +Open this [demo](https://ng-devtools.netlify.app/) 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`). |
| 93 | + |
| 94 | +To view all frames, enable **Show ignore-listed frames**. Previously, DevTools displayed all frames by default. |
| 95 | + |
| 96 | +{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/PdjPrBAV7TXn8FHcRR6R.png", alt="Improved call stack during debugging", width="800", height="601" %} |
| 97 | + |
| 98 | +{# https://chromium.googlesource.com/devtools/devtools-frontend/+/73c559d02676e4329645120e657416e7f15de42b #} |
| 99 | + |
| 100 | +Chromium bug: [1352488](https://crbug.com/1352488) |
| 101 | + |
| 102 | + |
| 103 | +## Hiding ignore-listed sources in the Sources panel {: #ignore-nav } |
| 104 | + |
| 105 | +Enable **hide ignore-listed sources** to hide irrelevant files in the **Navigation** pane. This way, you can focus only on your code. |
| 106 | + |
| 107 | +Open this [demo](https://ng-devtools.netlify.app/). 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. |
| 108 | + |
| 109 | +{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/Y4KSjl9zJQdnAhTvtnXm.png", alt="Hiding ignore-listed sources in the Sources panel", width="800", height="449" %} |
| 110 | + |
| 111 | +Chromium bug: [1352488](https://crbug.com/1352488) |
| 112 | + |
| 113 | + |
| 114 | +## Hiding ignore-listed files in the Command Menu {: #ignore-search } |
| 115 | + |
| 116 | +With the **hide ignore-listed sources** setting, you can find your file quicker with the [Command Menu](/docs/devtools/command-menu/). Previously, searching files in the **Command Menu** returns third-party files that might not be relevant to you. |
| 117 | + |
| 118 | +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. |
| 119 | + |
| 120 | +{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/vi0yhKte5KN511F57FQM.png", alt="Hiding ignore-listed files in the Command Menu", width="800", height="425" %} |
| 121 | + |
| 122 | +{# https://chromium.googlesource.com/devtools/devtools-frontend/+/9144105ce3efd70babe74c19e808616864be631b #} |
| 123 | +{# https://chromium.googlesource.com/devtools/devtools-frontend/+/c010ce7baa6930cb633372b5d8024a18b3f7ed66 #} |
| 124 | + |
| 125 | +Chromium bug: [1336604](https://crbug.com/1336604) |
| 126 | + |
| 127 | + |
| 128 | +## New Interactions track in the Performance panel {: #performance } |
| 129 | + |
| 130 | +Use the new **Interactions** track in the **Performance** panel to visualize interactions and track down potential responsiveness issues. |
| 131 | + |
| 132 | +For example, [start a performance recording](/docs/devtools/evaluate-performance/#record ) on this [demo page](https://coffee-cart.netlify.app/?ad=1). 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. |
| 133 | + |
| 134 | +{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/LpHJbSGra2ZCHpy3ns7q.png", alt="Interactions track in the Performance panel", width="800", height="489" %} |
| 135 | + |
| 136 | +{# https://chromium.googlesource.com/devtools/devtools-frontend/+/6d97228951a6c8884b3ac4b712e966e79f2bdc3c #} |
| 137 | + |
| 138 | +Chromium bug: [1347390](https://crbug.com/1347390) |
| 139 | + |
| 140 | + |
| 141 | +## LCP timings breakdown in the Performance Insights panel {: #insights } |
| 142 | + |
| 143 | +The **Performance Insights** panel now shows the [timings breakdown](web.dev/optimize-lcp/#lcp-breakdown) of the [Largest Containful Paint (LCP)](/docs/devtools/performance-insights/#largest-contentful-paint). Use these timings information to understand and identify an opportunity to improve LCP performance. |
| 144 | + |
| 145 | +{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/hU6RmoRjFskL8P2ZAB9l.png", alt="LCP timings breakdown in the Performance Insights panel", width="800", height="523" %} |
| 146 | + |
| 147 | +{# https://chrome-internal.googlesource.com/devtools/devtools-internal/+/883542a3727a5bc1415ffee7c7bc7f7218d9e2a5 #} |
| 148 | + |
| 149 | +Chromium bug: [1351735](https://crbug.com/1351735) |
| 150 | + |
| 151 | + |
| 152 | +## Auto-generate default name for recordings in the Recorder panel {: #recorder } |
| 153 | + |
| 154 | +The **Recorder** panel now automatically generates a name for new recordings. |
| 155 | + |
| 156 | +{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/0TMJgVqyk7AeoWIR6Vee.png", alt="Default name for recordings in the Recorder panel", width="800", height="565" %} |
| 157 | + |
| 158 | +{# https://chrome-internal.googlesource.com/devtools/devtools-internal/+/fbf1466b00d1ff2c36fce81fde1b21f33b689a76 #} |
| 159 | + |
| 160 | +Chromium bug: [1351383](https://crbug.com/1351383) |
| 161 | + |
| 162 | + |
| 163 | +## Miscellaneous highlights {: #misc } |
| 164 | + |
| 165 | +- Previously, [Recorder extensions](/docs/devtools/recorder/reference/#extension-troubleshooting) don’t show up in the **Recorder** panel from time to time. ([1351416](https://crbug.com/1351416)) |
| 166 | +- The **Styles** pane now displays a color picker for the [SVG `<stop>`](https://developer.mozilla.org/docs/Web/SVG/Element/stop) element’s `stop-color` property. ([1351096](https://crbug.com/1351096)) |
| 167 | +- Identify script causing [layout](https://web.dev/avoid-large-complex-layouts-and-layout-thrashing/) as the potential root causes for layout shifts in the **Performance Insights** panel. ([1343019](https://crbug.com/1343019)) |
| 168 | +- Display critical path for LCP web fonts in the **Performance Insights** panel. ([1350390](https://crbug.com/1350390)) |
| 169 | + |
| 170 | +{# https://chromium.googlesource.com/devtools/devtools-frontend/+/50a84ca8e5b556e27bb285477f21a99f0ccb7050 #} |
| 171 | +{# https://chrome-internal.googlesource.com/devtools/devtools-internal/+/2687a701a67e543faeff3f936f215534bf8221bf #} |
| 172 | +{# https://chromium.googlesource.com/devtools/devtools-frontend/+/1f6ef0d58292665e06eded4059d8714a2e487e8a #} |
| 173 | +{# https://chrome-internal.googlesource.com/devtools/devtools-internal/+/fe7254c9a51f964b2a106becc1b22f38033b9f50 #} |
| 174 | + |
| 175 | +{% include 'partials/devtools/en/reach-out.md' %} |
| 176 | +{% include 'partials/devtools/en/whats-new.md' %} |
0 commit comments