Debugging has always been at the heart of web development, but with the rise of AI coding assistants, developers face a new challenge: how can these agents actually see and interact with the code that they generate? Introducing the chrome dev tools mcp server—a new way to connect your AI coding assistants with Chrome's DevTools for real-time debugging, performance insights, and user flow testing.
This guide will walk you through what the Chrome DevTools MCP server is, how it works, why it matters, and most importantly, how to install and use it in VS Code, gemini cli and Cursor. By the end, you’ll know how to integrate Chrome’s powerful debugging environment into your AI-assisted development workflow.
Want an integrated, All-in-One platform for your Developer Team to work together with maximum productivity?
Apidog delivers all your demands, and replaces Postman at a much more affordable price!
What is the Chrome Dev Tools MCP Server?
The Model Context Protocol (MCP) is an open-source standard that allows large language models (LLMs) to connect to external tools and data sources. The chrome dev tools mcp server brings Chrome DevTools’ debugging power directly into your AI agent.
Instead of generating code “blind,” your AI assistant can now:
- Launch Chrome and open a website.
- Collect live performance traces.
- Inspect the DOM, CSS, and JavaScript runtime.
- Debug layout, network, and console issues.
- Simulate user behavior such as clicks, form submissions, and navigation.
This makes the AI coding agent far more effective because it can validate, test, and optimize code changes in real time, rather than guessing what might work.
Why Use the Chrome Dev Tools MCP Server?
Here are key use cases for integrating the chrome dev tools mcp server into your workflow:
1. Verify Code Changes in Real-Time
Generate fixes with your AI assistant and confirm they work instantly in the browser.
Example prompt: “Verify in the browser that your change works as expected.”
2. Diagnose Network and Console Errors
Identify CORS issues, API failures, or unexpected runtime warnings.
Example prompt: “A few images on localhost:8080 are not loading. What’s happening?”
3. Simulate User Behavior
Automate user flows like form submissions or navigation to reproduce bugs.
Example prompt: “Why does submitting the form fail after entering an email address?”
4. Debug Live Styling and Layout Issues
Inspect the DOM and CSS for overflow bugs, misalignment, or rendering issues.
Example prompt: “The page on localhost:8080 looks strange. Check what’s happening there.”
5. Automate Performance Audits
Trigger Lighthouse-style checks directly via the AI assistant.
Example prompt: “Localhost:8080 is loading slowly. Make it load faster.”
How to Install the Chrome Dev Tools MCP Server
Installation is simple whether you’re using VS Code, Gemini CLI and Cursor.
1. Installing in VS Code
- Open VS Code
- Hit
Ctrl + Shift + P(on Windows or Linux) orCmd + Shift + P(for Mac). - Now, search for “MCP” and click “Add MCP Server.”
- Select “Browse MCP Servers.”
- In the sidebar under Extensions, click “Browse MCP Servers” again. You’ll be redirected to a web page listing available MCP servers.
- On that web page, search for “Chrome Dev Tools MCP Server” using the keyword "chrome."
- Click Install, then choose “Install in VS Code.”
Once installed, your VS Code AI assistant will be able to connect to Chrome for live debugging.
2. Installing in Cursor
- Open Cursor Editor.
- Go to Settings > Tools & MCP.
- Scroll down and click New MCP Server.
- This opens the MCP configuration JSON file, where you will have to paste the following MCP configuration:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["chrome-devtools-mcp@latest"]
}
}
}
- Then save and restart Cursor.
Now, Cursor will recognize the chrome dev tools mcp server and connect it to your AI coding assistant for debugging.
3. Installing in Gemini (Recommended)
If you’re using Gemini, you can also connect it to the chrome dev tools mcp server. In fact, Chrome specifically recommends enabling this feature in Gemini to take full advantage of its debugging and inspection capabilities.
First, locate thesettings.json file in the .gemini folder in your user’s root directory. This is where we will add our MCP's configuration. You can do this in two ways:
1. Navigate through your folders manually:
- Search for the
.geminifolder under your user profile and then open thesettings.jsonfile with your code editor (e.g. vs code).
2. Using the terminal:
- Get into the root directory and open the
.geminifolder using the commands below:
cd ~
cd .gemini
- Inside the
.geminifolder, open thesettings.jsonfile with vs code using the command:
code settings.json
3. Add the Chrome DevTools MCP Server to Gemini CLI
- Paste the following configuration into the file to add the Chrome DevTools MCP Server:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["chrome-devtools-mcp@latest"]
}
}
}
- Save the file and close it.
The Configuration file should look something like:
Now open Gemini and run the following command to confirm the server is installed:
/mcp
You should now see the chrome dev tools mcp server listed among the available servers. From here, Gemini can connect directly to Chrome DevTools, making it easier to debug live applications with AI assistance.
How to Use the Chrome Dev Tools MCP Server
Once installed, you can start interacting with it directly through prompts in your AI assistant. For example:
1. Performance Analysis
“Please check the LCP (Largest Contentful Paint) of web.dev.”
2. Debugging CSS Issues
“Inspect localhost:8080 and fix the overflowing elements in the header.”
3. Console & Network Logs
“Analyze the console errors when submitting the login form on localhost:3000.”
4. Simulating User Flows
“Navigate to the signup page, fill the form, and tell me why submission fails.”
Your AI assistant now not only writes code but also tests and debugs it like a human developer would, directly in Chrome.
Advanced Features
1. Automated Tracing
The performance_start_trace tool allows your AI agent to record traces and analyze performance bottlenecks automatically.
2. DOM & CSS Inspection
AI assistants can inspect live DOM structures and provide targeted CSS or HTML fixes.
3. Scalable Workflows
Since it’s powered by MCP, the same setup works across different editors and agents that support MCP, ensuring consistency.
Getting Involved and Future Outlook
The chrome dev tools mcp server is still in public preview. That means it’s evolving rapidly, and Google is actively seeking developer feedback. Future improvements could include:
- Deeper integrations with Lighthouse and Core Web Vitals.
- Richer simulation of user input (multi-step flows).
- Stronger visualization of AI-detected issues.
- Expanded support for multi-tab and multi-device debugging.
You can follow updates on Chrome Developers Blog and contribute issues or suggestions on GitHub.
Conclusion
The chrome dev tools mcp server is more than just another developer tool—it’s a bridge between traditional debugging workflows and the emerging world of AI-assisted coding. By giving coding agents the ability to see, test, and debug in real-time, it transforms them from code generators into full-fledged debugging partners.
Whether you’re a professional developer using VS Code, a student experimenting in Cursor, or an AI enthusiast exploring automation, installing and using the Chrome DevTools MCP Server can significantly boost productivity and code quality.
Now that Chrome DevTools can speak directly with your AI agent, the only question left is: what will you build, test, and fix next?
