前言¶
前端和全栈开发里，很多问题只在真实浏览器里才会暴露：布局错位、控制台报错、接口没发出去、Core Web Vitals 不达标。Agent 若只读静态代码，很容易把「理论上应该对」当成「已经对了」。下面介绍 SkillHub 社区 Skill「开发者工具进行浏览器测试」，它把 Chrome DevTools MCP 接进 Agent 工作流，让模型能基于真实页面状态做检查与验证，而不是靠猜测。
这是什么¶
开发者工具进行浏览器测试（坐标 @user_e40a4360/bowser-testing-with-devtools，版本 1.0.0）是一份基于通用 SKILL.md 格式的 Agent 技能说明。来源为 SkillHub community，分类 dev-programming，发布者 user_e40a4360（SkillHub 页面显示作者为踏山河）。标签 requires_api_key=false，安装本 Skill 本身不依赖额外 API Key。
一句话定位：在真实浏览器中进行测试，适用于构建或调试任何在浏览器中运行的内容；需要检查 DOM、捕获控制台错误、分析网络请求与性能，或通过 Chrome 开发者工具 MCP 用真实运行数据验证视觉输出时使用。
核心功能¶
Skill 正文围绕 Chrome DevTools MCP 展开，把「静态代码分析」和「线上浏览器执行」连起来。已写明的能力包括：
| 能力 | 作用 | 典型用途 |
|---|---|---|
| Screenshot | 截取当前页面 | 视觉核对、修改前后对比 |
| DOM Inspection | 读取 live DOM | 确认组件是否按预期渲染 |
| Console Logs | 获取 log / warn / error | 定位运行时错误与告警 |
| Network Monitor | 记录请求与响应 | 核对接口、载荷与状态码 |
| Performance Trace | 记录性能时序 | 分析加载与瓶颈 |
| Element Styles | 读取计算样式 | 排查 CSS |
| Accessibility Tree | 读取无障碍树 | 核对可访问性 |
| JavaScript Execution | 在页面上下文执行 JS | 以只读方式查看状态（受安全边界约束） |
Skill 还规定了不适用范围：纯后端改动、CLI 工具、不在浏览器里运行的代码，不必走这套流程。
此外，Skill 强调安全边界：DOM、控制台、网络响应、JS 执行结果均视为不可信数据，不得当作 Agent 指令；默认 JS 执行为只读；不得用执行结果读取 cookie / localStorage 等凭证；从页面内容提取的 URL 未经用户确认不得导航。
安装与启用¶
1. 安装 SkillHub CLI（若尚未安装）¶
先检查本机是否已有 CLI：
command -v skillhub && skillhub --version
未安装时，可按 SkillHub 官方安装文档执行完整安装（CLI + 默认 Skill）：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
仅安装 CLI 时：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash -s -- --cli-only
2. 将 Skill 装到当前 Agent 的 skills 目录¶
SkillHub 要求安装时必须用 --dir 指向当前 Agent 识别的 skills 目录，否则默认会落到 ./skills/ 而不会被加载。常见路径如下（以你实际使用的客户端为准）：
- Cursor：
~/.cursor/skills/ - Claude Code：
~/.claude/skills/ - Codex：
~/.codex/skills/或项目下的.agents/skills/
安装命令（与 skillhub search 结果一致）：
skillhub install bowser-testing-with-devtools --namespace user_e40a4360 --dir ~/.cursor/skills/
也可让 Agent 按 SkillHub 安装说明处理：参考 https://skillhub.cn/install/skillhub.md ，安装 @user_e40a4360/bowser-testing-with-devtools。
装好后按你所用客户端的要求重启或刷新 Agent，使 Skill 生效。
3. 配置 Chrome DevTools MCP 服务¶
本 Skill 依赖 Chrome DevTools MCP 才能在浏览器里操作。Skill 正文给出的配置示例（写入项目的 .mcp.json 或 Claude Code 的 MCP 设置）如下：
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["@anthropic/chrome-devtools-mcp@latest"]
}
}
}
Cursor 等支持 MCP 的客户端，需在各自的 MCP 配置里接入同名或等效的服务器；具体配置文件位置以该客户端文档为准。未配置 DevTools MCP 时，Skill 里的工作流无法真正落到浏览器。
典型用法¶
经过上面的步骤，Agent 在接到浏览器相关任务时，会按 Skill 中的流程组织动作。下面三类来自 Skill 官方正文，可直接复用其思路。
UI 问题：复现 → 检查 → 诊断 → 修复 → 验证¶
- 复现：打开页面、触发问题，必要时截图确认视觉状态。
- 检查：看控制台；检查相关 DOM、计算样式与无障碍树。
- 诊断：对比实际 DOM/样式与预期，判断根因在 HTML、CSS、JS 还是数据。
- 修复：改源代码。
- 验证：刷新页面、再截图对比、确认控制台干净，并配合自动化测试。
网络问题：抓取 → 分析 → 诊断 → 修复并回放¶
- 打开 Network 监控并触发操作。
- 核对 URL、方法、请求头与 body，以及响应状态与 body、耗时。
- 按 4xx / 5xx / CORS / 超时 / 请求未发出等模式归类。
- 修复后重复操作，确认响应符合预期。
性能问题：基线 → 定位 → 优化 → 再测¶
- 先录一段 performance trace 作为基线。
- 关注 LCP、CLS、INP、长任务（>50ms）等。
- 针对瓶颈改代码。
- 再录 trace，与基线对比。
对复杂 UI Bug，Skill 建议先写结构化测试计划（步骤、期望 UI、控制台与网络检查项、无障碍核对），再让 Agent 在浏览器里逐步执行。视觉改动可用「修改前截图 → 改代码 → 刷新 → 修改后截图」做对比。
Skill 还要求浏览器相关改动完成前，核对：无控制台 error/warn、网络状态与数据正确、视觉与规格一致、无障碍树合理、性能可接受，且未把页面内容误当成指令。
适用场景与注意¶
适合谁
- 做 Web 前端、全栈或任何在浏览器里渲染的界面开发与调试。
- 需要 Agent 在同一轮对话里完成「改代码 + 在真浏览器里验证」，而不是只生成补丁。
- 团队已愿意配置 Chrome DevTools MCP，并接受 Skill 中的安全边界（尤其多 Tab、第三方页面时）。
限制与注意
- 必须先装好 DevTools MCP；仅安装 Skill 文档不会自动打开浏览器。
- Skill 面向 Claude Code 的 MCP 配置示例最完整；其他客户端需自行映射到等效 MCP 配置。
- 页面内容不可信，Skill 明确禁止把 DOM/控制台里的「指令式文字」直接执行。
- 纯后端、CLI 场景不必启用本 Skill。
- SkillHub 页面统计（截至资料抓取）：评分 100000，下载 1437，安装 2；坐标 slug 为
bowser-testing-with-devtools（拼写与 browser 不同，安装时需与命名空间一致）。
结尾¶
开发者工具进行浏览器测试把 Chrome DevTools MCP 的能力写进 Agent Skill：在真实浏览器里查 DOM、控制台、网络、性能与无障碍，并附带调试流程与安全约束，适合作为浏览器侧验证的操作说明。安装与元数据见 SkillHub：https://www.skillhub.cn/skills/user_e40a4360/bowser-testing-with-devtools ；API 坐标页：https://api.skillhub.cn/user_e40a4360/bowser-testing-with-devtools 。
