cssdump

Althrough we have PurifyCSS which analyze the css, js and html files to remove the unused css items, it is not that accurate since it is based on text analyze. The browser is the final CSS interpreter which knows exactly which css style is used or not.

Some day if you want to re-architecting the css files, either for reduce the file size or redesgin the file hierarchy, cssdump will help. It dumps the used styles of current page, save it into a css file. Then you can edit and redesign the content. It is recommended to guard with the PhantomCSS visual tests to guarantee the final results are same.

Polyfill of getMatchedCSSRules

The function getMatchedCSSRules is deprecated by Chrome team, but we can polyfill it with this method.

In current situation, the polyfill version of getMatchedCSSRules lack the pseudo class filter. It will be development if I found some test case to do it.

Usage

Include the cssdump.js in the page, load the page and click DUMP button at right bottom corner.

https://developers.google.com/web/updates/2017/04/headless-chrome