What's New In DevTools (Chrome 109)

Jecelyn Yeen

Recorder: Copy as options for steps, in-page replay, step’s context menu

Open an existing user flow in the Recorder. Previously, when you replayed the user flow, DevTools would always start the replay by navigating to or reloading the page.

With the latest updates, the Recorder shows the navigation step separately. You can right-click and remove it to perform in-page replay!

Apart from that, you can right-click a step and copy it to the clipboard in the *Recorder panel instead of exporting the whole user flow. It works with extensions too. For example, try to copy a step as a Nightwatch Test script. With this feature, you can update any existing script with ease.

Previously, you could access the step menu only through the 3-dot button. You can now right-click anywhere on the step to access the menu.

Chromium issues: 1322313, 1351649, 1322313, 1339767

Show actual function names in performance’s recordings

The Performance panel now shows the actual function names and their sources in the trace if there’s a source map.

In this example, a source file is minified during production. For example, the sayHi function is minified as n, and the takeABreak function is minified as o in this demo.

Previously, when you recorded a trace in the Performance panel, the trace only showed you the minified function names. This made it harder to debug.

With the latest changes, DevTools now reads the source map and shows the actual function names and source location.

Chromium issues: 1364601, 1364601

New keyboard shortcuts in the Console & Sources panel

You can switch between tabs in the Sources panel using: On MacOS, Function + Command + Arrow up and down On Windows and Linux, Control + Page up or down

Moreover, you can navigate the autocomplete suggestions with Ctrl + N and Ctrl + P on MacOS, similar to Emacs. For example, you can type window. in the Console and use these shortcuts to navigate.

On top of that, DevTools now accepts Arrow Right for autocompletion only at the end of line. For example, an autocomplete dialog shows when you are editing something in the middle of the code. When you press the Arrow Right key, most likely, you want to set the cursor to the next position instead of autocomplete. This UX change better aligns with your authoring workflow.

Chromium issue: 1167965, 1172535, 1371585. 1369503

Improved JavaScript debugging

These are some JavaScript debugging improvements in this release:

• new.target is a meta-property that lets you detect whether a function or constructor was called using the new operator. You can now log new.target in the Console to check its value during debugging. Previously, it would return errors when you entered new.target.
• A WeakRef object lets you hold a weak reference to another object, without preventing that object from getting garbage-collected. DevTools now shows an inline preview for the value and evaluates the weak reference directly in the console during debugging. Previously, you had to explicitly call “deref” on them to resolve it.
• Fixed inline preview for shadowed variable. Previously, the display value was incorrect.
• Deobfuscate variable names in Generator and async functions in the Scope pane in the Sources panel.

Chromium issues: 1267690, 1246863 1371322, 1311637

Miscellaneous highlights

These are some noteworthy fixes in this release:

• Support more hints for inactive CSS properties in the Styles pane - inline height and width, flex and grid properties. (1373597, 1178508, 1178508,1178508)
• Fixed syntax highlighting. It was not working properly since the recent code editor upgrade in DevTools. (1290182)
• Capture input change events properly after on blur event in the Recorder. (1378488)
• Update Puppeteer replay script on export for better debugging experience in the Recorder. (1351649)
• Support record and replay in the Recorder for remote debugging. (1185727)
• Fixed parsing of special CSS variable names in var(). Previously, DevTools didn't support parsing variables with escaped characters like var(--fo\ o). , (1378992)

[Experimental] Enhanced UX in managing breakpoints

The current Breakpoints pane provides little visual aid in overseeing all breakpoints. On top of that, frequently used actions are hidden behind the context menu.

This experimental UX redesign brings structure to the Breakpoints pane and allows developers to have quick access to commonly used features such as editing and removing breakpoints.

These are some highlights:

• Both pause options are in the Breakpoints pane. They have explicit text labels that make the options self-explanatory.
• Breakpoints are grouped by file, ordered by line or column number. You can collapse and expand them.**
• New options to remove and edit a breakpoint when hovering over the breakpoint or a file name in the Breakpoint pane.

Read the full changes in our RFC (closed) and leave your feedback here.

Chromium issues: 1346231, 1324904

[Experimental] Automatic in-place pretty print

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

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

Chromium issue: 1164184

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, let you test cutting-edge web platform APIs, and help you find issues on your site before your users do!

Get in touch with the Chrome DevTools team

Use the following options to discuss the new features, updates, or anything else related to DevTools.

• Submit feedback and feature requests to us at crbug.com.
• Report a DevTools issue using the more_vert More options > Help > Report a DevTools issue in DevTools.
• Tweet at @ChromeDevTools.
• Leave comments on 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.