What's New In DevTools (Chrome 110)

Jecelyn Yeen

Clearing Performance Panel on reload

The Performance panel now clears both the screenshot and trace when you click the Start profiling and reload page button.

Previously, the Performance panel displayed a timeline with screenshots from previous recordings. This made it difficult to see when the actual measurement started. The panel now always navigates to the about:blank page first to guarantee that the recording begins with a blank trace. This aligns with the Performance Insights panel which already did the same.

Chromium issues: 1101268, 1382044

Recorder updates

View and highlight the code of your user flow in the Recorder

The Recorder now offers split code view, making it easier to view your user flow code. To access the code view, open a user flow and click Show Code.

The Recorder highlights the corresponding code as you hover over each step on the left, making it easy to track your flow. You can change the code format using the dropdown, which lets you switch between formats such as Nightwatch Test script.

Chromium issue: 1385489

Customize selector types of a recording

You can create recordings that capture only the selector types that matter to you. With the new option to customize selector types when creating a new recording, you can include or exclude selectors such as XPath, ensuring you capture only the selectors you want in your user flows.

Chromium issue: 1384431

Edit user flow while recording

The Recorder now allows editing during recording, providing you with the flexibility to make changes in real-time. You no longer need to end the recording to make adjustments.

Chromium issue: 1381971

Automatic in-place pretty print

The Sources panel now automatically pretty prints minified source files in place. You can click on the pretty print button { } to undo it.

Previously, the Sources panel showed minified content by default. To format the content, you had to click the pretty print button manually. On top of that, the pretty-printed content wasn’t displayed in the same tab, but in another ::formatted tab.

Chromium issues: 1383453, 1382752, 1382397

Better syntax highlight and inline preview for Vue, SCSS and more

The Sources panel enhanced the syntax highlighting for several widely-used file formats, enabling you to read code more easily and recognize its structure, including Vue, JSX, Dart, LESS, SCSS, SASS, and inline CSS.

In addition, DevTools also improved the inline preview for Vue, inline HTML, and TSX. Hover over a variable to preview its value.

Apart from that, DevTools now shows the source map of a stylesheet in the Sources panel. For instance, when you open a SCSS file, you can access the related CSS file by clicking on the sourcemap link.

Chromium issues: 1385374, 1385632, 1385281, 1385269, 1383892, 1361862, 1383451, 1392106, 1149734

Ergonomic and consistent Autocomplete in the Console

DevTools enhances the autocompletion experience by implementing the following changes:

• Tab is always used for autocompletion.
• The behavior of Arrow right and Enter varies based on context.
• The autocompletion experience is consistent across text editors, in the Console, Sources, and Elements panels

For example, here is what happens when you type cons in the Console:

• The Console displays a list of autocomplete suggestions, with a subtle dotted border around the top option indicating that navigation has not yet begun.

• The Console executes the line when you press Enter. Previously, it would automatically complete the line with the top suggestion. To auto-complete, press either Tab or Arrow Right.

• The Console highlights the selected option as you navigate through the suggestion list using the Arrow up and Arrow down shortcuts.

• To auto-complete with the selected option during navigation, use the keyboard keys Tab, Enter, or Arrow Right.

• When editing in the middle of code, for example, when the cursor is between n and s, use Tab for autocompletion, Enter to execute the line, and Arrow Right to move the cursor forward.

Chromium issues: 1399436, 1276960

Miscellaneous highlights

These are some noteworthy fixes in this release:

• A regression issue in DevTools, where it failed to stop at the debugger statement in inline scripts, has been resolved. (1385374)
• A new Console setting that allows you to expand or collapse console.trace() messages by default. Toggle the settings via Settings > Preferences > Expand console.trace() messages by default. (1139616)
• The Snippets pane in the Sources panel supports enhanced autocomplete, similar to the Console. (772949)

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.

What's new in DevTools

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