What's New In DevTools (Chrome 85)
Style editing for CSS-in-JS frameworks #
The Styles pane now has better support for editing styles that were created with the CSS Object Model (CSSOM) APIs. Many CSS-in-JS frameworks and libraries use the CSSOM APIs under the hood to construct styles.
For example, the
h1 styles added with
CSSStyleSheet (CSSOM APIs) are not editable previously. There are editable now in the Styles pane:
Chromium issue #946975
Lighthouse 6 in the Lighthouse panel #
Lighthouse 6.0 introduces three new metrics to the report: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and Total Blocking Time (TBT). LCP and CLS are 2 of Google's new Core Web Vitals, and TBT is a lab measurement proxy for another Core Web Vital, First Input Delay.
The performance score formula has also been reweighted to better reflect the users' loading experience.
Chromium issue #772558
First Meaningful Paint (FMP) deprecation #
First Meaningful Paint (FMP) is deprecated in Lighthouse 6.0. It has also been removed from the Performance panel. Largest Contentful Paint is the recommended replacement for FMP. See First Meaningful Paint for an explanation of why it was deprecated.
Chromium issue #1096008
- Optional chaining syntax autocompletion - property auto-completion in the Console now supports optional chaining syntax, e.g.
name?.now works in addition to
- Syntax highlighting for private fields - private class fields are now properly syntax-highlighted and pretty-printed in the Sources panel.
- Syntax highlighting for Nullish coalescing operator - DevTools now properly pretty-prints the nullish coalescing operator in the Sources panel.
New app shortcut warnings in the Manifest pane #
App shortcuts help users quickly start common or recommended tasks within a web app.
The Manifest pane now shows warnings if:
- the app shortcut icons are smaller than 96x96 pixels
- the app shortcut icons and manifest icons are not square (as they will be ignored)
Chromium issue #955497
respondWith events in the Timing tab #
The Timing tab of the Network panel now includes service worker
respondWith is the time immediately before the service worker
fetch event handler runs to the time when the
respondWith promise is settled.
Chromium issue #1066579
Consistent display of the Computed pane #
The Computed pane in the Elements panel now displays consistently as a pane across all viewport sizes. Previously the Computed pane would merge inside the Styles pane when the width of the DevTools' viewport was narrow.
Chromium issue #1073899
Bytecode offsets for WebAssembly files #
DevTools now uses bytecode offsets for displaying line numbers of Wasm disassembly. This makes it clearer that you're looking at binary data, and is more consistent with how the Wasm runtime references locations.
Chromium issue #1071432
Line-wise copy and cut in Sources Panel #
When performing copy or cut with no selection in the Sources panel editor, DevTools will copy or cut the current line content. For example, in the video below, the cursor is at the end of line 1. After pressing the cut keyboard shortcut, the entire line is copied to the clipboard and deleted.
Chromium issue #800028
Console Settings updates #
Ungroup same console messages #
The Group similar toggle in Console Settings now applies to duplicate messages. Previously it just applied to similar messages.
For example, previously, DevTools did not ungroup the messages
hello even though Group similar is unchecked. Now, the
hello messages are ungrouped:
Chromium issue #1082963
Persisting Selected context only settings #
The Selected context only settings in Console Settings is now persisted. Previously the settings were reset every time you closed and reopened DevTools. This change makes the setting behavior consistent with other Console Settings options.
Chromium issue #1055875
Performance panel updates #
Chromium issue #912581
Navigation timing alignment in the Performance panel #
The Performance panel used to show times in the rulers based on when the recording started. This has now changed for recordings where the user navigates, where DevTools now shows ruler times relative to the navigation instead.
We've also updated times for
DOMContentLoaded, First Paint, First Contentful Paint, and Largest Contentful Paint events to be relative to the start of the navigation, which means they match the timings reported by
Chromium issue #974550
New icons for breakpoints, conditional breakpoints, and logpoints #
The Sources panel has new designs for breakpoints, conditional breakpoints, and logpoints. Breakpoints get a refreshed flag design with brighter and friendlier colors. Icons are added to differentiate conditional breakpoints and logpoints.
Chromium issue #1041830