DevtoolCSS is a monorepo providing utilities and applications for manipulating DevTool's CSS data, currently supporting Chrome DevTools Protocol (CDP). It aims to demonstrate programmatic use of style panel's information.
Currently there are two applications focusing on inlining:
| App | Description | Release |
|---|---|---|
| UI Export | A Chrome DevTool extension that exports any components with CSS inlined. | |
| cleanclone | A cli crawler that inlilnes CSS, downloads resources, and rewrites links. |
If you want to try DevtoolCSS, start with UI Export.
Install the extension, open Chrome DevTools on a page, select an element, and export it in a few clicks.
For automated page-level workflows, see cleanclone.
Each package contains its own installation and usage documentation.
I was migrating a WordPress site to code. I thought this would be easy with today’s tools, but it turned out that LLM-based cloners hallucinate CSS, and existing inliners can’t handle huge stylesheets.
However, Devtool can always provide the exact styles applied during rendering. Knowing that it’s all powered by Chrome DevTools Protocol (CDP) — thanks to my previous experience working on Chromium — I decided to create this project.