Google is committed to advancing racial equity for Black communities. See how.

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.

You can also edit styles added in JavaScript using Constructable Stylesheets now. Constructable Stylesheets are a new way to create and distribute reusable styles when using Shadow DOM.

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

The Lighthouse panel is now running Lighthouse 6. Check out What's New in Lighthouse 6.0 for a summary of all the major changes, or the v6.0.0 release notes for a full list of all changes.

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.

New performance metrics in Lighthouse 6.0

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

Support for new JavaScript features

DevTools now has better support for some of the latest JavaScript language features:

  • Optional chaining syntax autocompletion - property auto-completion in the Console now supports optional chaining syntax, e.g. name?. now works in addition to name. and name[.
  • 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.

Chromium issues #1083214, #1073903, #1083797

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)

App shortcut warnings

Chromium issue #955497

Service worker respondWith events in the Timing tab

The Timing tab of the Network panel now includes service worker respondWith events. respondWith is the time immediately before the service worker fetch event handler runs to the time when the fetch handler's respondWith promise is settled.

service worker `respondWith`

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.

Bytecode offsets

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.

Selected context only

Chromium issue #1055875

Performance panel updates

JavaScript compilation cache information in Performance panel

JavaScript compilation cache information is now always displayed in the Summary tab of the Performance panel. Previously, DevTools wouldn’t show anything related to code caching if code caching didn’t happen.

JavaScript compilation cache information

Chromium issue #912581

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.

Align navigation timing in Performance panel

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

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.

Breakpoints

Chromium issue #1041830

Feedback

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.

To discuss the new features and changes in this post, or anything else related to DevTools:

Consider Canary

If you're on Mac or Windows, consider using Chrome Canary as your default development browser. Canary gives you access to the latest DevTools features.

Discover DevTools features

Below is a list of everything that's been covered in the What's New In DevTools series.

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

Subscribe to our RSS or Atom feed and get the latest updates in your favorite feed reader!