Xavier Ting AI for the rest of us

Chrome DevTools MCP

Lets your AI assistant see the page it built.

Why use Chrome DevTools MCP?

An assistant that cannot see the page is working blind, and it will report things as fixed that it never checked. This official tool from Google connects your assistant to a real Chrome browser. It can then read the error messages, watch what the page loads, measure how fast it runs, and take screenshots of what it actually looks like.

When should you use Chrome DevTools MCP?

Fixing anything that shows up in a browser, making a slow page faster, and any time you want proof that a change worked rather than a claim that it did.

How do you install and use Chrome DevTools MCP?

  1. Add it to your assistant's connected tools with the command below. MCP is simply the agreed standard for plugging outside tools into an AI assistant.
  2. Ask the assistant to open your page and read the errors.
  3. Let it take screenshots and check its own work before it tells you it is finished.
Paste into the Terminal app claude mcp add chrome-devtools npx chrome-devtools-mcp@latest
← Back to the tools