Using the new Streaming Performance Monitor in Google Chrome

Ben Edelstein Founder @LogRocket, formerly @Google

If you’ve ever had to debug a memory leak or profile a performance issue in Chrome, you’ve probably experienced the clunky Performance and Memory tabs in the dev tools. While providing highly granular information, they require purposefully starting and stopping a “recording”, and significantly increase CPU and memory usage on your machine.

New: live performance and memory stats

Recently added in Chrome Canary, the streaming Performance Monitor displays live performance and memory stats as your app runs. It combines the most useful data from the Performance and Memory tabs showing:

CPU usage — what percentage of your CPU the site is using
JS heap size — how much memory (in Megabytes) is being used by the app
DOM Nodes — how many DOM nodes are in memory
JS event listeners- how many JavaScript event listeners are registered
Documents — number of live document resources like stylesheets and scripts
Frames — the number of live frames on the page (iframes and workers)
Layouts / sec — the rate at which the browser has to re-layout the DOM
Style recalcs / sec — the rate at which the browser has to recalculate styles

Clicking on a metric on the left side lets you toggle whether or not it is recorded

Why it’s helpful

Since the performance monitor doesn’t require starting and stopping a discrete recording, you can keep it open as you use your app on a day-to-day basis. If you see the CPU or memory spike, you’ll know that something might be awry.

This can also save time when it’s not immediately clear which action or page in the app causes a slowdown — since the stats are live, you’ll see right away when you do something in the app and the CPU or memory usage begins to climb.

To be clear, the Performance Monitor doesn’t completely replace the Performance and Memory tabs. These yield more granular information and are helpful when trying to figure out the root cause of an issue since you can record one instance and then pause and zoom in on problem areas.

How to get it

Make sure you have the latest version of Chrome Canary, and click on “Performance monitor” in the dropdown next to “Console” in the lower pane of the developer tools.

If you don’t want to install Canary, you’ll only have to wait a few weeks for the performance monitor to reach Chrome Stable (the regular version of Chrome).

LogRocket helps product teams build better experiences for their users. By recording videos of user sessions along with logs and network data, LogRocket surfaces UX problems and reveals the root cause of every bug.