What's New In DevTools (Chrome 74)
Stay organized with collections
Save and categorize content based on your preferences.
Welcome back! Here's what's new.
Video version of this page
Highlight all nodes affected by CSS property
Hover over a CSS property that affects a node's box model, such as
padding
or
margin
, to
highlight all nodes affected by that declaration.
Figure 1
. Hovering over a
margin
property highlights the margins of all nodes affected by that
declaration
Lighthouse v4 in the Audits panel
The new
Tap targets are not sized appropriately
audit checks that interactive elements like
buttons and links are appropriately large and spaced apart on mobile devices.
The PWA category of a report now uses a badge scoring system.
Figure 3
. The new badge scoring system for the PWA category
WebSocket binary message viewer
To view the contents of a binary WebSocket message:
Open the
Network
panel. See
Inspect Network Activity
to learn the basics of analyzing
network activity.
Figure 4
. The Network panel
Click
WS
to filter out all resources that aren't WebSocket connections.
Figure 5
. After clicking WS only WebSockety connections are shown
Click the
Name
of a WebSocket connection to inspect it.
Figure 6
. Inspecting a WebSocket connection
Click the
Messages
tab.
Figure 7
. The Messages tab
Click one of the
Binary Message
entries to inspect it.
Figure 8
. Inspecting a binary message
Use the dropdown menu at the bottom of the viewer to convert the message into Base64 or UTF-8. Click
Copy to clipboard
to copy the
binary message to your clipboard.
Figure 9
. Viewing a binary message as Base64
Capture area screenshot in the Command Menu
Area screenshots let you capture a screenshot of a portion of the viewport. This feature has been
around for a while, but the workflow for accessing it was quite hidden. Area screenshots are now
available from the Command Menu.
Focus DevTools and then press
Control
+
Shift
+
P
or
Command
+
Shift
+
P
(Mac) to open the Command Menu.
Figure 10
. The Command Menu
Start typing
area
, select
Capture area screenshots
, then press
Enter
.
Drag your mouse over the section of the viewport that you want to screenshot.
Figure 11
. Selecting the portion of viewport to screenshot
Service worker filters in the Network panel
Type
is:service-worker-initiated
or
is:service-worker-intercepted
in the Network panel filter
text box to view requests that were caused (
initiated
) or potentially modified (
intercepted
) by
a service worker.
Figure 12
. Filtering by
is:service-worker-initiated
Figure 13
. Filtering by
is:service-worker-intercepted
See
Filter resources
for more on filtering network logs.
Performance panel updates
Performance recordings now mark up long tasks and First Paint.
Check out
Do less main thread work
for an example of using the Performance panel to analyze
page load performance.
Long tasks in Performance recordings
Performance recordings now show long
tasks
.
Figure 14
. Hovering over a long task in a Performance recording
First Paint in the Timings section
The
Timings section
of a Performance recording now marks First Paint.
Figure 15
. First Paint in the Timings section
New DOM tutorial
Check out
Get Started With Viewing And Changing The DOM
for a hands-on tour of DOM-related
features.
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-03-07 UTC.