Chrome Dev Summit 2020 is back & going virtual on December 9-10. Learn more

What's New In DevTools (Chrome 84)

Fix site issues with the new Issues tab

The new Issues tab in the Drawer aims to help reduce the notification fatigue and clutter of the Console. Currently, the Console is the central place for website developers, libraries, frameworks, and Chrome itself to log messages, warnings, and errors. The Issues tab presents warnings from the browser in a structured, aggregated, and actionable way, links to affected resources within DevTools, and provides guidance on how to fix the issues. Over time, more and more of Chrome's warnings will be surfaced in the Issues tab rather than the Console, which should help reduce the Console's clutter.

Check out Find And Fix Problems With The Chrome DevTools Issues Tab to get started.

The Issues tab.

Chromium Bug: #1068116

View accessibility information in the Inspect Mode tooltip

The Inspect Mode tooltip now indicates whether the element has an accessible name and role and is keyboard-focusable.

The Inspect Mode tooltip with accessibility information.

Chromium Bug: #1040025

Performance panel updates

View Total Blocking Time (TBT) information in the footer

After recording your load performance, the Performance panel now shows Total Blocking Time (TBT) information in the footer. TBT is a load performance metric that helps quantify how long it takes a page to become usable. It essentially measures how long a page appears to be usable (because its content has been rendered to the screen) but isn't actually usable because JavaScript is blocking the main thread and therefore the page can't respond to user input. TBT is the main lab metric for approximating First Input Delay, which is one of Google's new Core Web Vitals.

To get Total Blocking Time information, do not use the Reload Page Reload Page workflow for recording page load performance. Instead, click Record Record, manually reload the page, wait for the page to load, and then stop recording. If you see Total Blocking Time: Unavailable it means that DevTools did not get the information it needs from Chrome's internal profiling data.

Total Blocking Time information in the footer of a Performance panel recording.

Chromium Bug: #1054381

Layout Shift events in the new Experience section

The new Experience section of the Performance panel can help you detect layout shifts. Cumulative Layout Shift (CLS) is a metric that can help you quantify unwanted visual instability and is one of Google's new Core Web Vitals.

Click a Layout Shift event to see the details of the layout shift in the Summary tab. Hover over the Moved from and Moved to fields to visualize where the layout shift occurred.

The details of a layout shift.

More accurate promise terminology in the Console

When logging a Promise the Console used to incorrectly describe the state of the Promise as resolved:

An example of the Console using the old "resolved" terminology.

The Console now uses the term fulfilled, which aligns with the Promise spec:

An example of the Console using the new "fulfilled" terminology.

V8 Bug: #6751

Styles pane updates

Support for the revert keyword

The Styles pane's autocomplete UI now detects the revert CSS keyword, which reverts the cascaded value of a property to what the value would have been if no changes had been made to the element's styling.

Setting the value of a property to revert.

Chromium Bug: #1075437

Image previews

Hover over a background-image value in the Styles pane to see a preview of the image in a tooltip.

Hovering over a background-image value.

Chromium Bug: #1040019

Color Picker now uses space-separated functional color notation

CSS Color Module Level 4 specifies that color functions like rgb() should support space-separated arguments. For example, rgb(0, 0, 0) is equivalent to rgb(0 0 0).

When you choose colors with the Color Picker or alternate between color representations in the Styles pane by holding Shift and then clicking the color value, you'll now see the space-separated argument syntax.

Using space-separated arguments in the Styles pane.

You'll also see the syntax in the Computed pane and the Inspect Mode tooltip.

DevTools is using the new syntax because upcoming CSS features like color() do not support the deprecated comma-separated argument syntax.

The space-separated argument syntax has been supported in most browsers for a while. See Can I use Space-separated functional color notations?

Chromium Bug: #1072952

Deprecation of the Properties pane in the Elements panel

The Properties pane in the Elements panel has been deprecated. Run console.dir($0) in the Console instead.

The deprecated Properties pane.

References:

App shortcuts support in the Manifest pane

App shortcuts help users quickly start common or recommended tasks within a web app. The app shortcuts menu is shown only for Progressive Web Apps that are installed on the user's desktop or mobile device.

Check out Get things done quickly with app shortcuts to learn more.

App shortcuts in the Manifest pane.

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

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