What's New In DevTools (Chrome 64)
Welcome back! New features coming to DevTools in Chrome 64 include:
- 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.
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.
- 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:
Open the Command Menu.
Show Performance Monitor.
Figure 1. The Performance Monitor
Click a metric to show or hide it. In Figure 1 the CPU Usage, JS heap size, and JS event listeners charts are shown.
- 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.
Figure 2. Using the Console Sidebar to show error messages only
The Console Sidebar is hidden by default. Click Show Console Sidebar to show it.
- 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().
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.
Figure 4. An example of an expanded group of Console messages
Uncheck the Group Similar checkbox to disable this feature.
- You can group your own Console messages with
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.