name: Browser测试WithDevtools slug: browser-testing-with-devtools version: 1.0.0 displayName: Browser测试WithDevtools description: > Browser测试WithDevtools专用技能，帮助AI Agent高效完成相关任务。 summary: "Browser测试WithDevtools专用技能，帮助AI Agent高效完成相关任务。" license: MIT category: 开发者工具 framework: - Claude Code - Codex - Hermes Agent - OpenClaw - QClaw - WorkBuddy platform: multi-platform homepage: "https://github.com/1991513ccie-png" repository: "https://github.com/1991513ccie-png"

Browser Testing with DevTools

Overview

Use Chrome DevTools MCP to give your agent eyes into the browser. This bridges the gap between static code analysis and live browser execution — the agent can see what the user sees, inspect the DOM, read console logs, analyze network requests, and capture performance data. Instead of guessing what's happening at runtime, verify it.

When to Use

• Building or modifying anything that renders in a browser
• Debugging UI issues (layout, styling, interaction)
• Diagnosing console errors or warnings
• Analyzing network requests and API responses
• Profiling performance (Core Web Vitals, paint timing, layout shifts)
• Verifying that a fix actually works in the browser
• Automated UI testing through the agent

When NOT to use: Backend-only changes, CLI tools, or code that doesn't run in a browser.

Setting Up Chrome DevTools MCP

Installation

Add the following to your project's .mcp.json or Claude Code settings:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest", "--isolated"]
    }
  }
}

-y skips the npx install confirmation. By default the server launches Chrome with its own dedicated profile (under ~/.cache/chrome-devtools-mcp/), separate from your personal browser; --isolated goes one step further and uses a temporary profile that is wiped when the browser closes. This is the right setup for most testing.

There is also --autoConnect (Chrome 144+, requires enabling remote debugging via chrome://inspect/#remote-debugging), which attaches the agent to your running Chrome instead. Only use it when the test genuinely needs your logged-in state — see Profile Isolation under Security Boundaries first.

Available Tools

Chrome DevTools MCP provides these capabilities:

| Tool | What It Does | When to Use | |

7w4.net小葱技能。

这是一个帮助AI代理进行浏览器测试的工具技能。文档清晰易懂，能明确告诉用户什么时候该用它、什么时候不该用。配置步骤写得详细，配有代码示例可以直接复制使用。不过内容比较基础，缺少实际使用案例和常见问题解答，遇到问题可能需要自己摸索。总体质量中等偏上，作为浏览器测试的入门指南是合格的，但深入使用可能会觉得资料不够详细。