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

相关推荐
禁止摆烂_才浅11 小时前
JavaScript 类型判断:instanceof 与 constructor 原理深度解析
前端·javascript·面试
gezg11 小时前
DeepSeek Harness 插件:Excel 拖进输入框,AI 自己去读文件
前端·ai编程
Asize11 小时前
HTTP 明明无状态,登录态怎么就保住了——React + Zustand + JWT 鉴权全流程拆解
前端·javascript
两只羊ovo11 小时前
MCP:AI 界的 USB-C,把模型和世界「插」起来
前端
Darling噜啦啦11 小时前
JWT 登录鉴权全链路:从 Zustand 状态管理到 Axios 拦截器,彻底搞懂前端鉴权工程
前端
可涵不会debug11 小时前
LangChain 示例选择器(Example selectors)完整基础概念解读
服务器·前端·数据库
Csvn11 小时前
😱 React `<StrictMode>`:为什么 useEffect 被调用了两次?别慌,这是特性不是 bug
前端
Asize11 小时前
2 道大厂面试题:TS 工具类型我懂了,CSS 3 列布局把我问住了
前端·css·typescript
胡萝卜术11 小时前
从"氛围编程"到规范驱动:两次创造如何让 AI 协作从碰运气变成工程流水线
前端·面试·github
Imchendiana11 小时前
《狂人日记NO.11》— 给 AI 装一本"项目说明书":我把"自己"蒸馏成了一个编码知识库Skill
前端·ai编程