An idea for paint times in developer tools.
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Right now, all this extension does is listen for timeline panel events and console.logs the paint durations per frame.


  • Discover what CSS properties are contributing to long paint times.

This is a 'paint time' chrome extension inspired by this comment.

This repo is unlikely to be commited to regularly by myself, it exists mainly to serve as inspiration to other developers and/or developer tools committers. Ideally, this would be handled in developer tools itself rather than having to install a custom extension.


  • Find a way to continuiously repaint the page in JavaScript, the current "Enable continuous page repainting" in Developer Tools seems to handle this in C++. If the Remote Debugging Protocol made this available, that would even better and eliminate the need to repaint in JavaScript.
  • Find a smart way to get user defined CSS on elements possibly through document.styleSheets. Should there be a whitelist of likely poor performing properties? E.g. ['boxShadow', 'borderRadius'] whose properties are toggled to their defaults? This avoids toggling every single property (which could be a lot) if a reset.css was used for example.
  • How can we reset a style to its default? Use the user agent stylesheet? Alternatively, document.styleSheets[0].rules[0].style.color = null seems to work.
  • Use something like html2canvas to render a before and after of the portion of the DOM which recommendations have been produced for. E.g. Here is what <span id="some-elem... ...ipsum</span> looks like with border-radius: 10px; (current) and border-radius: 0; (recommended)