背景

Chrome DevTools MCP 可以让 AI 助手通过远程调试协议直接操作和调试 Electron 应用。

配置步骤

1. 启用 Electron 远程调试

在 Electron 主进程中添加调试端口配置：

// 仅在开发环境启用
if (process.env.NODE_ENV === 'development') {
  app.commandLine.appendSwitch('remote-debugging-port', '9492');
  app.commandLine.appendSwitch('remote-allow-origins', '*');
}

2. 配置 MCP 服务

Claude Desktop 配置

编辑 ~/.claude.json：

{
  "mcpServers": {
    "chrome-mcp-electron": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--browser-url=http://127.0.0.1:9492"
      ],
      "env": {}
    }
  }
}

Cursor 配置

在 Cursor 的 MCP 配置中添加：

{
  "chrome-devtools": {
    "command": "npx",
    "args": [
      "chrome-devtools-mcp@latest",
      "--browser-url=http://127.0.0.1:9492"
    ]
  }
}

使用

  1. 启动 Electron 应用（开发模式）
  2. 打开 Claude Desktop 或 Cursor
  3. 使用 MCP 工具调试应用页面

注意事项

  • 端口 9492 可以自定义，但需确保配置一致
  • 仅在开发环境启用远程调试，生产环境会有安全风险
  • 确保防火墙允许本地端口访问