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 here, you can continue the replay, execute a step, or cancel the replay.
With this feature, you can fully visualize and debug your user flow with ease.
See Recorder features reference for more information.
Chromium issue: 1257499
Support mouse over event in the Recorder panel
The Recorder now supports adding a mouse over (hover) step manually in a recording.
This demo shows a pop up menu on hover. Try to record a user flow and click a menu item.
If you replay the user flow now, it will fail because the Recorder doesn’t capture mouse over events automatically during recording. To resolve this, add a step manually to hover over the selector before clicking the menu item.
Chromium issue: 1257499
Largest Contentful Paint (LCP) in the Performance insights panel
LCP is an important, user-centric metric for measuring perceived load speed. You can now find out the critical paths and root causes of a Largest Contentful Paint (LCP).
In a performance recording, click on the LCP badge in the Timeline. In the Details pane, you can view the LCP score, learn how to fix resources that slow down the LCP and see the critical path for the LCP resource.
See Performance Insights to learn how to get actionable insights and improve your website’s performance with the panel.
Chromium issue: 1326481
Identify flashes of text (FOIT, FOUT) as potential root causes for layout shifts
The Performance insights panel now detects flash of invisible text (FOIT) and flash of unstyled text (FOUT) as potential root causes for layout shifts.
To view the potential root causes of a layout shift, click on a screenshot in the Layout shifts track.
See Optimize WebFont loading and rendering to learn the technique to prevent layout shifts.
Chromium issues: 1334628, 1328873
Protocol handlers in the Manifest pane
You can now use DevTools to test the URL protocol handler registration for Progressive Web Apps (PWA).
The URL protocol handler registration lets installed PWAs handle links that use a specific protocol (e.g. magnet, web+example) for a more integrated experience.
Navigate to the Protocol Handlers section via the Application > Manifest pane. You can view and test all the available protocols here.
For example, install this demo PWA. In the Protocol Handlers section, type “americano” and click Test protocol to open the coffee page in the PWA.
Chromium issues: 1300613
Top layer badge in the Elements panel
Use the top layer badge to understand the concept of the top layer and visualize how the top layer content changes.
The <dialog> element has recently become stable across browsers. When you open a dialog, it is put into a top layer. Top level content renders on top of all the other content.
In this demo, click Open dialog.
To help visualize the top layer elements, DevTools adds a top layer container (#top-layer) to the DOM tree. It resides after the closing </html> tag.
To jump from the top layer container element to the top layer tree element, click the reveal button next to the element or its backdrop in the top layer container.
Next to the top layer tree element (for example, the dialog element), click the top-layer badge to jump to the top layer container.
Chromium issue: 1313690
Attach Wasm debugging information at runtime
You can now attach DWARF debugging information for wasm during runtime. Previously, the Sources panel only supported attaching source maps to JavaScript and Wasm files.
Open a Wasm file in the Sources panel. Right-click in the editor and select Add DWARF debugging info… to attach debugging information on demand.
Chromium issue: 1341255
Support live edit during debugging
You can now edit the top-most function on the stack without restarting the debugger.
In Chrome 104, DevTools brings back the restart frame feature. However, you weren't able to edit the function you are currently paused in. It is common for developers to break in a function and then edit that function while paused.
With this update, the debugger automatically restarts the function with the following restrictions:
- Only the top-most function can be edited while paused
- No recursive call on the same function further down the stack
Chromium issue: 1334484
View and edit @scope at rules in the Styles pane
You can now view and edit the CSS @scope at-rules in the Styles pane.
The @scope at rules is part of the CSS Cascading and Inheritance Level 6 specification. These rules allow developers to scope style rules in CSS.
Open this demo page and inspect the hyperlink within the <div class=”dark-theme”> element. In the Styles pane, view the @scope at-rules. Click the rule declaration to edit it.