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: 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. Verify code changes in real-time: It can generate a fix and then automatically check if it works as intended in the browser. 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. 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. 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. 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. Automate performance audits: you can ask it to run a performance trace, analyze the results, and identify specific performance issues. And many more. 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: Requirements: VS Code
GitHub Copilot
Node.js 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. 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.” 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. 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. 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"]
    }
  }
} {
  "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 npm i chrome-devtools-mcp Official page of Chrome MCP is here: https://www.npmjs.com/package/chrome-devtools-mcp https://www.npmjs.com/package/chrome-devtools-mcp 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. https://proflead.dev https://proflead.dev 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 Watch on YouTube: Chrome DevTools MCP Explained Chrome DevTools MCP Explained Chrome DevTools MCP Explained https://www.youtube.com/watch?v=e0z7EQZT2b0&embedable=true 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! :)

This story contains new, firsthand information uncovered by the writer.

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Automate Web Debugging: A Practical Guide to Chrome DevTools MCP

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

10 Git Commands Senior Devs Should Know (and Use Daily)

The AI FOMO Dilemma: Why Agility Gives Practitioners an Edge in the AI Era

“Not My Keys, Not My Crypto?” Maybe It’s Time For an Upgrade?

Transforming Legacy with Domain-Driven Design, II: Strategy

This AI Agent Can Trade Forex Using Tweets and Real-Time Market Data—Here’s How You Can Build One

10 Git Commands Senior Devs Should Know (and Use Daily)

The AI FOMO Dilemma: Why Agility Gives Practitioners an Edge in the AI Era

“Not My Keys, Not My Crypto?” Maybe It’s Time For an Upgrade?

Transforming Legacy with Domain-Driven Design, II: Strategy

This AI Agent Can Trade Forex Using Tweets and Real-Time Market Data—Here’s How You Can Build One

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps