/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

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.