What's New In DevTools (Chrome 64)

Note: The video version of these release notes will be published around late-January 2018.

Welcome back! New features coming to DevTools in Chrome 64 include:

• Local Overrides. Make changes to a page's HTML, CSS, or JavaScript that persist across page loads.
• Performance Monitor. View a page's performance in real-time.
• Console Sidebar. Reduce Console noise and focus on the messages that are important to you.
• Group similar Console messages. The Console now groups similar messages together by default.

Note: Check what version of Chrome you're running at chrome://version. If you're running an earlier version, these features won't exist. If you're running a later version, these features may have changed. Chrome auto-updates to a new major version about every 6 weeks.

Local Overrides

Suppose you're using DevTools to change a site's HTML, CSS, or JavaScript. When you reload the page, the changes are lost. Local Overrides make it possible to persist the changes across page loads. To use Local Overrides:

1. Open the Sources panel.

2. Open the Overrides tab.

   Figure 1. The Overrides tab

3. Click Setup Overrides.

4. Select the directory where you want to save the changes.

5. Click Allow to give DevTools write access to the directory. The Overrides tab now shows the mapping between the site and your local directory.

   Figure 2. The Overrides tab shows the mapping between the site developers.google.com and the local directory test

6. Make some changes to the site's code via the Styles pane or the Sources panel. These changes now persist across page loads.

   Figure 3. Setting the color property of the selected h1 element to crimson

7. Open the local directory that you mapped to the site. For every change you make, DevTools saves a copy of the modified file to this directory.

   Figure 4. Viewing the local copy of a modified file

Check out Paul Irish's talk from Chrome Dev Summit 2017 for a video example of this workflow.

Performance Monitor

Use the Performance Monitor to get a real-time view of various aspects of a page's performance, including:

• CPU usage.
• JavaScript heap size.
• The total number of DOM nodes, JavaScript event listeners, documents, and frames on the page.
• Layouts and style recalculations per second.

To use the Performance Monitor:

1. Open the Command Menu.

2. Start typing Performance then select Show Performance Monitor.

   Figure 5. The Performance Monitor

3. Click a metric to show or hide it. In Figure 5 the CPU Usage, JS heap size, and JS event listeners charts are shown.

Console Sidebar

On large sites, the Console can quickly get flooded with irrelevant messages. Use the new Console Sidebar to reduce the noise and focus on the messages that are important to you.

Figure 6. Using the Console Sidebar to show error messages only

The Console Sidebar is hidden by default. Click Show Console Sidebar to show it.

Group similar Console messages

The Console now groups similar messages together by default. For example, in Figure 7 there are 27 instances of the message [Violation] Avoid using document.write().

Figure 8. An example of the Console grouping similar messages together

Click on a group to expand it and see each instance of the message.

Figure 9. An example of an expanded group of Console messages

Uncheck the Group Similar checkbox to disable this feature.

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. If you're sure that you've encountered a bug in DevTools, please open an issue.

Previous release notes

See the devtools-whatsnew tag for links to all previous DevTools release notes.