browser-debugger

浏览器调试器（Browser Debugger）是专为 Web 开发人员和 QA 工程师设计的专业级技能，旨在自动化 UI 验证与调试工作流程。通过与 Chrome DevTools MCP 的直接整合，代理程序可以检查 DOM 结构、监控网络流量、捕获控制台错误，并对渲染页面进行视觉分析。它是程序实现与实际视觉输出之间的桥梁，确保开发成果完美符合设计规格。

• 执行自动化视觉回归测试，以检测版面位移、CSS 样式不一致及组件对齐错误。

• 通过 Claudish 使用先进的视觉语言模型（如 Qwen, Gemini 或 GPT-4o），针对参考图进行设计一致性验证。

• 监控浏览器控制台输出，捕获运行期错误、警告及性能瓶颈，并提供可操作的调试报告。

• 追踪网络请求以验证 API 交互，即时识别请求失败或数据负载差异。

• 支持表单与交互测试，让代理程序能够模拟用户操作流程并验证应用程序状态的变更。

• 此技能最适用于功能实现后的验证阶段、回归测试周期，或处理用户回报的浏览器端错误时使用。

• 前置作业包括安装 Chrome DevTools MCP 服务器，并可选配 OpenRouter API 密钥以获得高质量的视觉分析能力。

• 为保持执行效率，该技能提供多层级模型选择指南，允许用户根据测试需求平衡执行速度、成本与分析深度。

• 支持将视觉模型偏好设置进行持久化保存，确保跨工作阶段的一致性。

• 建议在首次分析阶段通过交互式提示选择视觉模型，以优化 Token 使用效率与准确度。执行测试序列前，请务必确认已安装并启动 Chrome DevTools MCP。