DEV Community

Cover image for Stop Wasting Tokens on UI Bugs: How Chrome DevTools MCP Changed My Debugging Workflow
hassantayyab
hassantayyab

Posted on • Originally published at hassantayyab.com

Stop Wasting Tokens on UI Bugs: How Chrome DevTools MCP Changed My Debugging Workflow

#frontend #ai #webdev #productivity

Stop Wasting Tokens on UI Bugs: How Chrome DevTools MCP Changed My Debugging Workflow

There's a frustrating pattern when using AI for frontend development.

You describe a UI bug. Claude tries to fix it. Doesn't work. You describe it again, maybe paste some CSS. Still doesn't work. Claude keeps guessing, trying different things, burning through tokens while you watch the same broken UI.

The problem is simple: AI can't fix what it can't see.

I found a solution that cuts my UI debugging time in half. Sometimes more.

The Problem: Blind Debugging

A few weeks ago I had a scrollbar that wouldn't hide. Simple enough, right?

I told Claude to hide the scrollbar on a long list of items. It added overflow: hidden. Didn't work. Tried ::-webkit-scrollbar { display: none }. Still showing. Added scrollbar-width: none. Nothing.

Claude kept trying different CSS combinations. I kept saying "still not working." We went back and forth, wasting tokens, getting nowhere.

The issue? Claude was guessing based on code. It couldn't actually see what was rendering in the browser.

The Fix: Give AI Eyes

Chrome DevTools MCP lets Claude actually interact with your running application. It can:

  • Launch your app
  • Open Chrome
  • Click around and reproduce scenarios
  • Take screenshots
  • Inspect the actual rendered DOM
  • See computed styles

Instead of guessing from code, it can see exactly what you're seeing.

How It Actually Works

Here's what happened when I used Chrome DevTools MCP for that scrollbar issue.

I told Claude: "use the mcp server to fix this"

Then it:

  1. Started my dev server
  2. Opened Chrome to the app
  3. Added items to the list one by one to reproduce the scenario
  4. Took a screenshot of the UI
  5. Saw the actual problem
  6. Fixed it

I didn't click anything. I just watched Chrome doing stuff on its own and made sure not to close it.

The fix was instant once Claude could actually see the rendered output.

Another Example: The Mysterious Textarea Outline

I had a chat input component with a textarea wrapped in a div. There was an outline appearing that I wanted gone.

Claude kept targeting the textarea styles within the component. Didn't work. Tried different border and outline properties. Still there.

When I had it use Chrome DevTools MCP, it could inspect the computed styles and discovered global styles were interfering. The component styles were encapsulated, but something in the global CSS was adding the outline.

Once Claude could see the actual cascade of styles hitting that element, the fix was obvious.

When to Use This

I don't use Chrome DevTools MCP for everything. Most UI work Claude handles fine from code alone.

But when:

  • Claude keeps trying fixes that don't work
  • You're going back and forth with no progress
  • The issue involves visual state that's hard to describe
  • Something is overriding styles and you can't figure out what

That's when I tell it to use the MCP server. Usually fixes things immediately.

The Workflow

It's surprisingly simple.

My prompt when Claude is stuck:

use the mcp server to fix this
Enter fullscreen mode Exit fullscreen mode

That's it. Claude handles the rest:

  • Runs the app on a port
  • Opens Chrome
  • Navigates to the right page
  • Interacts with the UI to reproduce the issue
  • Takes screenshots automatically
  • Inspects what it needs to
  • Fixes the problem

Just make sure Chrome is open and don't close it while Claude is working. If you interrupt the process, it breaks.

Setting It Up

Setup is straightforward. I followed the official docs.

For Claude Code / Claude Desktop:

Check the official MCP documentation:
https://modelcontextprotocol.io/docs/develop/connect-local-servers

For Cursor:

Cursor has its own MCP setup process:
https://cursor.com/docs/context/mcp

The Chrome DevTools MCP server:
https://github.com/ChromeDevTools/chrome-devtools-mcp

Follow the steps, connect the server, and you're good to go.

Why This Saves So Much Time

When AI is stuck on a UI bug, it enters a frustrating loop:

  1. Claude tries something
  2. You say it didn't work
  3. Claude tries something else
  4. Still doesn't work
  5. Repeat until you give up or get lucky

Each cycle wastes tokens and time. And often Claude is just guessing because it can't see the actual problem.

Chrome MCP breaks this loop. Instead of guessing, Claude can see. The fix usually comes on the first try.

For me, this saves at least half the debugging time on visual issues. Sometimes way more.

Limitations

It's not magic. A few things to know:

  • You need to keep Chrome open while it works
  • It's overkill for simple CSS fixes Claude can handle from code
  • Sometimes the automation is slower than just fixing it yourself if you already know the issue

Use it when you're stuck, not for everything.

The Takeaway

Most AI coding frustration comes from the AI not being able to see what you're seeing.

For UI bugs, Chrome DevTools MCP fixes this. Claude can actually run your app, look at the screen, inspect elements, and understand what's happening.

Next time you're going back and forth on a visual bug that Claude can't seem to fix, just tell it to use the MCP server.

You'll wonder why you didn't set this up sooner.

Links:

Top comments (0)