What's New In DevTools (Chrome 61)
New features and major changes coming to DevTools in Chrome 61 include:
- Mobile device throttling simulation. Set CPU and network throttling simultaneously, to simulate mid-tier or low-end mobile devices.
- Storage usage. View how much storage an origin is using, broken down by technology (IndexedDB, cache, local, session, etc.).
- Cache timestamps. View when a service worker cached a response.
- Enable the FPS Meter from the Command Menu.
- Change mousewheel and trackpad behavior in the Performance panel.
- Debug ES6 modules natively.
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.
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.
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 entire device.
https://airhorner.com is using 66.9KB out of the device'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.
Enable the FPS Meter from the Command Menu
You can now enable 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.
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.
Feedback
The best place to discuss any of the features or changes you see here is the google-chrome-developer-tools@googlegroups.com mailing list. You can also tweet us at @ChromeDevTools if you're short on time.
That's all for what's new in DevTools in Chrome 61. See you in 6 weeks for Chrome 62!