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

相关推荐
天平35 分钟前
油猴脚本创建webworker踩坑记录
前端·javascript·typescript
原则猫2 小时前
前端基础大厦
前端
陈随易3 小时前
编程语言级别的Skill市场,AI Agent 的未来形态
前端·后端·程序员
SoaringHeart4 小时前
Flutter进阶:基于 EasyRefresh 的下拉刷新封装 n_easy_refresh_mixin.dart
前端·flutter
IT_陈寒6 小时前
Vite的热更新突然不香了,排查三小时差点砸键盘
前端·人工智能·后端
子兮曰6 小时前
Agency-Agents 深度解析:400+ AI 专家的"梦之队"如何重塑开发工作流
前端·后端·vibecoding
竹林8187 小时前
用 The Graph 查询链上数据实战:从手搓 RPC 到 Subgraph,我的 NFT 项目数据加载快了 10 倍
前端·javascript
妙码生花7 小时前
从 PHP 到 AI + Golang,程序员自救转型手记(十九):点选验证码代码逐行目检
前端·后端·go
Awu12278 小时前
⚡从零开发 Agent CLI(五)实现一个可治理、可扩展的工具系统
前端·人工智能·claude
咪库咪库咪8 小时前
Vue3-生命周期
前端