WebAssembly debugging, Autofill debugging, better assertions in Recorder, Performance panel enhancements, Lighthouse 10.1.1, and more.

What's New in DevTools (Chrome 114)

Published on

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

There is no 'What's new in DevTools' video for this release, but you can watch this quick recap of the recent features.

WebAssembly debugging support

DevTools enables Settings. Settings > Experiments > Checkbox. 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.
A Wasm application paused in the Debugger.

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. 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. Settings > Preferences > Sources.

The new setting in 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. Settings > Experiments > Checkbox. Highlights a violating node or attribute in the Elements panel DOM tree and inspect this demo page.

Autofill issues highlighted in the Elements panel and reported by the Issues panel.

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.

Grouped audits by entity.

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.

The pop-up with timing on hover in the Timings section.

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.

The console() command creates a profile in 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.

The INP warning.

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

Chromium issues: 1432512, 1432509.

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. Settings > Experiments and open it from the Three-dot menu. three-dot menu.

JavaScript profiler checkbox in Settings > Experiments.

To profile CPU performance, use the Performance panel.

Chromium issue: 1428026.

Miscellaneous highlights

These are some noteworthy fixes in this release:

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

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

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

Published on Improve article


Get ready for Google I/O


Chrome 114 beta

This site uses cookies to deliver and enhance the quality of its services and to analyze traffic. If you agree, cookies are also used to serve advertising and to personalize the content and advertisements that you see. Learn more about our use of cookies.