Cookie Consent by Free Privacy Policy Generator ๐Ÿ“Œ What's New In DevTools (Chrome 106)

๐Ÿ  Team IT Security News

TSecurity.de ist eine Online-Plattform, die sich auf die Bereitstellung von Informationen,alle 15 Minuten neuste Nachrichten, Bildungsressourcen und Dienstleistungen rund um das Thema IT-Sicherheit spezialisiert hat.
Ob es sich um aktuelle Nachrichten, Fachartikel, Blogbeitrรคge, Webinare, Tutorials, oder Tipps & Tricks handelt, TSecurity.de bietet seinen Nutzern einen umfassenden รœberblick รผber die wichtigsten Aspekte der IT-Sicherheit in einer sich stรคndig verรคndernden digitalen Welt.

16.12.2023 - TIP: Wer den Cookie Consent Banner akzeptiert, kann z.B. von Englisch nach Deutsch รผbersetzen, erst Englisch auswรคhlen dann wieder Deutsch!

Google Android Playstore Download Button fรผr Team IT Security



๐Ÿ“š What's New In DevTools (Chrome 106)


๐Ÿ’ก Newskategorie: Programmierung
๐Ÿ”— Quelle: developer.chrome.com

Interested in helping improve DevTools? Sign up to participate in Google User Research here.

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

Automatically ignore known third-party scripts in 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 sourcemaps. 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

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.

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 Containful 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 script causing layout 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 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

...



๐Ÿ“Œ What's New In DevTools (Chrome 106)


๐Ÿ“ˆ 37.64 Punkte

๐Ÿ“Œ Chrome 106 - Whatโ€™s New in DevTools


๐Ÿ“ˆ 37.64 Punkte

๐Ÿ“Œ Google Chrome prior 66.0.3359.106 DevTools HTML Page cross site scripting


๐Ÿ“ˆ 34.58 Punkte

๐Ÿ“Œ Different ways to open Chrome DevTools | DevTools Tips


๐Ÿ“ˆ 34.27 Punkte

๐Ÿ“Œ CVE-2015-6042 | Microsoft Internet Explorer 11 CWindow use after free (MS15-106 / MS15-106)


๐Ÿ“ˆ 30.39 Punkte

๐Ÿ“Œ CVE-2015-6047 | Microsoft Internet Explorer 8/9/10/11 EditWith Broker access control (MS15-106 / MS15-106)


๐Ÿ“ˆ 30.39 Punkte

๐Ÿ“Œ CVE-2015-6046 | Microsoft Internet Explorer 9/10/11 Memory information disclosure (MS15-106 / MS15-106)


๐Ÿ“ˆ 30.39 Punkte

๐Ÿ“Œ CVE-2015-6044 | Microsoft Internet Explorer 8 access control (MS15-106 / MS15-106)


๐Ÿ“ˆ 30.39 Punkte

๐Ÿ“Œ CVE-2015-6048 | Microsoft Internet Explorer 7/8/9/10/11 memory corruption (MS15-106 / MS15-106)


๐Ÿ“ˆ 30.39 Punkte

๐Ÿ“Œ CVE-2015-6050 | Microsoft Internet Explorer 10 memory corruption (MS15-106 / MS15-106)


๐Ÿ“ˆ 30.39 Punkte

๐Ÿ“Œ CVE-2015-6049 | Microsoft Internet Explorer 7/8/9/10/11 memory corruption (MS15-106 / MS15-106)


๐Ÿ“ˆ 30.39 Punkte

๐Ÿ“Œ CVE-2015-6053 | Microsoft Internet Explorer 11 ArrayBuffer.slice information disclosure (MS15-106 / MS15-106)


๐Ÿ“ˆ 30.39 Punkte

๐Ÿ“Œ CVE-2015-6051 | Microsoft Internet Explorer 10/11 access control (MS15-106 / MS15-106)


๐Ÿ“ˆ 30.39 Punkte

๐Ÿ“Œ CVE-2015-6045 | Microsoft Internet Explorer 11 CElement Object use after free (MS15-106 / MS15-106)


๐Ÿ“ˆ 30.39 Punkte

๐Ÿ“Œ DevTools Tips: How to emulate CSS user preference media features with DevTools


๐Ÿ“ˆ 29.78 Punkte

๐Ÿ“Œ Discover CSS issues with DevTools | DevTools Tips


๐Ÿ“ˆ 29.78 Punkte

๐Ÿ“Œ DevTools Tips: Source maps in DevTools


๐Ÿ“ˆ 29.78 Punkte

๐Ÿ“Œ DevTools Tips: Different ways to open DevTools


๐Ÿ“ˆ 29.78 Punkte

๐Ÿ“Œ DevTools Tips: Faster DevTools navigation


๐Ÿ“ˆ 29.78 Punkte

๐Ÿ“Œ Debugging PWA with DevTools | DevTools Tips


๐Ÿ“ˆ 29.78 Punkte

๐Ÿ“Œ Google Chrome vor 48.0.2564.109 Developer Tools chrome-devtools-frontend.appspot.com remoteBase erweiterte Rechte


๐Ÿ“ˆ 23.88 Punkte

๐Ÿ“Œ Google Chrome prior 48.0.2564.109 Developer Tools chrome-devtools-frontend.appspot.com remoteBase privilege escalation


๐Ÿ“ˆ 23.88 Punkte

๐Ÿ“Œ Google Chrome vor 48.0.2564.109 Developer Tools chrome-devtools-frontend.appspot.com remoteBase erweiterte Rechte


๐Ÿ“ˆ 23.88 Punkte

๐Ÿ“Œ Chrome 106 Beta: New CSS Features, WebCodecs and WebXR Improvements, and More


๐Ÿ“ˆ 22.75 Punkte

๐Ÿ“Œ New in Chrome 106: Intl API Improvements, Pop-Up API, CSS Improvements, and more!


๐Ÿ“ˆ 22.75 Punkte

๐Ÿ“Œ New in Chrome 106


๐Ÿ“ˆ 22.75 Punkte

๐Ÿ“Œ Chrome 106 Beta: New CSS Features, WebCodecs and WebXR Improvements, and More


๐Ÿ“ˆ 22.75 Punkte

๐Ÿ“Œ Chrome 60 - What's New in DevTools


๐Ÿ“ˆ 22.45 Punkte

๐Ÿ“Œ Chrome 59 - What's New in DevTools


๐Ÿ“ˆ 22.45 Punkte

๐Ÿ“Œ Chrome 75 - Whatโ€™s New in DevTools


๐Ÿ“ˆ 22.45 Punkte

๐Ÿ“Œ Chrome 74 - Whatโ€™s New in DevTools


๐Ÿ“ˆ 22.45 Punkte

๐Ÿ“Œ Chrome 73 - Whatโ€™s New in DevTools


๐Ÿ“ˆ 22.45 Punkte

๐Ÿ“Œ Chrome 72 - Whatโ€™s New in DevTools


๐Ÿ“ˆ 22.45 Punkte

๐Ÿ“Œ Chrome 71 - Whatโ€™s New in DevTools


๐Ÿ“ˆ 22.45 Punkte

๐Ÿ“Œ Chrome 70 - Whatโ€™s New in DevTools


๐Ÿ“ˆ 22.45 Punkte











matomo