What's New In DevTools (Chrome 77)
Stay organized with collections
Save and categorize content based on your preferences.
Copy element's styles
Right-click a node in the
DOM Tree
to copy that DOM node's CSS to your clipboard.
Figure 1. Copy element styles.
Thanks
Adam Argyle
and
VisBug
for the
inspiration
.
Visualize layout shifts
Supposing you're reading a news article on your favorite website. As you're reading the page, you
keep losing your place because the content is jumping around. This problem is called layout
shifting. It usually happens when images and ads finish loading. The page hasn't reserved any space
for the images and ads, so the browser has to shift all the other content down to make room for
them. The solution is to use
placeholders
.
DevTools can now help you detect layout shifting:
- Open the
Command Menu
.
- Start typing
Rendering
.
- Run the
Show Rendering
command.
- Enable the
Layout Shift Regions
checkbox. As you interact with a page, layout shifts are
highlighted blue.
Figure 2. A layout shift.
Chromium issue #961846
Lighthouse 5.1 in the Audits panel
The Audits panel is now running
Lighthouse 5.1
. New audits include:
- Provides a valid
apple-touch-icon
. Checks that a PWA can be added to an iOS homescreen.
- Keep request counts and file sizes low
. Reports the total number of network requests and
file sizes for various categories, such as documents, scripts, stylesheets, images, and so on.
- Maximum Potential First Input Delay
. Measures the maximum potential time between a user's
first page interaction and the browser's response to that interaction. Note that this metric
replaces the Estimated Input Latency metric. Maximum Potential First Input Delay does not factor
into your Performance category score.
Figure 3. The new Audits panel UI.
The Node and CLI versions of Lighthouse 5.1 have 3 new major features worth checking out:
- Performance Budgets
. Prevent your site from regressing over time by specifying request
counts and file sizes that pages should not exceed.
- Plugins
. Extend Lighthouse with your own custom audits.
- Stack Packs
. Add audits tailored to specific technology stacks. The WordPress Stack Pack
shipped first. React and AMP Stack Packs are in development.
OS theme syncing
If you're using the dark theme of your OS, DevTools now switches to its own
dark theme
automatically.
Keyboard shortcut for opening the Breakpoint Editor
Press
Control
+
Alt
+
B
or
Command
+
Option
+
B
(Mac) when focused in the Sources panel's Editor
to open the
Breakpoint Editor
. Use the Breakpoint Editor to create
Logpoints
and
Conditional Breakpoints
.
Figure 4. The
Breakpoint Editor
.
Prefetch cache in Network panel
The
Size
column of the Network panel now says
(prefetch cache)
when a resource was loaded from
the prefetch cache.
Prefetch
is a new-ish web platform feature for speeding up subsequent page
loads.
Can I use...
reports that it's supported in 83.33% of global browsers as of July 2019.
Figure 5. The
Size
column shows that
prefetch2.html
and
prefetch2.css
came from
(prefetch cache)
.
See
Prefetch Demo
to try it out.
Chromium issue #935267
Private properties when viewing objects
The Console now shows
private class fields
in its object previews.
Figure 6. The old version of Chrome on the left does not show the
#color
field when inspecting the
object, whereas the new version on the right does.
Notifications and push messages in the Application panel
The Background Services section of the Application panel now supports Push Messages and
Notifications. Push Messages occur when a server sends information to a service worker.
Notifications occur when a service worker or page script shows information to the user.
As with the
Background Fetch and Background Sync features from Chrome 76
, once you start
recording, Push Messages and Notifications on this page are recorded for 3 days, even when the page
is closed, and even when Chrome is closed.
Figure 7. The new Push Messages and Notifications panes in the Application panel.
Chromium issue #927726
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
Except as otherwise noted, the content of this page is licensed under the
Creative Commons Attribution 4.0 License
, and code samples are licensed under the
Apache 2.0 License
. For details, see the
Google Developers Site Policies
. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2019-07-22 UTC.