# How to use Chrome DevTools MCP Server in VS Code The Chrome DevTools Model Context Protocol (MCP) server lets a coding agent inspect pages and use browser debugging tools. I’ll show you how I connected it and tested it on a website. Author: Vladislav Guzey Published: 2025-10-02 Canonical: https://proflead.dev/posts/chrome-devtools-mcp/
The Chrome DevTools Model Context Protocol (MCP) server lets a coding agent inspect pages and use browser debugging tools. I’ll show you how I connected it and tested it on a website. 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](/posts/vs-code-agent-mode/), 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. ![](https://cdn-images-1.medium.com/max/800/1*9Vz643msd8bBin6fyuSdfA.png) - In the next dropdown, I chose to “Browse MCP Servers.” ![](https://cdn-images-1.medium.com/max/800/1*3HzitQwrL9l7PgoNktrxlw.png) - 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. ![](https://cdn-images-1.medium.com/max/800/1*Je6QY9XAXIbF1Xs56-pNZg.png) - Back in VS Code, I just had to click the “Install” button. The agent could now use Chrome DevTools to inspect my page. If you already have an **mcp.json** file, you can just add this code there: ```json { "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: ```bash 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) ## 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](/posts/website-performance-proflead/) for my [https://proflead.dev](https://proflead.dev). It immediately started working, and I could see the progress in the chat window. It asked for my permission before proceeding. ![How to Test DevTools MCP in VS Code](https://cdn-images-1.medium.com/max/800/1*vSZT6A-ritEF1koZ-uU4Jw.png) 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://youtu.be/e0z7EQZT2b0) ## 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. Try the server on a page you know well, then compare the agent’s findings with what you see in DevTools. Cheers! :)