/dev tips

🎊   Announcing the new DevTools Pre Launch ModernDevTools.com - A discount, and no subscription fees during this pre-launch period   🎊

(53) Console Trace Advanced Network Filtering (55)

Chrome DevTools: DevTools (Performance) Easily identify long frame times

1 Jul 2015
DevTools (Performance) Easily identify long frame times

The Timeline Panel in Canary can highlight certain frames red. This is because it has an associated warning, in this case, the frame took longer than 18ms.

If you click on the frame, the Timeline Panel Summary Pane shows the reason in the form of a warning.

If a screen is refreshing 60 times per second (which many screens do), that's only ~16ms per frame (since 1000 milliseconds / 60 fps = ~16ms).

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