windows环境配置mcp

将chrome快捷方式的“目标”设置为

"C:Program FilesGoogleChromeApplicationchrome.exe" --remote-debugging-port=9222 --user-data-dir="%USERPROFILE%ChromeDebugProfile"

为便于区分 可以改下图标和名称
打开这个特殊的chrome 访问

若有相关json 则正常

配置ai工具的mcp

{
  "mcpServers": {
    "chrome-devtools-mcp": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--browserUrl=2"
      ]
    }
  }
}

重新开启会话 便可以让ai访问chrome页面了 可以让ai截图作为测试
注意 vscode/cursor有内置的chrome 一定要明确指明通过mcp截图

docker环境

如果mcp的实际执行位置是docker 必须通过host.docker.internal这个特殊地址访问宿主机
然而将browserUrl 设置为是无效的 因为chrome要求host必须是ipv4
因此mcp要写成这样

{
  "mcpServers": {
    "chrome-devtools-mcp": {
      "type": "stdio",
      "command": "bash",
      "args": [
        "-c",
        "docker_host_ip=$(getent ahostsv4 host.docker.internal | awk 'NR==1 {print $1; exit}') && npx -y chrome-devtools-mcp@latest --browserUrl=http://${docker_host_ip}:9222"
      ]
    }
  }
}

需要注意的是getent会取到host.docker.internal对应的所有ip 必须过滤其中的ipv4地址

另外 不是所有的mcp都会在容器中执行 copilot的mcp就是在宿主机执行的