Chrome DevTools MCP server in Cline.
Cline writes your frontend code inside VS Code — Chrome DevTools MCP lets it check the result in a real browser. Here's the cline_mcp_settings.json entry and where that file actually hides.
Cline's autonomous coding loop gets dramatically more useful when it can verify UI changes itself. Chrome DevTools MCP — the Chrome team's official server, sitting at 43.2k GitHub stars — exposes page inspection, debugging, and performance profiling as MCP tools, so Cline can load the page it just edited and read the console instead of asking you to.
Cline manages MCP servers through its own settings file, cline_mcp_settings.json, which lives in VS Code's globalStorage rather than your project. The extension gives you a UI path to it, which is the route to use.
What Cline gains from DevTools access
In a typical run, Cline edits a component, then needs feedback. With this server connected, the feedback step is a tool call: navigate to the dev server, capture console errors, inspect the rendered DOM, or pull a performance trace. Bugs that only reproduce in the browser — hydration mismatches, CORS failures, layout regressions — become things Cline can diagnose with evidence.
The server runs locally over stdio from the npm package chrome-devtools-mcp, so there's no account or API key involved; it just needs Node and an installed Chrome.
Open Cline's MCP settings
In VS Code, open the Cline panel and click the MCP Servers icon, then Configure MCP Servers. That opens cline_mcp_settings.json directly — far easier than digging out the real path, which is buried under VS Code's globalStorage at saoudrizwan.claude-dev/settings/cline_mcp_settings.json inside your user data directory.
Add the server entry
Paste the chrome-devtools block under mcpServers. Cline supports a couple of extra fields worth knowing: disabled toggles the server without deleting it, and autoApprove lets you whitelist read-only tools so Cline doesn't pause for confirmation on every console read:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["chrome-devtools-mcp@latest"],
"disabled": false
}
}
}Confirm the connection
Save the file and look back at the MCP Servers tab in the Cline panel — chrome-devtools should appear with a green status and an expandable tool list. If you start a task like 'open http://localhost:5173 and list any console errors', Cline should propose a browser tool call on the first step.
For the full tool list and live status of this server, see its Loomal marketplace listing at https://loomal.ai/marketplace/chrome-devtools-mcp.
Troubleshooting in Cline
Red status next to the server? Use the Retry Connection button in the MCP Servers tab first — npx downloads the package on first launch and can simply time out on slow networks. If it keeps failing, run `npx chrome-devtools-mcp@latest` in VS Code's integrated terminal; whatever error prints there is the real problem, usually a missing Node install or no Chrome on the machine.
If the server doesn't appear at all, you likely edited the wrong file — Cline does not read .vscode/mcp.json or Claude Desktop's config, only its own cline_mcp_settings.json. Check the JSON for syntax errors too; Cline will flag invalid config in the panel. After fixing, reload the VS Code window (Developer: Reload Window) so the extension re-reads its settings.
FAQ
How do I install Chrome DevTools MCP in Cline?
Open the Cline panel in VS Code, go to MCP Servers > Configure MCP Servers, and add a chrome-devtools entry with command npx and args ["chrome-devtools-mcp@latest"]. Save the file and the server connects automatically.
Where is cline_mcp_settings.json on disk?
Inside VS Code's globalStorage, under saoudrizwan.claude-dev/settings/. The exact prefix varies by OS, which is why opening it through the Cline panel's Configure button is the reliable way to reach it.
Why does the server show a red error status?
Usually the launch command fails: Node isn't installed, npx isn't on PATH, or the first npx download timed out. Run the command in a terminal to see the actual error, then hit Retry Connection in the MCP Servers tab.
Can I stop Cline asking approval for every browser action?
Yes — Cline supports auto-approving specific MCP tools per server. Whitelisting read-only tools like listing console messages keeps the loop fast, while leaving navigation or interaction tools on manual approval is a sensible default.
More MCP servers for Cline.
Browse the Loomal marketplace — live-probed tool lists on every listing.