Cookie Consent by Free Privacy Policy Generator website What's New In DevTools (Chrome 104) u

Portal Nachrichten

WIRKLICH FIXED: RSS feeds abonnieren!!!


➠ What's New In DevTools (Chrome 104)

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

Restart frame during debugging

The Restart frame feature is back! You can re-run the preceding code when paused somewhere in a function. Previously, this feature was deprecated and removed in Chrome 92 due to stability issues.

In this example, the debugger initially paused at the breakpoint (line 343) near the end of the toggleColorScheme function. To restart the debugging from the beginning of the toggleColorScheme function, expand the Call stack section in the Debugger pane, right click on toggleColorScheme and select Restart frame.

Restart frame during debugging

Chromium issue: 1303521

Slow replay options in the Recorder panel

You can now replay user flows at a slower speed — slow, very slow, and extremely slow. These options let you better observe each step replay on screen.

Open the Recorder panel and start a new recording. Once the recording is done, click on the Replay dropdown button. Select a speed to start a replay.

Slow replay options in the Recorder panel

Chromium issue: 1306756

Build an extension for the Recorder panel

You can now build or install a Chrome extension to export replay scripts in your favorite format. See Recorder extension API documentation to learn how to build one.

To install a demo extension, follow these steps outlined in the documentation.

custom extension for the Recorder panel

Chromium issue: 1325751

Group files by Authored / Deployed in the Sources panel

Enable the new Group files by Authored / Deployed option to organize your files in the Sources panel. When developing web applications with frameworks (for example, React, Angular), it can be difficult to navigate the source files due to the minified files generated by the build tools (for example, Webpack, Vite).

With this checkbox, you can group files into 2 categories for quicker file search:

  • Authored. Similar to the source files you view in your IDE. DevTools generates these files based on sourcemaps (provided by your build tools).
  • Deployed. The actual files that the browser reads. Usually these files are minified.

Try it yourself with this React demo!

Group files by Authored / Deployed in the Sources panel

Chromium issue: 960909

New User Timings track in the Performance insights panel

Visualize performance.measure() marks in your recording with the new User Timings track in the Performance insights panel.

For example, this web page uses the performance.measure() method to calculate the elapsed time of text loading.

When you start measuring the page load, the User Timings track shows in the recording. Click on the timings item to view its details on the side pane.

User Timings track in the Performance insights panel

Chromium issue: 1322808

Reveal assigned slot of an element

Slotted elements in the Elements panel have a new slot badge. When debugging layout issues, use this feature to identify the element which affects the node's layout quicker.

This example contains cards with a few named slots. Inspect the person-occupation slot of a card, click the slot badge next to it to reveal its assigned slot.

Learn how to use and elements to create a flexible template that can then be used to populate the shadow DOM of a web component.

Reveal assigned slot of an element

Chromium issue: 1018906

Simulate hardware concurrency for Performance recordings

The new Hardware concurrency setting in the Performance panel allows developers to configure the value reported by navigator.hardwareConcurrency.

Some applications use navigator.hardwareConcurrency to control the degree of parallelism of their application, for example, to control Emscripten pthread pool size. With this feature, developers can test their application performance with different core counts.

Simulate hardware concurrency for Performance recordings

Chromium issue: 1297439

Preview non-color value when autocompleting CSS variables

When autocompleting CSS variables, DevTools now populates the non-color variable with a meaningful value so that you can preview what kind of change the value will have on the node.

Preview non-color value when autocompleting CSS variables

Chromium issue: 1285091

Identify blocking frames in the Back/forward cache pane

The Back/forward cache pane in the Application panel has new frames section to help you identify blocking frames that may be preventing the page from being eligible for bfcache.

Identify blocking frames in the Back/forward cache pane

Chromium issue: 1288158

Improved autocomplete suggestions for JavaScript objects

The the autocompletion for JavaScript object properties now display based on this order:

  1. Own enumerable properties
  2. Own non-enumerable properties
  3. Inherited enumerable properties
  4. Inherited non-enumerable properties

Previously, developers found it harder to find relevant properties because the suggestion only favored own properties over inherited properties, and all inherited properties were given equal priority.

Improved autocomplete suggestions for JavaScript objects

Chromium issue: 1299241

Sourcemaps improvements

Here are a few fixes on sourcemaps to improve the overall debugging experience:

  • Breakpoints now work in inline <script> with sourceURL annotations.
  • The debugger now resolves block scoped variables in the Scope view with source maps. Resolves block scoped variables
  • The debugger now resolves variables in arrow functions in the Scope view with source maps. Resolves variables in arrow functions

Chromium issues: 1329113, 1322115

Miscellaneous highlights

These are some noteworthy fixes in this release:

  • Fixed the Auto-completion setting for the Sources panel. Previously, the auto-complete always on even the setting is disabled. (1323286)
  • Updated the Manifest tab in the Application panel to parse the latest color scheme format. (1318305)
  • Improved the suggestions for the <script async> rendering blocking issues in the Performance insights panel. Previously, DevTools suggested to add async attribute to the script tag even though the script is already marked as async. (1334096)
  • The Performance insights panel now detects iframes as potential causes for layout shifts. You can view the iframe details in the Details pane. (1328873)
  • When open file in the Command menu, the authored files (files generated by sourcemaps) are now ranked higher so they appear above similarly named deployed scripts. (1312929)

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.

What's New in DevTools

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

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

...


➦ Programmierung ☆ developer.chrome.com

➠ Komplette Nachricht lesen


Zur Startseite

➤ Ähnliche Beiträge für 'What's New In DevTools (Chrome 104)'

What's New In DevTools (Chrome 109)

vom 8660.25 Punkte
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 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 lat

What's New In DevTools (Chrome 104)

vom 8634.5 Punkte
Interested in helping improve DevTools? Sign up to participate in Google User Research here. # Restart frame during debugging The Restart frame feature is back! You can re-run the preceding code when paused somewhere in a function. Previously, this feature was deprecated and removed in Chrome 92 due to stability issues. In this example, the debugger init

What's New In DevTools (Chrome 106)

vom 8588.03 Punkte
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 vie

What's New In DevTools (Chrome 108)

vom 8547.47 Punkte
Interested in helping improve DevTools? Sign up to participate in Google User Research here. # Hints for inactive CSS properties DevTools now identifies CSS styles that are valid but have no visible effect. In the Styles pane, DevTools fades out the inactive properties. Hover over the icon next to it to understand why the rule has no visible effect. Chromium issue: 1178508 # Auto-detect XPath and text selectors in the R

What's New In DevTools (Chrome 107)

vom 8488.77 Punkte
Interested in helping improve DevTools? Sign up to participate in Google User Research here. # Customize keyboard shortcuts in DevTools You can now customize keyboard shortcuts for your favorite commands in DevTools. Go to Settings > Shortcuts, hover over a command and click the Edit button (pen icon) to customize the keyboard shortcut. You can creat

What's New In DevTools (Chrome 105)

vom 8341.28 Punkte
Interested in helping improve DevTools? Sign up to participate in Google User Research here. # Step-by-step replay in the Recorder You can now set a breakpoint and replay a user flow step by step in the Recorder panel. To set a breakpoint, click on the blue dot next to a step. Replay your user flow, the replay will pause before executing the step. From h

What's New In DevTools (Chrome 103)

vom 7066.77 Punkte
Interested in helping improve DevTools? Sign up to participate in Google User Research here. # Capture double-click and right-click events in the Recorder panel The Recorder panel can now capture double-click and right-click events. In this example, start a recording and try to perform the following steps: Double-click the card to enlarge it Right-click the card and select an action from the context menu To understa

[Testing Update] 2022-08-15 - Cinnamon, Nextcloud, KDE-git, Haskell, Python, Glibc EAC Fix

vom 1669.2 Punkte
Hello community, Another testing branch update with some usual updates for you. Checkout what ETAPRIME has to say about our UM350 MiniPC! This brings the fix to EAC issues you may had with Proton-Games on Steam More updates to Cinnamon Nextcloud is now at 24.0.4 Regular KDE-git, Hask

[Stable Update] 2022-08-16 - Glibc with EAC fix, Nextcloud, KDE-git, Cinnamon, Haskell, Python

vom 1666.3 Punkte
Hello community, Another stable branch update with some usual updates for you. Checkout what ETAPRIME has to say about our UM350 MiniPC! This brings the fix to EAC issues you may had with Proton-Games on Steam More updates to Cinnamon Nextcloud is now at 24.0.4 Regular KDE-git, Hask

[Testing Update] 2022-07-30 - Kernels, Firefox, Signal, Wire, Steam, Qt5, Python

vom 1661.65 Punkte
Hello community, Another testing branch update with some usual updates for you. Checkout the store. From 2nd till 8th we offer 20% discount! Some of our Kernels got updated Firefox-Dev got a new beta release Secure messengers Signal and Wire got updated clients Steam-Client got renewe

[Testing Update] 2022-07-27 - Kernels, Cinnamon, AMDVLK, Firefox 103

vom 835.96 Punkte
Hello community, Another testing branch update with some usual updates for you. Cinnamon 5.4 brings a new version of the Mutter window manager Some of our Kernels got updated Some more Cinnamon updates AMDVLK is now at 2022.Q3.1 Firefox 103 improved performance on high-refresh rate

Modern web debugging in Chrome DevTools

vom 668.07 Punkte
# Introduction Today, authors can use many abstractions to build their Web applications. Instead of directly interfacing with the lower-level APIs that the Web Platform provides, many authors leverage frameworks, build tools and compilers to write their app

Team Security Diskussion über What's New In DevTools (Chrome 104)