What's New In DevTools (Chrome 61)
Stay organized with collections
Save and categorize content based on your preferences.
New features and major changes coming to DevTools in Chrome 61 include:
Check out the video version of these release notes below or read on to learn more.
Simulate low-end and mid-tier mobile devices in Device Mode
The Device Mode
Throttling
menu is now exposed by default, and it now lets you simulate a
low-end or mid-tier mobile device with a couple of clicks.
Figure 1
. The
Throttling Menu
Figure 2
. Hover over the
Throttling
menu or open the
Capture Settings
menu to see the
definitions for
Mid-tier mobile
and
Low-end mobile
View storage usage
The new
Usage
section in the
Clear Storage
tab of the
Application
panel shows you how
much storage an
origin
is using, as well as the maximum quota for the origin on this device.
Figure 3
. The
Usage
section shows that
https://airhorner.com
is using 66.9KB out of the
origin's quota of 15214MB
View when a service worker cached responses
The new
Time Cached
column in the
Cache Storage
tab shows you when a service worker cached
responses.
Figure 4
. The
Time Cached
column
Enable the FPS Meter from the Command Menu
You can now enable the
FPS Meter
from the
Command Menu
.
Figure 5
. Enabling the
FPS Meter
from the
Command Menu
Set mousewheel behavior to zoom or scroll with Performance recordings
Open
Settings
and set the new
Flamechart mouse wheel action
setting to change how
mousewheels behave on the
Performance
panel.
For example, when you use a mousewheel on the
Main
section of a recording, or when you swipe
with two fingers on a trackpad, the default behavior is to zoom in or out. When you change the
setting to
Scroll
, this gesture now scrolls up or down.
Figure 6
. The
Flamechart mouse wheel action
setting
Debugging support for ES6 Modules
ES6 Modules are shipping natively in Chrome 61. There's not much going on here with regards to
DevTools, other than that debugging works as you'd expect it to. Try setting some breakpoints in and
stepping through
Paul Irish's ES6-Module-implementation
of
TodoMVC
to see for yourself.
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 2017-07-10 UTC.