Chrome DevTools MCP 快速教程3 步让 AI 亲眼看到并操作你的浏览器【免费下载链接】chrome-devtools-mcpChrome DevTools for coding agents项目地址: https://gitcode.com/GitHub_Trending/chr/chrome-devtools-mcp用 AI 写网页最磨人的环节代码生成完你得自己开浏览器、看效果、截报错、再粘回对话框AI 一改还要重来一遍。Chrome DevTools MCPchrome-devtools-mcpGoogle 官方为 Chrome DevTools 做的 MCP 服务器直接把 AI 接到真实的 Chrome 浏览器上点、填、导航、看控制台报错、抓网络请求、跑性能追踪。说白了它给 AI 装上了一套眼睛和手不用再盲写代码。 Chrome DevTools MCP 能替你解决什么问题它底层是 Puppeteer 加 Chrome DevTools共 11 类 57 个工具。清单不用背记住它替你处理的 4 种局面就行。看到页面的真实状态AI 可以自己截图、读取页面快照结构化 DOM、录屏。你不用再替它截图描述页面长什么样它自己看。定位页面坏在哪控制台报错自带源码映射的调用栈AI 看到的是你源码里哪一行抛错而不是一串压缩后的天书。网络请求可以列出并逐个查看404、超时、响应类型不对一眼就能指出。把性能量化录一段性能追踪直接给出可执行的优化洞察也能跑 Lighthouse 审计。性能工具会顺带取 CrUX 真实用户数据和实验室数据对照着展示不想发 URL 出去用--no-performance-crux关掉即可。可靠地动手操作点击、输入、填表单、上传文件、按键都支持而且会自动等待操作结果不用你手动补等 3 秒。多字段表单用fill_form一次填完比逐个字段填更稳。 Chrome DevTools MCP 最简安装配置一段 JSON 直接粘贴前置条件三个Node.js LTS、Chrome 稳定版或更新、装好 npm。然后在你的 MCP 客户端配置里加一段{ mcpServers: { chrome-devtools: { command: npx, args: [-y, chrome-devtools-mcplatest] } } }官方文档为 25 个客户端写了现成配置Claude Code、Cursor、Copilot / VS Code、Gemini CLI、Windsurf、Warp、JetBrains AI Assistant、Antigravity、OpenCode、Qoder、Codex 等用哪个查哪个照着贴。VS Code 还有一键插件装法MCP 服务器和技能包一起带进来。两个提醒启动时浏览器不会打开第一次调用工具才会自动拉起属正常行为。只需要基础浏览任务的话args 里加--slim和--headless只暴露 3 个工具导航、执行脚本、截图。 可以直接发给 AI 的提示词配置完成后任选一条下面提示词发给你的 AICheck the performance of https://developers.chrome.com 打开我的本地首页截图看看布局哪里不对 这个页面一直报错检查控制台和网络请求告诉我原因和修复方案第一条是官方验证提示词配置成功的话你会看到它打开浏览器、录一段性能追踪并给出报告。⚠️ 避坑与细节用之前先读这段隐私边界MCP 客户端能看到浏览器实例里的全部内容。别在这个浏览器里登录敏感账号别逛不想给 AI 看的页面。远程调试端口用--browserUrl连接一个正在运行的 Chrome 时调试端口是开着的本机任何程序都能控制这个浏览器。开着端口的期间别浏览敏感网站。配置目录复用默认用一个固定的本地用户目录并且会复用想要每次干净环境加--isolated用临时配置关浏览器即清。统计默认开启工具调用成功率、延迟等使用统计默认上报加--no-usage-statistics可关。浏览器兼容性官方只保证 Google Chrome 和 Chrome for Testing 正常其他 Chromium 系浏览器行为不保证。连上没反应正常见上面浏览器首次调用工具才启动。真卡住就用--logFile加DEBUG*拿详细日志或查排障文档。常用参数--headless无界面运行--channel切 canary / beta / dev--viewport设初始视口尺寸。完整工具清单见工具参考不想走 MCP包内还有一个可直接在终端调用的 CLI用法见CLI 文档。收尾一句话Chrome DevTools MCP 是 AI 接触真实浏览器目前最稳的一座桥。给你的客户端加一行配置从那条检查页面性能的提示词开始试吧。【免费下载链接】chrome-devtools-mcpChrome DevTools for coding agents项目地址: https://gitcode.com/GitHub_Trending/chr/chrome-devtools-mcp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考