/dev tips

(183) Quickly access the DOM Tree from JavaScript Copy JS Path (185)

Chrome DevTools: Easily identify key rendering milestones with Paint Timing Markers

26th November 2018
Easily identify key rendering milestones with Paint Timing Markers

The Paint Timing Markers feature allows you to view colour-coded markings in the Performance Panel. These Timings include:

You can correlate these markings with the rendering data shown in a Performance Panel profile to understand which resources contributed to certain events.

🔥️  Tip: Did you know you can programmatically access Paint Timing information in JavaScript? Try code like:

performance.getEntriesByType('paint')

I've written an article about this subject in: Improving Performance with the Paint Timing API.

Note: This is a hidden experiment in DevTools. In Canary DevTools, go to Settings > Experiments > Press shift 6 times > Enable the Paint Timing Markers experiment.

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