AgentSkillsCN

devtools

此技能有助于启动并配置 Chrome DevTools MCP 服务器，使 Claude 能够直观地访问实时浏览器，用于调试与自动化。适用于用户提出设置浏览器调试、启动带 DevTools 的 Chrome、配置 chrome-devtools-mcp、查看我的应用外观、截取 Web 应用截图、检查浏览器控制台、调试控制台错误、检查网络请求、分析 API 响应、测量 Core Web Vitals 或页面性能、运行 Lighthouse 审计、测试按钮点击或表单提交、自动化浏览器交互、以编程方式填写表单、模拟用户行为、模拟移动设备或慢速网络、捕获 DOM 快照、在浏览器中执行 JavaScript，或排查 Chrome DevTools MCP 连接问题。支持 Windows、Linux 和 WSL2 环境。

SKILL.md
--- frontmatter
name: devtools
description: This skill helps launch and configure the Chrome DevTools MCP server, giving Claude visual access to a live browser for debugging and automation. Use when the user asks to set up browser debugging, launch Chrome with DevTools, configure chrome-devtools-mcp, see what my app looks like, take screenshots of my web application, check the browser console, debug console errors, inspect network requests, analyse API responses, measure Core Web Vitals or page performance, run a Lighthouse audit, test button clicks or form submissions, automate browser interactions, fill out forms programmatically, simulate user actions, emulate mobile devices or slow networks, capture DOM snapshots, execute JavaScript in the browser, or troubleshoot Chrome DevTools MCP connection issues. Supports Windows, Linux, and WSL2 environments.

Chrome DevTools MCP

GitHub Repository: https://github.com/ChromeDevTools/chrome-devtools-mcp

Without browser access, Claude is "coding blindfolded" - making changes without seeing results. The Chrome DevTools MCP server provides 26 specialised tools across these categories:

CategoryCapabilities
Visual InspectionTake screenshots, capture DOM snapshots, see rendered output
Console & LoggingRead console messages, catch JavaScript errors, debug issues
Network AnalysisInspect API requests/responses, analyse headers, debug fetch calls
PerformanceRecord traces, measure Core Web Vitals (LCP, CLS, TBT), identify bottlenecks
User SimulationClick elements, fill forms, drag-and-drop, handle dialogs
Device EmulationSimulate mobile viewports, throttle CPU/network, test responsive design

Quick Start Workflow

Execute these steps in order:

Step 1: Detect Environment

bash
bash scripts/detect_environment.sh

Returns one of: windows, linux, or wsl2

Step 2: Verify Chrome Installation

bash
bash scripts/check_chrome.sh <environment>

Outputs status:installed or status:not_installed. If not installed, see references/chrome-installation.md for installation options.

IMPORTANT: Do not proceed until Chrome is installed and verified.

Step 3: Check MCP Server Status

bash
claude mcp list | grep -i chrome

If not installed:

bash
claude mcp add chrome-devtools -- npx chrome-devtools-mcp@latest --browserUrl http://127.0.0.1:9222

For advanced configuration options and alternative connection methods, see references/mcp-configuration.md.

Step 4: Detect Running Dev Server

bash
bash scripts/detect_dev_server.sh

Checks ports 5173, 5174, 5175, 3000, 3001, 8080, and 8000. If no dev server is running and one is needed, offer to start it.

Step 5: Launch Chrome with Debugging

bash
bash scripts/launch_chrome.sh <environment> <url> [headed]
  • •<environment>: windows, linux, or wsl2
  • •<url>: Target URL (e.g., http://localhost:5173)
  • •[headed]: Optional - pass headed for visible browser, omit for headless (default)

Step 6: Verify Connection

bash
curl -s http://127.0.0.1:9222/json/version

Once connected, test with the mcp__chrome-devtools__list_pages tool.

Quick Troubleshooting

IssueSolution
"Target closed" errorClose all Chrome instances, restart with debugging
Module not foundClear npm cache: rm -rf ~/.npm/_npx && npm cache clean --force
Connection refusedEnsure Chrome launched with --remote-debugging-port=9222
Port already in useKill existing Chrome or use different port
Chrome won't start in sandboxUse --browserUrl to connect to manually-started Chrome
WebDriver sign-in blockedUse --autoConnect to connect to your normal browser session

For detailed troubleshooting steps, see references/troubleshooting.md.

References