What's New In DevTools (Chrome 61)

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.

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.

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!

Getting in touch with the Chrome DevTools team

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   More   > 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 127

Chrome 126

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