browser-dev-tools
使用 Chrome DevTools MCP 进行前端页面调试、布局优化、性能诊断及交互验证。
Best use case
browser-dev-tools is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
使用 Chrome DevTools MCP 进行前端页面调试、布局优化、性能诊断及交互验证。
Teams using browser-dev-tools should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/browser-dev-tools/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How browser-dev-tools Compares
| Feature / Agent | browser-dev-tools | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
使用 Chrome DevTools MCP 进行前端页面调试、布局优化、性能诊断及交互验证。
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# 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` 并查看其快照，确保符合 [设计系统规范](src/frontend/docs/design-system.md)。 - **清理工作**：如果打开了新页面或开始了追踪，操作结束后记得关闭或停止。 ## 使用示例 - “请帮我检查 `/articles/new` 页面在 iPhone 12 尺寸下的布局，如果提交按钮被遮挡请修复 CSS。” - “这个组件渲染太慢了，请运行性能追踪，找出占用主线程最长的任务。” - “自动填充该注册表单，并告诉我在点击注册后，控制台是否输出了任何网络错误。”
Related Skills
browserless-automation
Automate Browserless tasks via Rube MCP (Composio). Always search tools first for current schemas.
browserhub-automation
Automate Browserhub tasks via Rube MCP (Composio). Always search tools first for current schemas.
browserbase-tool-automation
Automate Browserbase Tool tasks via Rube MCP (Composio). Always search tools first for current schemas.
browser-tool-automation
Automate Browser Tool tasks via Rube MCP (Composio). Always search tools first for current schemas.
browser-extension-builder
Expert in building browser extensions that solve real problems - Chrome, Firefox, and cross-browser extensions. Covers extension architecture, manifest v3, content scripts, popup UIs, monetization ...
anthropic-dev-tools-mcp-builder
Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).
ai-image-tools
Generate and edit images using either OpenAI GPT Image 1.5 or Google's Nano Banana Pro (Gemini 3 Pro Image). Use when the user asks to generate/create/edit/modify images. Supports image-to-image editing for both providers and optional mask-based inpainting for OpenAI.
agent-ops-tools
Detect available development tools at session start. Saves to .agent/tools.json and warns about missing required tools. Works with or without aoc CLI installed.
browser-test
Execute browser-based UI testing using Chrome MCP tools. Tests user interactions, visual outcomes, captures evidence. Use for UI features after implementation and security review.
browser-debugging
Use when debugging frontend issues in the browser. Covers DevTools usage, network debugging, performance profiling, and console patterns.
browser-api-usage-rules
Rules for effectively utilizing Chrome's browser APIs, including error handling and scheduling tasks.
agent-browser
Use when you need to reproduce or debug web UI flows (especially auth/OIDC) via the Agent Browser CLI, capture snapshots/screenshots, and extract redirect URLs and on-page errors deterministically. Includes install/setup guidance when the CLI is missing.