What's New In DevTools (Chrome 61)

Published on

New features and major changes coming to DevTools in Chrome 61 include:

Note: You can check what version of Chrome you're running at chrome://version. Chrome auto-updates to a new major version about every 6 weeks.

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.

The Throttling Menu

Figure 1. The Throttling Menu

Throttling Menu definitions

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.

The Usage section

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.

The Time Cached column

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.

Enabling 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.

The 'Flamechart mouse wheel action' setting

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.

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.