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

相关推荐
工业传感笔记7 小时前
烘道高温检测失效频发:耐高温接近开关的选型逻辑与国产化落地
其他·自动化
时间的情敌7 小时前
《回顾 2018 前端:Vue2 成熟期,Webpack4 发布,PWA 大火》
前端
Java后端的Ai之路7 小时前
前端技术Vue-09-webpack-vuejs-实战
前端·vue.js·webpack
LMT流氓兔7 小时前
第五单元——第4课:给工具参数加校验
java·前端·算法·ai·langchain
涛涛ing8 小时前
React Compiler正式“Rust化”:你项目里的Babel插件,正在被编译进打包器
前端
河北稳控科技8 小时前
钢筋应力计 应力与温度同步监测
自动化·工程监测·测量仪器·岩土工程
迷迭绿8 小时前
Cesium 轨迹回放播放器
前端·javascript·cesium
HolySaga8 小时前
我用 UTS 写了一个三端同构的蓝牙插件(Android / iOS / 鸿蒙 NEXT),把踩过的坑都讲给你听
前端
程序员老赵8 小时前
Docker 部署 XWiki:轻松搭建企业知识库与协作 Wiki
前端·docker·开源
console.log('npc')8 小时前
第 10 章 更多业务模块扩展
前端·人工智能·大模型