Automate Web Debugging: A Practical Guide to Chrome DevTools MCP

Hey everyone! I’m excited to share something that’s a real game-changer for anyone who writes code for the web. I’m talking about the new Chrome DevTools Model Context Protocol (MCP) server. If you want to know more details, read the article until the end.

AI coding assistants are great at generating code. They can write the code, but they can’t see what it actually does when it runs in a browser. This means a lot of guesswork and back-and-forth for developers.

But that’s all about to change. The Chrome DevTools MCP server enables an AI agent to debug web pages directly in Chrome, utilizing the same powerful DevTools. This means an AI assistant can now identify and fix issues with much greater accuracy.

\

What Exactly is Chrome DevTools MCP?

The Chrome DevTools MCP server is a specific implementation of the Model Context Protocol (MCP) that adds debugging capabilities to an AI agent.

With this new tool, my AI assistant can:

• Verify code changes in real-time: It can generate a fix and then automatically check if it works as intended in the browser.

• Diagnose network and console errors: It can analyze network requests to uncover issues like CORS problems or inspect console logs to figure out why a feature isn’t working.

• Simulate user behavior: AI can navigate through a website, fill out forms, and click buttons to reproduce bugs and test complex user flows.

• Debug live styling and layout issues: It can inspect the DOM and CSS to find and suggest fixes for layout problems.

• Automate performance audits: you can ask it to run a performance trace, analyze the results, and identify specific performance issues.

• And many more.

  \

Getting Started with Chrome DevTools MCP

You can use it with almost any available coding agent. I’m going to show you how to use it in VS Code with GitHub Copilot, and then you can apply it to the agent of your preference.

Requirements:

• VS Code
• GitHub Copilot
• Node.js

How to Install Chrome DevTools MCP in VS Code

• Open VS Code.

• Press Ctrl+Shift+P (or Cmd+Shift+P on Mac). Type “MCP:” and select “Add Server” from the dropdown.

\

• In the next dropdown, I chose to “Browse MCP Servers.”

\

• This opened a new tab in my browser where I could search for “chrome.” The “Chrome DevTools” MCP server was the only result. I clicked “Install” and then “Install in VS Code.” A pop-up in my browser asked for permission to open VS Code, which I allowed.

  \

- Back in VS Code, I just had to click the “Install” button.

And that was it! My AI agent was now supercharged with the power of Chrome DevTools.

If you already have an mcp.json file, you can just add this code there:

{   "servers": {     "chrome-devtools": {       "command": "npx",       "args": ["chrome-devtools-mcp@latest"]     }   } } 

Chrome DevTools MCP NPM

You can also install MCP via the npm package manager by using this command:

npm i chrome-devtools-mcp 

Official page of Chrome MCP is here: https://www.npmjs.com/package/chrome-devtools-mcp

\

How to Test DevTools MCP in VS Code

To see it in action, I opened the Copilot chat and asked my agent to check the Largest Contentful Paint (LCP) score for my https://proflead.dev. It immediately started working, and I could see the progress in the chat window. It asked for my permission before proceeding.

\ In a matter of moments, I had a detailed report on my website’s LCP score. But the truly amazing part is what comes next. Because my AI agent now has all this visibility, I can ask it to help me improve the score. It’s no longer just guessing; it can see the real-world performance of the website. If you cannot follow along with this tutorial, you might be interested in watching my video step-by-step tutorial on this topic below.

\

Video Tutorial: Chrome DevTools MCP Explained

Watch on YouTube: Chrome DevTools MCP Explained

https://www.youtube.com/watch?v=e0z7EQZT2b0&embedable=true

Conclusion

This is a massive leap forward for web development. We’re moving away from AI assistants that are just code generators to ones that can actively participate in the entire development lifecycle.

If you’re a web developer, I highly recommend checking out the Chrome DevTools MCP server. It’s a powerful tool that will change the way you work with your AI coding assistant.

Cheers! :)