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

๐Ÿ  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 109)


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

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

Recorder: Copy as options for steps, in-page replay, stepโ€™s context menu

New copy options in the Recorder panel.

Open an existing user flow in the Recorder. Previously, when you replayed the user flow, DevTools would always start the replay by navigating to or reloading the page.

With the latest updates, the Recorder shows the navigation step separately. You can right-click and remove it to perform in-page replay!

Apart from that, you can right-click a step and copy it to the clipboard in the *Recorder panel instead of exporting the whole user flow. It works with extensions too. For example, try to copy a step as a Nightwatch Test script. With this feature, you can update any existing script with ease.

Previously, you could access the step menu only through the 3-dot button. You can now right-click anywhere on the step to access the menu.

Chromium issues: 1322313, 1351649, 1322313, 1339767

Show actual function names in performanceโ€™s recordings

The Performance panel now shows the actual function names and their sources in the trace if thereโ€™s a sourcemap.

Show before and after comparison of function names display in the Performance panel.

In this example, a source file is minified during production. For example, the sayHi function is minified as n, and the takeABreak function is minified as o in this demo.

Show files before and after minfication.

Previously, when you recorded a trace in the Performance panel, the trace only showed you the minified function names. This made it harder to debug.

With the latest changes, DevTools now reads the source map and shows the actual function names and source location.

Chromium issues: 1364601, 1364601

New keyboard shortcuts in the Console & Sources panel

You can switch between tabs in the Sources panel using: On MacOS, Function + Command + Arrow up and down On Windows and Linux, Control + Page up or down

Moreover, you can navigate the autocomplete suggestions with Ctrl + N and Ctrl + P on MacOS, similar to Emacs. For example, you can type window. in the Console and use these shortcuts to navigate.

On top of that, DevTools now accepts only Arrow Right autocompletion at the end of line. For example, an autocomplete dialog shows when you are editing something in the middle of the code. When you press the Arrow Right key, most likely, you want to set the cursor to the next position instead of autocomplete. This UX change better aligns with your authoring workflow.

Chromium issue: 1167965, 1172535, 1371585. 1369503

Improved JavaScript debugging

These are some JavaScript debugging improvements in this release:

  • new.target is a meta-property that lets you detect whether a function or constructor was called using the new operator. You can now log new.target in the Console to check its value during debugging. Previously, it would return errors when you entered new.target. Show before and after comparison of new.target evaluation debugging.
  • A WeakRef object lets you hold a weak reference to another object, without preventing that object from getting garbage-collected. DevTools now shows an inline preview for the value and evaluates the weak reference directly in the console during debugging. Previously, you had to explicitly call โ€œderefโ€ on them to resolve it. Show before and after comparison of WeakRef evaluation during debugging.
  • Fixed inline preview for shadowed variable. Previously, the display value was incorrect. Show before and after comparison inline preview for shadowed variable.
  • Deobfuscate variable names in Generator and async functions in the Scope pane in the Sources panel.

Chromium issues: 1267690, 1246863 1371322, 1311637

Miscellaneous highlights

These are some noteworthy fixes in this release:

  • Support more hints for inactive CSS properties in the Styles pane - inline height and width, flex and grid properties. (1373597, 1178508, 1178508,1178508)
  • Fixed syntax highlighting. It was not working properly since the recent code editor upgrade in DevTools. (1290182)
  • Capture input change events properly after on blur event in the Recorder. (1378488)
  • Update Puppeteer replay script on export for better debugging experience in the Recorder. (1351649)
  • Support record and replay in the Recorder for remote debugging. (1185727)
  • Fixed parsing of special CSS variable names in var(). Previously, DevTools didn't support parsing variables with escaped characters like var(--fo\ o). , (1378992)

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

...



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


๐Ÿ“ˆ 39.44 Punkte

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


๐Ÿ“ˆ 39.44 Punkte

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


๐Ÿ“ˆ 39.44 Punkte

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


๐Ÿ“ˆ 38.01 Punkte

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


๐Ÿ“ˆ 38.01 Punkte

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


๐Ÿ“ˆ 34.27 Punkte

๐Ÿ“Œ CVE-2015-2548 | Microsoft Windows 7 SP1/Vista SP2 Shell use after free (MS15-109 / MS15-109)


๐Ÿ“ˆ 31.13 Punkte

๐Ÿ“Œ CVE-2015-2515 | Microsoft Windows Vista SP2 up to Server 2012 R2 Shell use after free (MS15-109 / MS15-109)


๐Ÿ“ˆ 31.13 Punkte

๐Ÿ“Œ Microsoft Edge 109 und Webview2 Runtime 109 unterstรผtzen als letzte Windows 7, 8 und 8.1


๐Ÿ“ˆ 31.13 Punkte

๐Ÿ“Œ Microsoft Edge 109 und Webview2 Runtime 109 unterstรผtzen als letzte Windows 7, 8 und 8.1


๐Ÿ“ˆ 31.13 Punkte

๐Ÿ“Œ DevTools Tips: Faster DevTools navigation


๐Ÿ“ˆ 29.78 Punkte

๐Ÿ“Œ Debugging PWA with DevTools | DevTools Tips


๐Ÿ“ˆ 29.78 Punkte

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


๐Ÿ“ˆ 29.78 Punkte

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


๐Ÿ“ˆ 29.78 Punkte

๐Ÿ“Œ DevTools Tips: Source maps in DevTools


๐Ÿ“ˆ 29.78 Punkte

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


๐Ÿ“ˆ 29.78 Punkte

๐Ÿ“Œ New in Chrome 109: OPFS on Android, new css properties, MathML Core support


๐Ÿ“ˆ 26.18 Punkte

๐Ÿ“Œ New in Chrome 109


๐Ÿ“ˆ 23.12 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

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


๐Ÿ“ˆ 22.45 Punkte

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


๐Ÿ“ˆ 22.45 Punkte

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


๐Ÿ“ˆ 22.45 Punkte

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


๐Ÿ“ˆ 22.45 Punkte

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


๐Ÿ“ˆ 22.45 Punkte

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


๐Ÿ“ˆ 22.45 Punkte

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


๐Ÿ“ˆ 22.45 Punkte

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


๐Ÿ“ˆ 22.45 Punkte

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


๐Ÿ“ˆ 22.45 Punkte











matomo