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.

Highlights

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

New features

Editable cookies

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.

Out-of-memory breakpoints

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.

Changes

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

Now that the Profiles panel is called the Memory panel, it doesn't really make sense to have the CPU profiler on that panel anymore. Furthermore, the long-term goal is to get all users profiling from the Performance panel. In the meantime, you can still access the old CPU profiler from Settings > More Tools > JavaScript Profiler.

See Chrome DevTools: JavaScript CPU Profiling in Chrome 58 to learn how to profile CPU in the Performance 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.