Quick Tip — Using The Chrome DevTools FPS meter

One of the hidden gems in Chrome DevTools is the FPS meter. The FPS meter enables you to monitor frames per second during runtime. It’s very useful for animation monitoring and can help you to understand if you are running below 60 FPS.

How do you use the FPS meter? This is what this short post will cover.

Open the Chrome DevTools and then open the Command Menu by using Control+Shift+P in Windows or Command+Shift+P in Mac. In the Command Menu, type ‘Show frames’ and pick the first option (should be “Show frames per second (FPS) meter”):

Showing the FPS Meter

Doing this will open the FPS meter and you will be able to monitor your FPS. You can also open the Rendering tab and just check the FPS meter checkbox.

Here is how the FPS meter looks like:

FPS meter

If your animation is running in 60 FPS then it should look smooth. Below 60 FPS means that some frame rendering is taking too long and the animation might not look smooth and may be even janky. Another thing that is shown in the FPS meter is the GPU memory usage. In the previous figure it’s 26.3 MB out of 1024 MB, which means low GPU usage.

After you finished your monitoring you can close the FPS meter. To do so, in the Command Menu search for ‘Hide frames’ and pick the first option (should be “Hide frames per seocnd (FPS) meter):

Hiding the FPS Meter

Another option is to open the Rendering tab and uncheck the FPS meter checkbox.

In this short post I showed you how to use the FPS meter in Chrome DevTools to monitor your animation FPS.

Hardcore web developer, @sparXys CEO, Google Web Technologies GDE, Microsoft MVP, Pro SPA Development co-author, husband, dad and a geek.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store