/dev tips

(204) Improved Paint Timing Markers Performance Recordings with Code Coverage (206)

Chrome DevTools: New performance metrics with the Performance Monitor

21st September 2019
New performance metrics with the Performance Monitor

The DevTools Performance Monitor features a live-updating visualisation which highlights performance bottlenecks in your page. As you interact with the page (scrolling, navigating etc.), the visualisation updates along with it.

The Performance Monitor is a great starting point for a high-level performance overview. Unexpected spikes (e.g. a spike in CPU usage when you scroll the page) can then be investigated further with the Performance Panel.

You can open the Performance Monitor by searching for 'Show Performance Monitor' in the DevTools Command Menu (Cmd + Shift + P).

The performance metrics (the categories on the left side) can be toggled on and off, which can help make the visualisation digestible. These categories are:

Sign up to receive a developer tip, in the form of a gif, in your inbox each week.