Browser Testing with DevTools - 实时浏览器调试与前端自动化测试

Browser Testing with DevTools - 实时浏览器调试与自动化测试

技能概述

Browser Testing with DevTools 是一个通过 Chrome DevTools MCP 为智能体提供实时浏览器视觉能力的技能，让智能体能直接检查 DOM、捕获控制台错误、分析网络请求、追踪性能数据，并验证页面在真实浏览器环境中的渲染效果。

适用场景

构建或调试浏览器渲染内容：当你开发或修改任何在浏览器中运行的代码（React、Vue、普通网页）时，该技能让你直接看到页面的真实状态，而不是依赖猜测或静态代码分析。

诊断前端运行时问题：当页面出现布局错乱、样式异常、交互失效或控制台报错时，智能体可以实时检查 DOM 结构、读取计算样式、分析控制台日志和网络请求，快速定位根本原因。

验证修复效果与性能：在修复 bug 或优化性能后，可以通过截图对比、性能追踪和可访问性树检查，确认改动是否真正解决了问题，没有引入新的错误或性能退化。

核心功能

实时浏览器状态检查：支持截取页面状态、检查 DOM 树结构、读取元素计算样式、查看可访问性树，让智能体能像开发者一样"看到"浏览器中的实际渲染结果。

运行时数据捕获：可以获取控制台日志（log、warn、error）、监控网络请求与响应、记录性能指标（LCP、CLS、INP、长任务），帮助诊断前端错误、API 调用问题和性能瓶颈。

安全可控的 JavaScript 执行：在页面上下文中运行只读 JavaScript 代码，用于检查应用状态、查询 DOM 或验证数据，同时严格限制外部请求和凭证访问，确保测试过程安全可控。

常见问题

Chrome DevTools MCP 是什么？如何安装？

Chrome DevTools MCP 是一个让智能体能连接和控制 Chrome DevTools 的 MCP 服务器。安装方法是在项目的 .mcp.json 或 Claude Code 设置中添加配置：

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

默认使用独立的临时浏览器配置，不会影响你的个人浏览器数据。如需测试需要登录状态的功能，建议创建单独的测试配置文件。

浏览器测试和单元测试有什么区别？

单元测试验证代码逻辑是否正确，但无法测试 CSS 布局、真实浏览器渲染、网络行为和性能问题。浏览器测试通过 Chrome DevTools MCP 在真实浏览器环境中执行，可以检查 DOM 结构、验证样式是否正确应用、分析网络请求是否发送、测量页面加载性能，这些都是单元测试覆盖不到的。

两者互补：单元测试保证代码逻辑，浏览器测试保证实际运行效果。

使用这个技能安全吗？会不会泄露我的登录信息？

该技能设计了多层安全保护。首先，默认使用独立的临时浏览器配置（--isolated），与你的日常浏览器完全隔离。其次，所有从浏览器读取的内容（DOM、控制台日志、网络响应）都被视为"不受信任的数据"，智能体不会将其解释为指令。第三，JavaScript 执行被限制为只读操作，禁止读取 cookies、localStorage 等凭证材料。

如果你确实需要测试需要登录的功能，建议创建专门的测试配置文件，只登录测试账号，避免智能体接触到你的敏感会话。

browser-testing-with-devtools

作者

分类

安装