brouser

Show HN: A DevTools MCP that provides matched CSS rules

Posted by brouser on Saturday November 22, 2025 @05:22AM
from the show-hn dept.

https://github.com/devtoolcss/chrome-inspector-mcp

I built this MCP so agents can see the DevTools Styles panel without manual copying.The inspiration? Debugging a friend's WordPress + Elementor site. After staring at the GUI generated stylesh*t several times, I decided I'd rather build a tool than read another line of it myself.I'm also really puzzled how chrome-devtools-mcp got so popular without providing such basic DevTools functionality...

( Read More... | no comments | 2 points | on HN )

Re:What if you don't need MCP at all? on Monday November 17, 2025 @01:11AM (#45951210)

You hit it! I am also thinking of programatic control of DevTools so I made this: https://github.com/devtoolcss/chrome-inspector

Though it is more about debugging CSS, I think we are on the same way: let agents use tool by scripting.

Re:What if you don't need MCP at all? on Monday November 17, 2025 @01:08AM (#45951204)

You hit it! I am also thinking of programatic control of DevTools so I made this: https://github.com/devtoolcss/chrome-inspector

It is a core library and I am extending it to usable tools. Hopefully agents can directly script it.

Re:What if you don't need MCP at all? on Monday November 17, 2025 @12:56AM (#45951156)

Not sure what you are compiling and what static while loop is.

Re:Show HN: A DevTools-Level JavaScript API for DOM and CSS Style Rules on Saturday November 08, 2025 @11:32AM (#45857914)

Yeah I am also thinking of contributing them. Though they tend to use DevTools Frontend, which is complete really a bulk of stuff and they probably still can't figuring out how to utilize its CSS parts. Will suggested to them after having more comments.

Show HN: A DevTools-Level JavaScript API for DOM and CSS Style Rules

Posted by brouser on Friday November 07, 2025 @11:13PM
from the show-hn dept.

https://github.com/devtoolcss/chrome-inspector

It is a wrapper around the Chrome DevTools Protocol (CDP), the same API that DevTools uses, to inspect elements programmatically and intuitively like accessing DOM.Why this? I have seen too many tools pretending they can get matched CSS style rules but actually only computed styles. The real DevTools data — CSS rules, selectors, and cascading order — is what we want to retrive programmatically,...

( Read More... | 2 comments | 2 points | on HN )