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

在命令行下运行:

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

查看帮助信息

bash 复制代码
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 the
                        browser is closed.                                                    [boolean] [default: false]
      --channel         Specify a different Chrome channel that should be used. The default is the stable channel
                        version.                                   [string] [choices: "stable", "canary", "beta", "dev"]
      --logFile         Path to a file to write debug logs to. Set the env variable `DEBUG` to `*` to enable verbose
                        logs. 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 instance
  http://127.0.0.1:9222
  npx chrome-devtools-mcp@latest --channel beta                 Use Chrome Beta installed on this system
  npx chrome-devtools-mcp@latest --channel canary               Use Chrome Canary installed on this system
  npx chrome-devtools-mcp@latest --channel dev                  Use Chrome Dev installed on this system
  npx chrome-devtools-mcp@latest --channel stable               Use stable Chrome installed on this system
  npx chrome-devtools-mcp@latest --logFile /tmp/log.txt         Save logs to a file
  npx 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

相关推荐
叠叠乐1 天前
robot_state_publisher 参数
java·前端·算法
Kiri霧1 天前
Range循环和切片
前端·后端·学习·golang
小张快跑。1 天前
【Java企业级开发】(十一)企业级Web应用程序Servlet框架的使用(上)
java·前端·servlet
小白阿龙1 天前
Flex布局子元素无法垂直居中
前端
秋田君1 天前
前端工程化部署入门:Windows + Nginx 实现多项目独立托管与跨域解决方案
前端·windows·nginx
江城开朗的豌豆1 天前
阿里邮件下载器使用说明
前端
半兽先生1 天前
Web 项目地图选型指南:从 Leaflet 到 MapTalks,如何选择合适的地图引擎?
前端
hssfscv1 天前
Javaweb 学习笔记——html+css
前端·笔记·学习
Mr.Jessy1 天前
JavaScript高级:深浅拷贝、异常处理、防抖及节流
开发语言·前端·javascript·学习