What's New in DevTools (Chrome 114)

Sofia Emelianova

Jecelyn Yeen

WebAssembly debugging support

DevTools enables Settings > Experiments > WebAssembly Debugging: Enable DWARF support by default. For more information, see Debugging WebAssembly with modern tools.

This experiment lets you pause execution and debug C and C++ code in Wasm apps, with all the debugging information available to you:

• Your original source code, mapped using DWARF debugging information.
• Understandable function names in call stack.
• Breakpoints support, and more.

To test Wasm debugging, install the C/C++ DevTools Support (DWARF) extension and step through the code in the Mandelbrot demo.

Chromium issue: 1414289.

Improved stepping behavior in Wasm apps

Step over in your original code now avoids pausing in disassembly (.wasm file). Previously, it would pause there.

However, stepping ends when it lands outside of the function it started in, for example, after returning from the function.

This behavior is enabled by default in Settings > Preferences > Sources.

Chromium issue: 1418938.

Debug Autofill using the Elements panel and Issues tab

Chrome Autofill fills in forms automatically with saved information, like your addresses or payment information. To let you easily debug Autofill-related issues, the Elements panel can now highlight them with red curly underlines.

To check out this feature, enable Settings > Experiments > Highlights a violating node or attribute in the Elements panel DOM tree and inspect this demo page.

Hover over a highlighted issue in the DOM tree and click View issue to open the Issues tab that lists all detected issues and provides clues on what went wrong.

Chromium issue: 1399414.

Assertions in Recorder

The Recorder panel now lets you add assertions right during recording, with all the runtime data available to you.

To add an assertion, start a new recording, interact with your page, and click Add assertion. The Recorder inserts a step with the waitForElement type that you can customize on the fly. Watch the video to see assertions in action on the coffee cart demo.

This video shows you how to assert:

• HTML attributes, for example, an element's class.
• JavaScript properties in JSON, for example, .innerText.

You can also configure steps to assert, for example, conditional statements in JavaScript, number of node's children (count), element visibility, and more. For more information, see Configure steps.

Additionally, the Recorder now remembers your preferred script format in the side-by-side code view and right-click step menu.

Chromium issue: 1423624.

Lighthouse 10.1.1

The Lighthouse panel now runs Lighthouse 10.1.1, with a notable change introduced in 10.1.0. All audits that deal with URLs are now grouped by entity and aggregate numerical statistics such as size or duration. Popular third parties are also tagged with their category so it's easier to identify their purpose on the page.

To learn the basics of using the Lighthouse panel in DevTools, see Lighthouse: Optimize website speed.

Chromium issue: 772558.

Performance enhancements

performance.mark() shows timing on hover in Performance > Timings

The performance.mark() method now shows its timing when you hover over the corresponding mark in Performance > Timings. The timing here is a timestamp relative to the previous navigation event.

Chromium issue: 1426762.

profile() command populates Performance > Main

The profile() and profileEnd() commands in the Console now start and stop CPU profiling in the Main thread of the Performance panel.

Chromium issue: 1429191.

Warning for slow user interactions

User interactions longer than 200 milliseconds get an Interaction to Next Paint (INP) warning in the Performance > Summary tab.

Additionally, the ID of the interaction has been moved from the tooltip to Summary.

Chromium issues: 1432512, 1432509.

The Web Vitals track moved

The Performance panel has removed the following tracks:

• The Web Vitals track. Instead, see the relevant timings in the Timings track on hover.
• The Long Tasks subtrack. You can already find such tasks in the Main track shaded in red and with a red triangle.

Both the Web Vitals and Long Tasks tracks contained information duplicated elsewhere. They were also non-interactive compared to their more fully featured alternatives which provide more detailed information when clicked.

Additionally, the Experiences track was renamed to Layout Shifts to more accurately reflect its usage.

Learn more about Web Vitals.

JavaScript Profiler deprecation: Phase three

As early as Chrome 58, the DevTools team planned to eventually deprecate the JavaScript Profiler and have Node.js and Deno developers use the Performance panel for profiling JavaScript CPU performance.

DevTools version 114 starts phase three of the four-phase JavaScript Profiler deprecation. During this phase, the JavaScript Profiler panel is removed from DevTools but you can still temporarily enable it via Settings > Experiments and open it from the three-dot menu.

To profile CPU performance, use the Performance panel.

Chromium issue: 1428026.

Miscellaneous highlights

These are some noteworthy fixes in this release:

• The Color Picker now detects HWB values that are out of gamut when clipped (1429271).
• The Sources panel:
  • Enabled JSON syntax highlighting for source maps (1385374).
  • Stopped showing "Source map detected" messages when you manually disable source maps (1423718).
• The Console now lets you evaluate incomplete JavaScript expressions with Ctrl + Enter and outputs syntax errors (1314700).
• The Breakpoint editing dialog now has a close button. Previously, you had to press Enter or unfocus the dialog (1412980).

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.

• Submit feedback and feature requests to us at crbug.com.
• Report a DevTools issue using the more_vert More options > Help > Report a DevTools issue in DevTools.
• Tweet at @ChromeDevTools.
• Leave comments on 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.