What's new in DevTools (Chrome 58)
Welcome to the first installment of the DevTools release notes! From here on out, the first time you open a new version of Chrome, DevTools opens the What's New drawer with a link to the release notes for that version.
- The Timeline panel has been renamed to the Performance panel.
- The Profiles panel has been renamed to the Memory panel.
- Cookie values are now editable.
- DevTools now automatically pauses before out-of-memory errors.
Double-click on a cell in the Cookies tab to edit that value.
Thanks to kdzwinel for the contribution!
Inspectable and editable CSS variables in the Styles pane
You can now inspect and edit CSS variables in the Styles pane. See CSS Variables Demo to try it out yourself.
When an app allocates a lot of memory in a short amount of time, DevTools now automatically pauses and increases the heap limit. This enables you to inspect the heap, execute commands on the Console to free up memory, and continue debugging the issue. See One Small Step For Chrome, One Giant Heap For V8 for more information.
Breakpoints on canvas creation
You can now create event listener breakpoints that are triggered whenever a new canvas context is created.
Start time stats in the Timing tab
At the top of the Timing tab, you can now see when a request was queued and started.
Server stats in the Timing tab
You can now insert custom server statistics into the Timing tab. See Demo of server timing values for an example.
Thanks to sroussey for the contribution!
The Timeline panel is now the Performance panel
The Timeline panel has been renamed to the Performance panel, to better reflect its purpose.
The Profiles panel is now the Memory panel
The Profiles panel has been renamed to the Memory panel, to better reflect its purpose.
The CPU Profiler is behind a hidden panel
New Console UI
The Console panel and drawer have undergone some UI changes. Some unpopular features have been moved to more hidden locations, and popular features are now more easily accessible.
- Click Console Settings to access settings for customizing the Console's behavior.
- Preserve log is now hidden in Console Settings.
- The Filters button and pane is gone. Use the dropdown menu instead.
- The text box for filtering logs is now always shown. It was previously hidden in the Filters pane.
- The filtering text box automatically accepts RegEx, so the Regex checkbox is gone.
- The Hide violations checkbox is gone. Set the logging level dropdown to Verbose to see violations.
- Unchecking the Show all messages checkbox in the old UI is equivalent to checking the Selected context only checkbox in Console Settings in the new UI.
WebGL event listener breakpoints have moved
The WebGL event listener breakpoints have moved from the WebGL category to the Canvas category. The WebGL category has been removed.