browser-dev-tools
使用 Chrome DevTools MCP 进行前端页面调试、布局优化、性能诊断及交互验证。
>_
Quick Installnpxskills add majiayu000/claude-skill-registry--skill browser-dev-toolsInstructions
Loading…
使用 Chrome DevTools MCP 进行前端页面调试、布局优化、性能诊断及交互验证。
npxskills add majiayu000/claude-skill-registry--skill browser-dev-toolsLoading…
此 Skill 允许 AI 直接与实际运行的浏览器窗口交互，通过 DevTools 协议实现精准的 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 并查看其快照，确保符合 设计系统规范。/articles/new 页面在 iPhone 12 尺寸下的布局，如果提交按钮被遮挡请修复 CSS。”
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).