New features and major changes coming to DevTools in Chrome 66 include:
Read on, or watch the video version of the release notes below.
Ignore script in the Network panel
The
Initiator
column in the
Network
panel tells you why a resource was requested. For
example, if JavaScript causes an image to be fetched, the
Initiator
column shows you the line of
JavaScript code that caused the request.
Previously, if your framework wrapped network requests in a wrapper, the
Initiator
column
wouldn't be that helpful. All network requests pointed to the same line of wrapper code.
What you really want in this scenario is to see the application code that causes the request. That's
now possible:
- Hover over the
Initiator
column. The call stack that caused the request appears in a pop-up.
- Right-click the call that you want to hide from the initiator results.
- Select
Add script to ignore list
. The
Initiator
column now hides any calls from the script that
you ignored.
Figure 1
. Ignoring
requests.js
Manage your ignored scripts from the
Ignore List
tab in
Settings
.
See
Ignore a script or pattern of scripts
to learn more about ignoring scripts.
Pretty-printing in the Preview and Response tabs
The
Preview
tab in the
Network
panel now pretty-prints resources by default when it detects
that those resources have been minified.
Figure 2
. The
Preview
tab pretty-printing the contents of
analytics.js
by default
To view the unminified version of a resource, use the
Response
tab. You can also manually
pretty-print resources from the
Response
tab, via the new
Format
button.
Figure 3
. Manually pretty-printing the contents of
analytics.js
via the
Format
button
Previewing HTML content in the Preview tab
Previously, the
Preview
tab in the
Network
panel showed the code of an HTML resource in
certain situations, while rendering a preview of the HTML in others. The
Preview
tab now always
does a basic rendering of the HTML. It's not intended to be a full browser, so it may not display
HTML exactly as you expect. If you want to see the HTML code, click the
Response
tab, or
right-click a resource and select
Open in Sources panel
.
Figure 4
. Previewing HTML in the
Preview
tab
Auto-adjust zooming in Device Mode
When in
Device Mode
, open the
Zoom
dropdown and select
Auto-adjust zoom
to
automatically resize the viewport whenever you change device orientation.
Local Overrides now works with some styles defined in HTML
Back when DevTools launched
Local Overrides
in Chrome 65, one limitation was that it
couldn't track changes to styles defined within HTML. For example, in
Figure 7
there's a style
rule in the
head
of the document that declares
font-weight: bold
for
h1
elements.
Figure 5
. An example of styles defined within HTML
In Chrome 65, if you changed the
font-weight
declaration via the DevTools
Style
pane,
Local
Overrides
wouldn't track the change. In other words, on the next reload, the style would revert
back to
font-weight: bold
. But in Chrome 66, changes like this now persist across page loads.
Bonus tip: Ignore framework scripts to make Event Listener Breakpoints more useful
Back when I created the
Get Started With Debugging JavaScript
video, some viewers commented
that event listener breakpoints aren't useful for apps built on top of frameworks, because the event
listeners are often wrapped in framework code. For example, in
Figure 8
I've set up a
click
breakpoint in DevTools. When I click the button in the demo, DevTools automatically pauses in the
first line of listener code. In this case, it pauses in Vue.js's wrapper code on line 1802, which
isn't that helpful.
Figure 6
. The
click
breakpoint pauses in Vue.js' wrapper code
Since the Vue.js script is in a separate file, I can ignore that script from the
Call Stack
pane in order to make this
click
breakpoint more useful.
Figure 7
. Ignoring the Vue.js script from the
Call Stack
pane
The next time I click the button and trigger the
click
breakpoint, it executes the Vue.js code
without pausing in it, and then pauses on the first line of code in my app's listener, which is
where I really wanted to pause all along.
Figure 8
. The
click
breakpoint now pauses on the app's listener code
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