What's New In DevTools (Chrome 103)

Jecelyn Yeen

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

Source maps 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 source maps 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, let you test cutting-edge web platform APIs, and help you find issues on your site before your users do!

Get in touch with the Chrome DevTools team

Use the following options to discuss the new features, updates, or anything else related to DevTools.

What's new in DevTools

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