What's New In DevTools (Chrome 78)
Stay organized with collections
Save and categorize content based on your preferences.
Multi-client support in the Audits panel
You can now use the
Audits
panel in combination with other DevTools features like
Request
Blocking
and
Local Overrides
.
For example, suppose that your
Audits
panel report says that your page's performance score is 70
and one of your biggest performance opportunities is
eliminating render-blocking resources
.
Figure 1. The initial
Performance
score.
Figure 2. The initial report says that 3 render-blocking scripts are an issue.
Now that the
Audits
panel can be used in combination with request blocking, you can quickly
measure how much the render-blocking scripts affect your load performance by first
blocking the
requests for the render-blocking scripts
:
Figure 3. Using the
Request Blocking
tab to block the problematic scripts.
And then auditing the page again:
Figure 4. The
Performance
score improved to 97 after blocking the problematic scripts.
You could alternatively use
Local Overrides
to add
async
attributes to each of the script
tags, but "we'll leave that as an exercise for the reader." Go to
Multi-client demo
to try it
out. Or check out
this tweet
for a video demonstration.
Chromium issue #991906
Payment Handler debugging
The
Background Services
section of the
Application
panel now supports
Payment Handler
events.
- Go the the
Application
panel.
- Open the
Payment Handler
pane.
Click
Record
. DevTools records Payment Handler events for 3 days, even when DevTools is
closed.
Figure 5. Recording Payment Handler events.
Enable
Show events from other domains
if your Payment Handler events occur on a different
origin.
After triggering a Payment Handler event, click the event's row to learn more about the event.
Figure 6. Viewing a Payment Handler event.
Chromium issue #980291
Lighthouse 5.2 in the Audits panel
The
Audits
panel is now running
Lighthouse 5.2
. The new
Third-Party Usage
diagnostic
audit tells you how much third-party code was requested and how long that third-party code blocked
the main thread while the page loaded. See
Optimize your third-party resources
to learn more
about how third-party code can degrade load performance.
Figure 7. The
Third-party usage
audit.
Chromium issue #772558
Largest Contentful Paint in the Performance panel
When
analyzing load performance in the
Performance
panel
, the
Timings
section now
includes a marker for
Largest Contentful Paint
(LCP). LCP reports the render time of the
largest content element visible in the viewport.
Figure 8. The
LCP
marker in the
Timings
section.
To highlight the DOM node associated with LCP:
- Click the
LCP
marker in the
Timings
section.
Hover over the
Related Node
in the
Summary
tab to highlight the node in the viewport.
Figure 9. The
Related Node
section of the
Summary
tab.
Click the
Related Node
to select it in the
DOM Tree
.
File DevTools issues from the Main Menu
If you ever encounter a bug in DevTools and want to file an issue, or if you ever get an idea on how
to improve DevTools and want to request a new feature, go to
Main Menu
>
Help
>
Report a
DevTools issue
to create an issue in the DevTools engineering team's tracker. Providing a
minimal, reproducible example
on
Glitch
dramatically increases the team's ability to fix
your bug or implement your feature request!
Help > Report a DevTools issue." width="800" height="604">
Figure 10.
Main Menu
>
Help
>
Report a DevTools issue
.
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-09-03 UTC.