diegosouzapw Browser DevTools - 浏览器级研发调试
此 Skill 允许 AI 直接与实际运行的浏览器窗口交互，通过 DevTools 协议实现精准的 UI 修补和性能优化。
何时使用此 Skill
- 样式微调：需要观察组件在不同屏幕尺寸下的布局表现。
- 深度调试：控制台报错、网络请求失败或复杂的各种竞态条件。
- 性能评估：测量 C# 或 Vue 变更后对浏览器渲染管道（LCP, CLS）的实际影响。
- UI 验收：自动执行点击流并截图以确认交互逻辑。
核心工具流
1. 现状感知 (Initial Assessment)
在开始任何修改前，先观察页面：
list_pages: 找到目标页面索引。capture_screenshot: 获取视觉反馈，确认当前样式。text_snapshot: 获取无障碍树和 UID，确定要操作的元素。
2. 交互验证 (Interaction)
click: 模拟点击。fill_form: 批量填充测试数据。evaluate_script: 执行 JS 检查当前组件状态（如__vue_app__数据）。
3. 样式与布局调优 (Design Inspection)
- 使用
resize_page切换移动端/桌面端。 - 使用
capture_screenshot配合evaluate_script修改运行时 CSS，实时验证效果。
4. 性能与错误诊断 (Diagnostics)
list_console_messages: 定位 runtime errors。performance_start_trace: 开始性能采样。performance_analyze_insight: 分析特定性能瓶颈（如 DocumentLatency 或 LCPBreakdown）。
最佳实践规范
- 调试优先：在修改持久化代码前，先尝试用
evaluate_script手动改动运行时 DOM/CSS 以验证猜想。 - 对比一致性：在优化样式后，必须取
capture_screenshot并查看其快照，确保符合 设计系统规范。 - 清理工作：如果打开了新页面或开始了追踪，操作结束后记得关闭或停止。
使用示例
- “请帮我检查
/articles/new页面在 iPhone 12 尺寸下的布局，如果提交按钮被遮挡请修复 CSS。” - “这个组件渲染太慢了，请运行性能追踪，找出占用主线程最长的任务。”
- “自动填充该注册表单，并告诉我在点击注册后，控制台是否输出了任何网络错误。”