What's New in DevTools (Chrome 114)

Sofia Emelianova
Sofia Emelianova

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 found in Preferences then 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.

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.

Before and after moving the Web Vitals to the Timings track.

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

JavaScript profiler checkbox in Settings then 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 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

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