![Kayce Basques](https://web.dev/images/authors/kaycebasques.jpg) Kayce Basques [X](https://twitter.com/kaycebasques) [GitHub](https://github.com/kaycebasques)
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. ![Editing a cookie.](https://developer.chrome.com/static/blog/devtools-release-notes/image/editing-cookie-0beae3c45d5f3.png) **Figure 1**. Editing a cookie Thanks to [kdzwinel](https://twitter.com/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](https://googlechrome.github.io/devtools-samples/author/css-vars) 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](https://v8.dev/blog/heap-size-limit) for more information. ![Paused on an out-of-memory breakpoint](https://developer.chrome.com/static/blog/devtools-release-notes/image/paused-an-of-memory-bre-f5547b704974a.png) **Figure 2**. Paused on an out-of-memory breakpoint ### Breakpoints on canvas creation You can now create [event listener breakpoints](https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints#event-listeners) that are triggered whenever a new canvas context is created. ![Canvas creation breakpoints via the Create canvas context checkbox in the Event Listener Breakpoints pane](https://developer.chrome.com/static/blog/devtools-release-notes/image/canvas-creation-breakpoin-49989846bc6a6.png) **Figure 3** . Canvas creation breakpoints via the **Create canvas context** checkbox in the **Event Listener Breakpoints** pane ### 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. ![Start time stats in the Timing tab.](https://developer.chrome.com/static/blog/devtools-release-notes/image/start-stats-the-timing-1adf26082a5b4.svg) **Figure 4**. Start time stats in the Timing tab ### Server stats in the Timing tab You can now insert custom server statistics into the Timing tab. See [Demo of server timing values](https://gist.github.com/paulirish/a76ac17fc211b019e538c09d8d827691) for an example. ![Server stats in the Timing tab](https://developer.chrome.com/static/blog/devtools-release-notes/image/server-stats-the-timing-6ce32ddfd6c36.svg) **Figure 5** . Server stats in the **Timing** tab Thanks to [sroussey](https://twitter.com/sroussey) for the contribution! ## 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**](https://developers.google.com/web/tools/chrome-devtools/ui#settings) \> **More Tools** \> **JavaScript Profiler**. See [Chrome DevTools: JavaScript CPU Profiling in Chrome 58](https://developers.google.com/web/updates/2016/12/devtools-javascript-cpu-profile-migration) 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** ![Console Settings](https://developers.google.com/web/updates/images/2017/03/console-settings.png) 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. ![The new Console UI](https://developer.chrome.com/static/blog/devtools-release-notes/image/the-console-ui-f28f411a7c16a.png) **Figure 6**. The new Console UI ### WebGL event listener breakpoints have moved The WebGL [event listener breakpoints](https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints#event-listeners) have moved from the **WebGL** category to the **Canvas** category. The **WebGL** category has been removed.