VS Code 使用 Chrome DevTools MCP 实现浏览器自动化

Chrome DevTools MCP 优势

效果远超 Browser-Use、Stagehand。
操作失误率大幅度降低。
Token 消耗低。
无需设置大模型的API Key。
原生支持Chrome浏览器，无需安装Chromium。

安装

环境要求：

1. Node.js 22.12.0 及以上版本
2. Chrome 当前稳定或最新版本
3. npm

在命令行下运行：

$code --add-mcp "{\"name\":\"chrome-devtools\",\"command\":\"npx\",\"args\":[\"chrome-devtools-mcp@latest\"]}"
Added MCP servers: chrome-devtools

查看帮助信息

npx chrome-devtools-mcp@latest --help
Options:-u, --browserUrl      Connect to a running Chrome instance using port forwarding. For more details see:https://developer.chrome.com/docs/devtools/remote-debugging/local-server.               [string]--headless        Whether to run in headless (no UI) mode.                              [boolean] [default: false]-e, --executablePath  Path to custom Chrome executable.                                                       [string]--isolated        If specified, creates a temporary user-data-dir that is automatically cleaned up after thebrowser is closed.                                                    [boolean] [default: false]--channel         Specify a different Chrome channel that should be used. The default is the stable channelversion.                                   [string] [choices: "stable", "canary", "beta", "dev"]--logFile         Path to a file to write debug logs to. Set the env variable `DEBUG` to `*` to enable verboselogs. Useful for submitting bug reports.                                                [string]--help            Show help                                                                              [boolean]--version         Show version number                                                                    [boolean]Examples:npx chrome-devtools-mcp@latest --browserUrl                   Connect to an existing browser instancehttp://127.0.0.1:9222npx chrome-devtools-mcp@latest --channel beta                 Use Chrome Beta installed on this systemnpx chrome-devtools-mcp@latest --channel canary               Use Chrome Canary installed on this systemnpx chrome-devtools-mcp@latest --channel dev                  Use Chrome Dev installed on this systemnpx chrome-devtools-mcp@latest --channel stable               Use stable Chrome installed on this systemnpx chrome-devtools-mcp@latest --logFile /tmp/log.txt         Save logs to a filenpx chrome-devtools-mcp@latest --help                         Print CLI options

查看配置：

这里不是默认的Chrome执行路径(C:\Program Files\Google\Chrome\Application\chrome.exe)，所以单独配置了。

选择 Agent 模式

打开对话框（Ctrl+Alt+I），模式选择Agent：

自动启动 MCP 服务

工具里，选择有效的MCP服务器：

测试

相关链接

https://code.visualstudio.com/docs/copilot/customization/mcp-servers#_add-an-mcp-server
https://github.com/ChromeDevTools/chrome-devtools-mcp