What's New in DevTools (Chrome 114) - Seo analyse

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

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

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 > Experiments > 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 > Experiments and open it from the 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:

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