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
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, test cutting-edge web platform APIs, and find issues on your site before your users do!
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.
Chrome 125
Chrome 124
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