告别凭感觉调试chrome-devtools-mcp查看控制台日志、网络请求与截图的完整教程【免费下载链接】chrome-devtools-mcpChrome DevTools for coding agents项目地址: https://gitcode.com/GitHub_Trending/chr/chrome-devtools-mcp还在凭感觉排查前端 Bug 吗chrome-devtools-mcpChrome DevTools for agents是一个运行在 AI 编码助手背后的 MCP 服务器让你的 Agent如 Claude、Cursor、Copilot 等直接操控真实的 Chrome 浏览器——查看控制台日志、分析网络请求、截取页面截图甚至录制性能轨迹。从此调试不再靠猜AI 也能像开发者一样眼见为实。一、chrome-devtools-mcp 是什么简单说它是一个Chrome DevTools MCP 服务器把浏览器调试能力翻译给 AI Agent 使用能力说明控制台日志读取 console 报错并附带上来源映射后的调用栈网络请求列出最近请求、按资源类型过滤、查看请求/响应体页面截图整页或指定元素截图支持 png/jpeg/webp可靠自动化基于 Puppeteer 执行点击、填表并自动等待结果核心源码分布在 src/tools/console.ts、src/tools/network.ts、src/tools/screenshot.ts完整工具清单可参考 docs/tool-reference.md。二、最快安装方法3 步接入你的 MCP 客户端环境要求Node.jsLTS 版本、Chrome 稳定版、npm。第 1 步在你的 MCP 客户端Claude Code、Cursor、Copilot 等配置文件中加入{ mcpServers: { chrome-devtools: { command: npx, args: [-y, chrome-devtools-mcplatest] } } }第 2 步如果你只需要基础浏览器任务导航 执行脚本 截图加上--slim --headless进入精简模式详见 docs/slim-tool-reference.md。第 3 步在对话框输入第一句测试 Prompt打开 https://example.com 并截取一张页面截图客户端会自动启动浏览器并完成截图。注意只有当 Agent 调用需要浏览器的工具时浏览器才会被启动。各客户端的完整安装方式见 README.md 的 MCP Client configuration 部分。三、查看控制台日志报错定位不再靠肉眼这是调试场景中最常用的两个工具list_console_messages列出全部控制台消息返回目标页面自上次导航以来的所有 console 消息支持types只过滤error、warning等特定类型includeStackTraces附带调用栈经 source-map 还原直接指向源码行pageSize/pageIdx消息量大时分页查看get_console_message深挖单条消息拿到目标消息的msgid后用它可以查看完整内容定位具体是哪一行代码抛错。试试这个 Prompt打开我的页面列出所有 error 类型的控制台消息带上调用栈告诉我第一处报错发生在哪个文件的哪一行。参数详情见 docs/tool-reference.md。四、分析网络请求找出慢接口与失败加载list_network_requests列出最近的请求返回自上次导航以来的请求列表可以resourceTypes只看xhr、fetch、image等特定资源pageSize/pageIdx请求多时分页includePreservedRequests保留最近 3 次导航的请求get_network_request查看请求详情通过reqid获取某个请求的完整信息配合requestFilePath/responseFilePath可以把请求体、响应体保存到本地文件而不是全部塞进对话上下文——对响应体很大的接口特别友好。试试这个 Prompt列出页面所有 fetch 请求找出响应时间最长的那一个把它的响应体保存到文件里。两个工具的完整参数说明见 docs/tool-reference.md。五、页面截图让 AI看见渲染结果take_screenshot页面或元素截图fullPage截取整页而非当前视口formatpng / jpeg / webpJPEG 和 WebP 比 PNG 小 3~5 倍能显著减小 AI 上下文体积uid只截某个元素uid 来自文本快照filePath保存到本地文件而不是直接返回take_snapshot文本快照比截图更省钱基于 a11y 无障碍树生成页面元素的文本快照每个元素带唯一uid供后续click、fill等操作精准定位。官方建议能用 snapshot 就不要用 screenshot信息更结构化、成本更低。试试这个 Prompt先取一个页面文本快照确认登录按钮存在后点击它再截一张整页截图保存为 login-result.png。参数详情见 docs/tool-reference.md。六、不想装 MCP直接用命令行CLI项目还自带了一个实验性 CLI方便你在终端里直接调试或让 Agent 生成自动化脚本npm i chrome-devtools-mcplatest -g chrome-devtools status # 检查后台守护进程状态 chrome-devtools new_page https://example.com # 打开新页面 chrome-devtools take_screenshot 1 --filePath shot.png # 对页面 1 截图 chrome-devtools stop # 用完即停CLI 会复用同一个后台浏览器实例保留已打开的页面和 Cookie 状态非常适合边写脚本边调试的工作流。完整用法见 docs/cli.md。七、常见配置与排错--headless无界面模式适合服务器环境--isolated使用临时用户数据目录关闭浏览器后自动清理多会话并行更安全--screenshotFormat/--screenshotMaxWidth全局调整截图格式与尺寸进一步压缩上下文--redactNetworkHeaders返回前自动打码敏感请求头注意隐私保护浏览器不启动、插件安装失败、远程调试端口连不上等常见问题可参考 docs/troubleshooting.md。总结场景工具一句话用法看报错list_console_messages列出所有 error 并带上调用栈深挖单条日志get_console_message查看 msgid 为 3 的完整内容查接口list_network_requests只列出 fetch 请求找最慢的看响应体get_network_request把响应体保存到本地文件眼见为实take_screenshot/take_snapshot截取整页 / 取文本快照chrome-devtools-mcp 把 Chrome DevTools 的调试能力完整交给了 AI Agent控制台日志、网络请求、截图三大调试利器一次配齐。装好它你的 AI 助手就能自己开浏览器、自己查报错、自己截图验证——调试从此告别凭感觉。【免费下载链接】chrome-devtools-mcpChrome DevTools for coding agents项目地址: https://gitcode.com/GitHub_Trending/chr/chrome-devtools-mcp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考