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

7w4.net小蔥技能站，你的AI助手技能庫。

• 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 | |

這個Skill質量中等，主要用於幫助AI進行瀏覽器相關的開發和測試工作。優點是使用說明詳細、框架相容性好、提供了實用的安全建議；不足是文件後半部分不完整，缺少故障排除指南和實際使用案例，可能會給初次使用者帶來一定的學習成本。總體而言，這是一個功能明確但文件完整性有待改進的開發者工具類Skill。