Chrome DevTools MCP server in Cursor.
Cursor's agent can already write your frontend — with Chrome DevTools MCP it can also load the page, read the console, and profile what it built. Setup is one mcp.json entry and a toggle.
The slowest part of agentic frontend work in Cursor is the human verification step: the agent edits, you alt-tab to the browser, you paste the console error back. Chrome DevTools MCP removes that round-trip. Built by the Chrome DevTools team (43.2k stars on GitHub), it gives Cursor's agent direct access to a live Chrome — inspection, debugging, and performance profiling as callable tools.
Cursor reads MCP servers from mcp.json, with both a global and a per-project location, plus a settings UI with an on/off toggle per server. All three pieces matter, so here's the full path.
Global or project config?
Cursor checks two places: ~/.cursor/mcp.json applies to every project you open, while .cursor/mcp.json inside a repo applies only there. For a browser debugger, project scope is often the better call — commit it with your frontend repo and every Cursor user on the team gets the same setup, while your backend-only projects stay uncluttered.
You can also add servers through Cursor Settings > MCP, which writes the same file for you.
The mcp.json entry
Whichever location you choose, the entry is identical — Cursor launches the npm package over stdio via npx:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["chrome-devtools-mcp@latest"]
}
}
}Enable it and check the status dot
Open Cursor Settings > MCP. The chrome-devtools server should be listed with a toggle — make sure it's on. A green indicator means Cursor spawned the process and pulled the tool list; clicking the entry expands the tools so you can confirm the browser inspection tools loaded.
Then test it in Agent mode: 'navigate to http://localhost:3000 and tell me what errors hit the console on load.' You can compare what your install exposes against the server's live listing at https://loomal.ai/marketplace/chrome-devtools-mcp.
What the agent does with it
The practical wins are diagnostic: reproducing a bug by navigating and interacting, reading the actual exception instead of guessing from source, checking which network request failed and with what status, and running a performance trace when you ask why a page feels slow. Cursor's agent chains these with edits — find the error, fix the code, reload, confirm the console is clean.
Troubleshooting in Cursor
Server not listed in Settings > MCP? Check which file you edited: a .cursor/mcp.json only loads for that project, and the project needs to be reopened after the file is created. JSON errors make Cursor skip the file silently, so lint it if in doubt.
Listed but yellow or red? Cursor failed to start the process. Run `npx chrome-devtools-mcp@latest` in Cursor's integrated terminal to surface the real error — typically Node missing or an npx network failure on first download. Also remember the toggle: a perfectly configured server does nothing while switched off. Finally, if tools load but never get called, make sure you're in Agent mode; plain chat doesn't execute MCP tools.
FAQ
How do I install Chrome DevTools MCP in Cursor?
Add a chrome-devtools entry with command npx and args ["chrome-devtools-mcp@latest"] to ~/.cursor/mcp.json (global) or .cursor/mcp.json (project), or use Cursor Settings > MCP > Add Server. Then flip the server's toggle on.
Should I use the global or the project mcp.json?
Project scope (.cursor/mcp.json) is best for team frontend repos because it ships with the code. Global (~/.cursor/mcp.json) suits solo use across many projects. The config syntax is the same in both.
The server shows an error status in Cursor — what's wrong?
Cursor couldn't launch the command. Run the npx command in a terminal to see why: usually Node isn't installed, npx isn't on PATH, or the package download failed. Fix that, then re-toggle the server in Settings > MCP.
Does this replace Cursor's built-in browser features?
It complements them. Chrome DevTools MCP drives a real Chrome with the actual DevTools protocol underneath, so the agent gets genuine console, network, and trace data from a live instance — the same data you'd see debugging by hand.
More MCP servers for Cursor.
The Loomal marketplace lists servers with live-probed tool lists and clear pricing.