What's New In DevTools (Chrome 64)

Published on

Interested in helping improve DevTools? Sign up to participate in Google User Research here.

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

Read on, or watch the video version of these release notes below.

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.

Performance Monitor

Use the Performance Monitor to get a real-time view of various aspects of a page's load or runtime 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.

If users are reporting that your app feels slow or janky, check the Performance Monitor for clues.

Why load perf matters: BookMyShow achieved an 80% increase in conversions when they built a Progressive Web App that focused on speed. Learn more.

To use the Performance Monitor:

  1. Open the Command Menu.

  2. Start typing Performance then select Show Performance Monitor.

    The Performance Monitor Figure 1. The Performance Monitor

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

Related features:

  • Performance panel. Walk through a critical user journey and record everything that happens on the page, including JavaScript activity, network requests, CPU usage, and much more. Can also be used to analyze load performance. Learn more.
  • Audits panel. Run a suite of automated load and runtime performance tests against any URL. Learn more.

If you're just starting out with analyzing performance, the recommended path is to first use the Audits panel, and then investigate further using the Performance panel or Performance monitor.

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.

Using the Console Sidebar to show error messages only

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

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

Related features:

  • Filter text box. Enter some text and the Console only shows messages that include that text. Also supports regex patterns, negative filters, and URL filters.

Group similar Console messages

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

An example of the Console grouping similar messages together

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

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

An example of an expanded group of Console messages

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

Uncheck the Group Similar checkbox to disable this feature.

Related features:

Local Overrides

Whoops! We originally scheduled this feature to launch in Chrome 64, but pulled it close to the deadline in order to smooth out some rough edges. Apparently, the What's New UI didn't update in time. Sorry!

This feature is shipping in Chrome 65, which will land approximately 6 weeks after Chrome 64. Check out Local Overrides to learn more. If you're on Windows or Mac, you can try Chrome 65 now by downloading Chrome Canary.

Download the preview channels

Consider using the Chrome Canary, Dev or Beta as your default development browser. These preview channels give you access to the latest DevTools features, test cutting-edge web platform APIs, and find issues on your site before your users do!

Getting in touch with the Chrome DevTools team

Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

  • Submit a suggestion or feedback to us via crbug.com.
  • Report a DevTools issue using the More options   More   > Help > Report a DevTools issues in DevTools.
  • Tweet at @ChromeDevTools.
  • Leave comments on our What's new in DevTools YouTube videos.

What's New in DevTools

A list of everything that has been covered in the What's New In DevTools series.

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 was cancelled.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.