Browser DevTools - 浏览器级研发调试

此 Skill 允许 AI 直接与实际运行的浏览器窗口交互，通过 DevTools 协议实现精准的 UI 修补和性能优化。

何时使用此 Skill

**样式微调**：需要观察组件在不同屏幕尺寸下的布局表现。

**深度调试**：控制台报错、网络请求失败或复杂的各种竞态条件。

**性能评估**：测量 C# 或 Vue 变更后对浏览器渲染管道（LCP, CLS）的实际影响。

**UI 验收**：自动执行点击流并截图以确认交互逻辑。

在开始任何修改前，先观察页面：

`list_pages`: 找到目标页面索引。

`capture_screenshot`: 获取视觉反馈，确认当前样式。

`text_snapshot`: 获取无障碍树和 UID，确定要操作的元素。

`click`: 模拟点击。

`fill_form`: 批量填充测试数据。

`evaluate_script`: 执行 JS 检查当前组件状态（如 `__vue_app__` 数据）。

使用 `resize_page` 切换移动端/桌面端。

使用 `capture_screenshot` 配合 `evaluate_script` 修改运行时 CSS，实时验证效果。

`list_console_messages`: 定位 runtime errors。

`performance_start_trace`: 开始性能采样。

`performance_analyze_insight`: 分析特定性能瓶颈（如 DocumentLatency 或 LCPBreakdown）。

**调试优先**：在修改持久化代码前，先尝试用 `evaluate_script` 手动改动运行时 DOM/CSS 以验证猜想。

**对比一致性**：在优化样式后，必须取 `capture_screenshot` 并查看其快照，确保符合 [设计系统规范](src/frontend/docs/design-system.md)。

**清理工作**：如果打开了新页面或开始了追踪，操作结束后记得关闭或停止。

“请帮我检查 `/articles/new` 页面在 iPhone 12 尺寸下的布局，如果提交按钮被遮挡请修复 CSS。”

“这个组件渲染太慢了，请运行性能追踪，找出占用主线程最长的任务。”

“自动填充该注册表单，并告诉我在点击注册后，控制台是否输出了任何网络错误。”