What's New In DevTools (Chrome 103) u



Portal Nachrichten

Team IT Sicherheit NEWS (572 Quellen): 30.11.22 Fixes Designänderung und Störung behoben.



➠ What's New In DevTools (Chrome 103)

➦ Programmierung ☆ developer.chrome.com

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.

Capture double-click and right-click events in the Recorder panel

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 understand how Recorder captured these events, expand the steps:

  • Double-click is captured as type: doubleClick.
  • Right-click event is captured as type: click but with the button property is set to secondary. The button value of a normal mouse click is primary.

Chromium issues: 1300839, 1322879, 1299701, 1323688

New timespan and snapshot mode in the Lighthouse panel

You can now use Lighthouse to measure your website’s performance beyond page load.

New timespan and snapshot mode in the Lighthouse panel

The Lighthouse panel now supports 3 modes of user flow measurement:

  • Navigation reports analyze a single page load. Navigation is the most common report type. All Lighthouse reports before the current version are navigation reports.
  • Timespans reports analyze an arbitrary time period, typically containing user interactions.
  • Snapshots reports analyze the page in a particular state, typically after the user has interacted with it.

For example, let’s measure the performance of adding items to cart on this demo page. Select the Timespan mode and click Start timespan. Scroll and add a few items to the cart. Once you are done, click on End timespan to generate a Lighthouse report of the user interactions.

Timespan mode

See User flows in Lighthouse to learn about the unique use cases, benefits, and limitations of each mode.

Chromium issue: 1291284

Performance Insights updates

Improved zoom control in the Performance Insights panel

DevTools will now zoom in based on your mouse cursor rather than the playhead position.With the latest cursor-based zoom, you can move your mouse to anywhere in the track, and zoom in to the desired area right away.

See Performance Insights to learn how to get actionable insights and improve your website’s performance with the panel.

Chromium issue: 1313382

Confirm to delete a performance recording

DevTools now shows a confirmation dialog before deleting a performance recording.

Confirm to delete a performance recording

Chromium issue: 1318087

Reorder panes in the Elements panel

You can now reorder panes in the Elements panel based on your preference.

For example, when you open DevTools on a narrow screen, the Accessibility pane is hidden under the Show more button. If you frequently debug accessibility issues, you can now drag the pane to the front for easier access.

Reorder panes in the Elements panel

Chromium issue: 1146146

Picking a color outside of the browser

DevTools now supports picking a color outside of the browser. Previously, you could only pick a color within the browser.

In the Styles pane, click on any color preview to open a color picker. Use the eyedropper to pick color from anywhere.

Picking a color outside of the browser

Chromium issue: 1245191

Improved inline value preview during debugging

The debugger now shows the inline values preview correctly.

In this example, the double function has an input parameter a and a variable x. Put a breakpoint at the return line and run the code. The inline preview shows values a and x correctly. Previously, the debugger did not show the value x in the inline preview.

Improved inline value preview during debugging

Chromium issue: 1316340

Support large blobs for virtual authenticators

The WebAuthn tab now has the new Supports large blob checkbox for virtual authenticators.

This checkbox is disabled by default. You can enable it only for the authenticators with ctap2 protocol that support resident keys.

Support large blobs for virtual authenticators

Chromium issue: 1321803

New keyboard shortcuts in the Sources panel

Two new keyboard shortcuts are now available in the Sources panel:

  • Toggle navigation sidebar (left) with Control / Command + Shift + Y
  • Toggle debugger sidebar (right) with Control / Command + Shift + H
New keyboard shortcuts for the Sources panel

Chromium issues: 1226363

Sourcemaps improvements

Previously, developers experience random failure during:

  • Debugging with Codepen example
  • Identifying source location of performance issues in a Codepen example
  • Missing Component tab when React DevTools is enabled

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

  • Correct mapping between location and offset for inline scripts and source location
  • Use fallback information for frame’s text location
  • Properly resolve relative urls with frame's URL

Chromium issues: 1319828, 1318635, 1305475

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

...

➠ Komplette Nachricht lesen


Zur Startseite

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

What's New In DevTools (Chrome 106)

vom 8886.44 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 8844.08 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 8783.17 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 8612.59 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 104)

vom 8386.61 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 103)

vom 7421.24 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-07-27 - Kernels, Cinnamon, AMDVLK, Firefox 103

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

[Testing Update] 2022-07-13 - Kernels, Pipewire, Xorg-Server, XWayland, Gnome

vom 1736.27 Punkte
Hello community, Another testing branch update with some usual updates for you. You need a small laptop like yesterday with Manjaro pre-installed? Check out the Starlite and get it dispatched the same day of order! Some of our Kernels got updated Pipewire got updated to 0.3.55 Xorg-S

[Testing Update] 2022-07-16 - Kernels, Plasma Mobile Gear, Linux Firmware, Wine

vom 1736.27 Punkte
Hello community, Another testing branch update with some usual updates for you. Checkout the store now for next weekend with free shipping! Some of our Kernels got updated. AMD-PState is still broken in 5.18 Plasma Mobile Gear got renewed to 22.06 Linux-Firmware got updated Wine is

[Unstable Update] 2022-07-13 - Kernels, Pipewire 0.3.55, Plasma 5.25.3, Xorg-Server, Xwayland

vom 1728.02 Punkte
Hello community, Another unstable branch update with some usual updates for you. You need a small laptop like yesterday with Manjaro pre-installed? Check out the Starlite and get it dispatched the same day of order! Some of our Kernels got updated Pipewire got updated to 0.3.55 Xorg-S

Modern web debugging in Chrome DevTools

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

What's New In DevTools (Chrome 89)

vom 652.84 Punkte
What's New In DevTools (Chrome 89) <<../../_shared/devtools-research.md>> Debugging support for Trusted Types violations Breakpoint on Trusted Type violations You can now set breakpoints and catch exceptions on Trusted Type Violati

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