Agent Skills
返回列表
🤖

Chrome 开发者工具 MCP

AI Agent 更新于 2026.08.30

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_3c6cb52e/chrome-devtools-mcp-png 到 AI 助手中。

技能介绍

浏览器调试能力为何是 Agent 的短板

前端开发中的很多问题只有在运行时才暴露——控制台报错、网络请求失败、DOM 结构与预期不符。AI Agent 如果只能读代码，就无法验证这些运行时状态。Chrome DevTools 是前端开发者排查问题的首选工具，但它的交互界面是为人类设计的，Agent 需要通过协议层才能调用其中的调试能力。

技能结构与工作方式

chrome-devtools-mcp 将 Chrome DevTools 的调试能力封装为 Agent 可调用的 MCP 工具集合。技能包含 6 个子技能文件，分别对应不同的调试场景。Agent 框架通过 MCP 协议发现并调用这些工具。

实际工作时，Agent 可以：

  • 将浏览器调试操作转化为 MCP 工具调用
  • 通过子技能文件定位到具体的调试场景
  • 读取浏览器返回的结构化结果并继续推理

适用边界

该技能兼容 Claude Code、Codex、Hermes Agent、OpenClaw、QClaw、WorkBuddy 等平台。需要注意：技能的实际能力取决于 Chrome DevTools Protocol 的覆盖范围以及子技能文件的具体设计。对于需要深度性能分析或复杂网络抓包的场景，应先确认对应子技能是否提供了相应工具。此外，运行环境需要有可用的 Chrome 浏览器实例。

使用场景

  • 前端页面上线后发现控制台报错，需要 AI Agent 直接驱动浏览器定位并修复运行时错误
  • 接口请求在生产环境失败但本地正常，需要通过浏览器调试工具抓取网络请求并分析响应内容
  • 页面渲染结果与设计稿不符，需要 Agent 直接检查 DOM 结构确认是哪一步逻辑出错
  • 编写自动化测试用例时需要覆盖运行时行为，AI Agent 通过 MCP 调用浏览器完成验证

适合人员

  • 前端工程师，需要在开发阶段快速定位浏览器端运行时报错并验证修复效果
  • 全栈开发者，编写自动化测试时想让 AI Agent 直接驱动浏览器验证页面行为
  • 测试工程师，排查线上环境的网络请求异常但本地环境无法复现