What's New In DevTools (Chrome 110)

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

Clearing Performance Panel on reload.

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.

Code view in the Recorder.

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.

New option to customize selector types.

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.

Editing during user flow recording.

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.

Show a minified file before and after automatic in-place pretty print.

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.

Syntax highlighting in Vue.

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

Inline preview for Vue.

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.

Source map link for SASS.

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. Dotted border around the top autocomplete option.

  • 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. Executes the line on Enter.

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

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

  • 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. Editing in the middle of code.

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) Autocomplete in Snippets.

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