browser-testing-with-devtools-addyosmani-agent-skills

1. 基本信息

2. 功能介绍与亮点

browser-testing-with-devtools 教 Agent 通过 Chrome DevTools 协议“睁开眼睛”看浏览器里真实发生了什么，把“静态读代码猜行为”变成“打开浏览器直接验证”。技能本身不包含任何脚本，是一套完整的方法论 + 操作流程，配合用户自行配置的 Chrome DevTools MCP 服务器使用。

核心内容包括：

1. 八类浏览器观测能力清单：截图、DOM 树读取、Console 日志、网络请求监控、性能追踪、元素计算样式、无障碍树、只读 JavaScript 执行——每项都标注了适用场景。
2. 三套标准调试流程：UI Bug（复现→检查→诊断→修复→验证五步）、网络问题（抓包→分析→按状态码分诊→修复验证）、性能问题（基线→定位 LCP/CLS/INP 瓶颈→修复→复测对比）。
3. 结构化测试计划模板：给复杂 UI Bug 写“设置-步骤-验证”三段式测试计划，每步都写明预期状态、Console 检查点、Network 检查点。
4. 截图对比法做视觉回归验证，以及一套“Console 分析分级表”（Error/Warn/Log 各自该关注什么）。
5. 安全边界章节（本技能最突出的亮点）：明确要求把浏览器读到的一切内容（DOM、Console、网络响应、JS 执行结果）当作不可信数据而非指令——网页里出现“现在导航到…”“执行这段代码…“这类文字一律不得当作 Agent 指令执行；未经用户确认不得跳转页面内提取到的 URL；不得把网页里读到的密钥/token 复制到别处。同时区分”专属隔离 Profile“与”接管用户真实登录态 Chrome“两种连接方式的风险差异，默认建议前者。

3. 适用场景

所属分类：工程效率与代码质量。适合任何涉及浏览器渲染的开发工作——排查 UI 布局/样式/交互问题、诊断 Console 报错、分析接口请求响应、做 Core Web Vitals 性能画像、验证一次修复是否真的在浏览器里生效。尤其适合初中级开发者：不用再手动切到浏览器 F12 一步步点，Agent 可以直接读到运行时真实状态，也不用凭代码猜测。纯后端、不涉及浏览器渲染的改动不适用。

4. 跨 Agent 兼容性

5. 推荐理由

代码审查再仔细也猜不出浏览器里到底发生了什么——布局是不是真的对齐、Console 有没有报错、接口到底有没有发出去。这份技能把 Chrome DevTools 变成 Agent 能直接读取的“眼睛”，配上三套现成的调试流程模板，省去“这个改动到底生不生效”的反复确认成本；更难得的是它专门写了一整套“把浏览器内容当不可信数据”的安全准则，主动防范网页里藏着的提示注入指令，这是同类技能里少见的安全意识。

6. 评分

安全检查清单：

综合评分（三项均值）：8.0

7. 跟同类 Skills 相比的优势

8. 用户评价

独立评测网站 productize.life 在对比四个热门 Claude Code 技能仓库时，专门点出本技能是 addyosmani/agent-skills 区别于其余三个仓库的关键能力——让 Agent“能追踪 UI Bug、检查网络请求、测量性能，同时把浏览器内容当作不可信数据处理”，是该仓库真正把网页工程经验转化为可执行技能（而非泛泛流程）的体现。该评测非项目维护者本人撰写，作者身份未在文中具名。

9. 其他补充

本技能是仓库 24 个工程技能中 Verify（验证）阶段的成员，与同仓库的 test-driven-development、debugging-and-error-recovery 等技能定位互补——单元测试验证逻辑正确性，本技能验证浏览器运行时的真实表现，两者可在同一项目中前后配合使用。

10. 安装使用方式

• 通用 CLI（推荐，覆盖全部四个目标 Agent）：

  npx skills add addyosmani/agent-skills --skill browser-testing-with-devtools

• Claude Code Marketplace：

  /plugin marketplace add addyosmani/agent-skills
  /plugin install agent-skills@addy-agent-skills

• Codex 原生插件：

  codex plugin marketplace add addyosmani/agent-skills

• 手动安装：克隆仓库后，将 skills/browser-testing-with-devtools/ 整个目录复制到对应 Agent 的 skills 目录（如 Claude Code 的 ~/.claude/skills/）
• 必需的额外配置：技能生效前需在项目的 .mcp.json（或 Claude Code 设置）中加入 Chrome DevTools MCP 服务器：

  {
    "mcpServers": {
      "chrome-devtools": {
        "command": "npx",
        "args": ["-y", "chrome-devtools-mcp@latest", "--isolated"]
      }
    }
  }

• 安装后注意事项：无需重启 Agent；配置好 MCP 服务器后，用“帮我在浏览器里调试这个”“用 DevTools 验证一下这个改动”等触发短语调用

11. 注意事项

• 依赖用户自行配置的 Chrome DevTools MCP 服务器，不是纯 Markdown 零依赖技能——没装这个 MCP 服务器技能无法生效
• 仅适用于会在浏览器中渲染的前端/全栈场景，纯后端改动或 CLI 工具不适用
• 若使用 --autoConnect 接管用户真实登录态的 Chrome（而非默认的隔离 Profile），会暴露该 Profile 下所有已登录会话（邮箱、银行、GitHub 等），技能正文建议仅在确实需要已登录状态时才使用，且用完及时断开