Chrome DevTools MCP All In One

Chrome DevTools MCP All In One

$ npm i chrome-devtools-mcp

$ npm i -D chrome-devtools-mcp

https://www.npmjs.com/package/chrome-devtools-mcp

Chrome DevTools for agents (chrome-devtools-mcp) lets your coding agent (such as Antigravity, Claude, Cursor or Copilot) control and inspect a live Chrome browser.
It acts as a Model-Context-Protocol (MCP) server, giving your AI coding assistant access to the full power of Chrome DevTools for reliable automation, in-depth debugging, and performance analysis.

https://github.com/ChromeDevTools/chrome-devtools-mcp

https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/cli.md

MCP Client configuration

1. Install via CLI (MCP only)

Claude Code CLI to add the Chrome DevTools MCP server:

claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

https://code.claude.com/docs/en/mcp

2. Install as a Plugin (MCP + Skills)

add the marketplace registry in Claude Code:

/plugin marketplace add ChromeDevTools/chrome-devtools-mcp

install the plugin:

/plugin install chrome-devtools-mcp@chrome-devtools-plugins

demos

MCP client

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest", "--no-usage-statistics"]
    }
  }
}

only basic browser tasks

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest", "--slim", "--headless"]
    }
  }
}

(🐞 反爬虫测试！打击盗版⚠️）如果你看到这个信息, 说明这是一篇剽窃的文章，请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章！

refs

---

---

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---