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.
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.
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.
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
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.
The best place to discuss any of the features or changes you see here is the firstname.lastname@example.org 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!
Discover other DevTools features
Below is a list of everything that's been covered in the What's New In DevTools series.
- Visualize performance metrics in the Performance panel.
- Highlight text nodes in the DOM Tree.
- Copy the JS path to a DOM node.
- Audits panel updates, including a new audit that detects JS libraries and new keywords for accessing the Audits panel from the Command Menu.
- Hover over a Live Expression result to highlight a DOM node.
- Store DOM nodes as global variables.
- Initiator and priority information now in HAR imports and exports.
- Access the Command Menu from the Main Menu.
- Picture-in-Picture breakpoints.
- Live Expressions in the Console.
- Highlight DOM nodes during Eager Evaluation.
- Performance panel optimizations.
- More reliable debugging.
- Enable network throttling from the Command Menu.
- Autocomplete Conditional Breakpoints.
- Break on AudioContext events.
- Debug Node.js apps with ndb.
- (Bonus Tip) Measure real world user interactions with the User Timing API.
- Eager Evaluation.
- Argument hints.
- Function autocompletion.
- ES2017 keywords.
- Lighthouse 3.0 in the Audits panel.
- BigInt support.
- Adding property paths to the Watch pane.
- "Show timestamps" moved to Settings.
- Search across all network headers.
- CSS variable value previews.
- Copy as fetch.
- New audits, desktop configuration options, and viewing traces.
- Stop infinite loops.
- User Timing in the Performance tabs.
- Network tab renamed to Page tab.
- Dark theme updates.
- Certificate transparency information in the Security panel.
- Site isolation features in the Performance panel.
- Blackboxing in the Network panel.
- Auto-adjust zooming in Device Mode.
- Pretty-printing in the Preview and Response tabs.
- Previewing HTML content in the Preview tab.
- Local Overrides support for styles inside of HTML.
- (Bonus Tip) Blackbox framework scripts to make Event Listener Breakpoints more useful.
- Local Overrides.
- New accessibility tools.
- The Changes tab.
- New SEO and performance audits.
- Multiple recordings in the Performance panel.
- Reliable code stepping with workers in async code.
- Multi-client remote debugging support.
- Workspaces 2.0.
- 4 new audits.
- Simulate push notifications with custom data.
- Trigger background sync events with custom tags.
- Top-level await in the Console.
- New screenshot workflows.
- CSS Grid highlighting.
- A new Console API for querying objects.
- New Console filters.
- HAR imports in the Network panel.
- Previewable cache resources.
- More predictable cache debugging.
- Block-level code coverage.
- Mobile device throttling simulation.
- View storage usage.
- View when a service worker cached responses.
- Enable the FPS meter from the Command Menu.
- Set mousewheel behavior to zoom or scroll.
- Debugging support for ES6 modules.
- New Audits panel.
- 3rd-Party Badges.
- A new gesture for Continue To Here.
- Step into async.
- More informative object previews in the Console.
- More informative context selection in the Console.
- Real-time updates in the Coverage tab.
- Simpler network throttling options.
- Async stacks on by default.