Giving AI Agents a Better Way to Debug CSS
Have you ever written a CSS rule, only to find out that it doesn’t seem to have any effect on the element you’re trying to style? You inspect the stylesheet, find the declaration, and everything looks perfectly fine. But the browser has other plans.
This usually happens because of how the CSS cascade works. A declaration might be overridden by another rule, lose because of specificity, or be affected by things like cascade layers, media queries, or inheritance. And figuring out which rule is actually taking effect can sometimes be a bit of a detective job.
Now, imagine being able to ask an AI coding assistant to investigate this directly in the browser instead of having it guess by reading your CSS files. That’s exactly what Chrome DevTools MCP makes possible.
In this article, I’ll show you how to connect Chrome DevTools MCP with Codex and use its new get_css_styles tool to inspect the actual CSS rules applied to an element, understand why certain declarations are overridden, and debug styling issues with the help of AI.
First, if you haven’t set up Chrome’s open-source MCP server, go ahead and install it by following the instructions: Configure Chrome DevTools MCP
Since I’m using Codex/ChatGPT, here’s how I’ve configured the MCP server.
Connecting Chrome DevTools MCP with Codex
Open Codex and navigate to its MCP server settings. Choose the option to add a custom MCP server.
You’ll be presented with a configuration form. Fill it in as follows:
- Name: chrome-devtools
- Type: STDIO
- Command to launch: npx
- Arguments:
- -y
- chrome-devtools-mcp@latest
You can leave the environment variables and working directory fields empty.
Save the configuration and make sure the MCP server appears as connected in Codex.
That’s pretty much it. Codex can now use Chrome DevTools to interact with a browser and inspect the page you’re working on.
Putting get_css_styles to use
Let’s look at a practical example.
Suppose you have the following CSS:
h2 {
color: blue;
}
.card h2 {
color: red;
}
#main .card h2 {
color: green;
}
Now, imagine that the heading inside your card is appearing green, even though you expected it to be red.
You could ask an AI coding assistant to inspect your CSS files and figure out what’s happening. But that would require it to find all the relevant declarations and reason about how the cascade works.
Instead, we can ask Codex to inspect the actual element in the browser.
First, start your application locally. For instance…
npm run dev
Once the application is running, give Codex a prompt like this:
Prompt: Open http://localhost:4321 in Chrome.
Find the heading inside the main card that appears green when I expected it to be red.
Use Chrome DevTools MCP to inspect its matched CSS rules, inherited styles, inline styles, and overridden declarations.
Identify:
- Which declaration actually wins?
- Which declarations are overridden?
- Is specificity, source order, or cascade-layer precedence responsible?
- Which source file and line contain the winning declaration?
Don’t modify anything yet. Just diagnose the problem and suggest the smallest possible fix.
Behind the scenes, Codex can use Chrome DevTools MCP’s take_snapshot tool to inspect the page and identify the element. It can then pass that element’s UID to get_css_styles to retrieve its CSS information.
The interesting part is that get_css_styles doesn’t just return the final computed styles. It also provides information about matched CSS rules, inherited styles, inline styles, custom properties, and the context in which declarations apply.
It also identifies overridden declarations, making it easier to understand why a particular rule isn’t taking effect.
In our example, the agent should be able to identify that #main .card h2 has greater specificity than .card h2, which is why the green declaration wins.
More things you can investigate
You can use this, for instance, to find unnecessary CSS overrides. Essentially a CSS audit. This is useful when working on an older project with accumulated CSS.
I used the following prompt in one of my projects.
Prompt: Audit CSS overrides
Inspect the main navigation component in my application.
Use get_css_styles to examine the matched CSS rules and identify declarations that are overridden by other declarations.
Look for:
- Redundant declarations.
- Duplicate rules.
- Unnecessary specificity.
- Conflicting cascade layers.
- Repeated !important declarations. Explain which declarations could potentially be removed and why. Don’t modify any files.
And the agent came up with potential cleanup opportunities such as duplicate rule sets, overridden declarations, redundant declarations, etc. Also, if there are any !important declarations, that can also be helpful.
In closing
Of course, these are just a couple of ways you can put get_css_styles to use. You can also use it to investigate dark-mode styling issues, responsive layout problems, conflicting media queries, and pretty much anything where you need to understand why a particular CSS declaration is or isn’t taking effect.
What’s interesting about this is that the AI agent no longer has to rely entirely on reading your CSS files and guessing what’s happening in the browser. It can inspect the actual styles applied to an element, understand which declarations are winning or being overridden, and use that information to come up with a more informed diagnosis.
It doesn’t mean the agent will always get things right, though. You should still review its findings and verify any suggested changes in the browser.
But I think this is a meaningful step forward in AI-assisted frontend development. Giving an agent access to the browser’s runtime information makes it a much better debugging companion than one that can only read your source code.
And that’s what makes Chrome DevTools MCP particularly interesting.
👋 Hi there! This is Amit, again. I write articles about all things web development. If you enjoy my work (the articles, the open-source projects, my general demeanour... anything really), consider leaving a tip & supporting the site. Your support is incredibly appreciated!
