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.
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.
To use the Performance Monitor:
- Open the Command Menu.
Show 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.
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.
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().
Click on a group to expand it and see each instance of the message.
Uncheck the Group Similar checkbox to disable this feature.
- You can group your own Console messages with
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.
The best place to discuss any of the features or changes you see here is the firstname.lastname@example.org 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.
Discover other DevTools features
Below is a list of everything that's been covered in the What's New In DevTools series.
- Visualize performance metrics in the Performance panel.
- Highlight text nodes in the DOM Tree.
- Copy the JS path to a DOM node.
- Audits panel updates, including a new audit that detects JS libraries and new keywords for accessing the Audits panel from the Command Menu.
- Hover over a Live Expression result to highlight a DOM node.
- Store DOM nodes as global variables.
- Initiator and priority information now in HAR imports and exports.
- Access the Command Menu from the Main Menu.
- Picture-in-Picture breakpoints.
- Live Expressions in the Console.
- Highlight DOM nodes during Eager Evaluation.
- Performance panel optimizations.
- More reliable debugging.
- Enable network throttling from the Command Menu.
- Autocomplete Conditional Breakpoints.
- Break on AudioContext events.
- Debug Node.js apps with ndb.
- (Bonus Tip) Measure real world user interactions with the User Timing API.
- Eager Evaluation.
- Argument hints.
- Function autocompletion.
- ES2017 keywords.
- Lighthouse 3.0 in the Audits panel.
- BigInt support.
- Adding property paths to the Watch pane.
- "Show timestamps" moved to Settings.
- Search across all network headers.
- CSS variable value previews.
- Copy as fetch.
- New audits, desktop configuration options, and viewing traces.
- Stop infinite loops.
- User Timing in the Performance tabs.
- Network tab renamed to Page tab.
- Dark theme updates.
- Certificate transparency information in the Security panel.
- Site isolation features in the Performance panel.
- Blackboxing in the Network panel.
- Auto-adjust zooming in Device Mode.
- Pretty-printing in the Preview and Response tabs.
- Previewing HTML content in the Preview tab.
- Local Overrides support for styles inside of HTML.
- (Bonus Tip) Blackbox framework scripts to make Event Listener Breakpoints more useful.
- Local Overrides.
- New accessibility tools.
- The Changes tab.
- New SEO and performance audits.
- Multiple recordings in the Performance panel.
- Reliable code stepping with workers in async code.
- Multi-client remote debugging support.
- Workspaces 2.0.
- 4 new audits.
- Simulate push notifications with custom data.
- Trigger background sync events with custom tags.
- Top-level await in the Console.
- New screenshot workflows.
- CSS Grid highlighting.
- A new Console API for querying objects.
- New Console filters.
- HAR imports in the Network panel.
- Previewable cache resources.
- More predictable cache debugging.
- Block-level code coverage.
- Mobile device throttling simulation.
- View storage usage.
- View when a service worker cached responses.
- Enable the FPS meter from the Command Menu.
- Set mousewheel behavior to zoom or scroll.
- Debugging support for ES6 modules.
- New Audits panel.
- 3rd-Party Badges.
- A new gesture for Continue To Here.
- Step into async.
- More informative object previews in the Console.
- More informative context selection in the Console.
- Real-time updates in the Coverage tab.
- Simpler network throttling options.
- Async stacks on by default.