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.
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.
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
workflow for recording page load performance. Instead, click 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.
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.
More accurate promise terminology in the Console
When logging a Promise the Console used to incorrectly describe the state of the Promise
as resolved:
The Console now uses the term fulfilled, which aligns with the Promise spec:
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.
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.
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 rbg(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.
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.
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.
<<../../_shared/devtools-feedback.md>>
<<../../_shared/canary.md>>
<<../../_shared/discover.md>>
This post is also available in:
English