Claude桌面App使用chrome Devtools MCP

Chrome 官方推出了 MCP 工具，也就是 AI 可以方便操作 Chrome 部分功能了。这里我测试玩一下，因为平时搞文章翻译之类的，流程总是，翻译，打开网页，拷贝粘贴，有了 MCP，按理可以自动化。实际操作发现配置还有坑，因此这里 mark 下。

安装 chrome Devtools Mcp

理论上 Claude 下增加如下配置即可，但注意 mcp 程序依赖于 node,因此不同 mcp 可能版本要求不同，比如 chrome-devtools-mcp 要求 node22+。

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

注意：配置文件修改需要重启 Claude App。

nvm 下安装 chrome-devtools-mcp 会有报错。

比如我的 Mac 下有使用 nvm 进行 node 版本管理，本地有 16-22 N 个版本。而上面也提到了 chrome-devtools-mcp 要求 node22+，因此如果当前 nvm 使用的版本低于 22，则会报错。

Claude 使用的哪个版本呢？目前来看使用的是第一个版本，因此比如我这里就是 v16。如何解决呢

1. 本地卸载 22 以下版本
2. 直接配置里换成本地方式使用 chrome-devtools-mcp

这里由于开发需要我选择方案 2。因此 Claude 下配置就会是这。

npm install -g chrome-devtools-mcp

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "/Users/alanhe/.nvm/versions/node/v22.15.1/bin/node",
      "args": [
        "/Users/alanhe/.nvm/versions/node/v22.15.1/lib/node_modules/chrome-devtools-mcp/build/src/index.js"
      ]
    }
  },
  "globalShortcut": ""
}

实际测试 OK。

Claude Project 下使用 MCP

实际使用场景里，我经常是在 Project 下使用 MCP。发现提示词在编写时需要注意，比如明确要求 AI 严格执行步骤，比如某一步打开网页之类的，这样可以尽可能确保 MCP 执行生效，否则会出现不 work 的问题。

写在最后

1. 目前 chrome-devtools-mcp 功能是 OK 的，但是我发现比如让它执行打开网页，拷贝内容到网页中的某个输入框，看到一个字还是打字机效果，因此很慢，够慢的话，那就还不如人工了，因此个人觉得目前 chrome-devtools-mcp 的实用性不高。但可以尝尝鲜。

相关文档

• https://github.com/ChromeDevTools/chrome-devtools-mcp/?tab=readme-ov-file#chrome-devtools-mcp
• https://github.com/modelcontextprotocol/servers/issues/64