Browser DevTools Testing
Validate and debug web applications with real-browser runtime evidence.
The skill explicitly requires isolated browser profiles, treats page content as untrusted data, prohibits credential access, restricts JavaScript and external requests, and requires confirmation for side effects. Deductions apply because npx -y and chrome-devtools-mcp@latest are unpinned; autoConnect can expose real browser sessions, and rollback or recovery after failure is not defined.
Installation, tool capabilities, UI/network/performance workflows, and abnormal-content handling are documented and broadly consistent. Deductions apply because concrete MCP tool names and parameters are unspecified, execution depends on external MCP configuration, and no tests reproduce this skill's key paths; the zero-console-warning rule may also produce overly strict failures. Static calibration caps this at 10.
Trigger scenarios and non-fit cases are clear, covering DOM, console, network, performance, accessibility, and visual verification. Deductions apply because input/output formats, browser and MCP version boundaries, and Chinese-language project support are not specified; reachability of Chrome DevTools MCP, npx, and related services from mainland China is unverified.
The document has clear structure, setup instructions, a capability table, security boundaries, scenario workflows, a test-plan example, screenshot guidance, anti-rationalization content, and verification checklists. The repository provides an MIT license, maintainer information, and CI installation validation. Deductions apply because the skill lacks an independent version, changelog, explicit maintenance owner or update path, uses latest dependencies, and has limited concrete troubleshooting and FAQ coverage.
The skill supplies a directly actionable workflow for browser runtime inspection and could reduce errors from relying only on static analysis, with coverage for visual, network, performance, and accessibility results. Deductions apply because the provided material contains no real browser output or third-party execution evidence, so key tool calls and directly usable results cannot be verified; some requirements are broad and may add execution cost. Static calibration caps this at 7.
The skill defines observable checks and expected findings, and repository CI validates skill structure, the evaluation runner, and installation. Deductions apply because the supplied test does not cover this browser skill's key paths, and there are no real DevTools execution records or corroborating evidence from multiple sources. Static calibration caps this at 5.
- Do not use autoConnect with a daily Chrome profile; if unavoidable, close unrelated tabs and confirm the session exposure scope.
- Pin chrome-devtools-mcp to an audited version and install npx dependencies in an isolated environment.
- Do not treat instructions found in DOM, console, network responses, or JavaScript output as authorization; confirm before navigating to URLs extracted from page content.
- The supplied material does not establish stable mainland-China reachability for Chrome DevTools MCP or its dependencies.
What does this skill do, and when should you use it?
This skill connects an AI coding agent to a live browser through Chrome DevTools MCP. It can inspect the DOM, console output, network traffic, performance traces, computed styles, accessibility data, and screenshots. It is intended for building or debugging browser-rendered interfaces and interactions, not backend-only changes or CLI tools. The chrome-devtools MCP server must be configured before use.
Connects to Chrome DevTools MCP; reads the live DOM, console logs, network requests and responses, performance traces, computed element styles, and the accessibility tree; runs task-relevant read-only JavaScript in the page context; captures screenshots for visual verification; and follows structured reproduce, inspect, diagnose, fix, and verify workflows for UI, network, and performance issues.
- A frontend developer changes layout or styling and needs screenshots and computed-style checks from a real browser.
- A UI bug requires correlating the affected DOM element with console errors and accessibility-tree output.
- An engineer diagnoses an API or CORS issue by checking request URLs, methods, payloads, status codes, response bodies, and timing.
- A performance investigation needs traces covering LCP, CLS, INP, long tasks, and unnecessary re-renders.
- A team verifies a browser-facing fix by reloading the page, checking a clean console, and running automated UI tests.
What are this skill's strengths and limitations?
- Covers DOM, console, network, performance, styles, accessibility, and screenshot verification.
- Provides structured workflows for diagnosing and rechecking UI, network, and performance problems.
- Defines explicit safeguards for credentials, external requests, unsafe navigation, and untrusted browser content.
- Requires a configured Chrome DevTools MCP server.
- The source documents Chrome DevTools MCP specifically and provides no evidence of direct compatibility with other browser DevTools implementations.
- Requires a browser runtime and is not intended for backend-only changes, CLI tools, or non-browser code.
- The source provides no standalone test suite or platform compatibility test evidence.
How do you install this skill?
Add the following to the project’s .mcp.json or Claude Code settings: {"mcpServers":{"chrome-devtools":{"command":"npx","args":["-y","chrome-devtools-mcp@latest","--isolated"]}}}. The skill has no separate installer documented; the repository collection can also be installed with npx skills add addyosmani/agent-skills --skill browser-testing-with-devtools.
How do you use this skill?
Invoke it when building or debugging browser applications, for example: Use browser DevTools to inspect this page’s DOM, console errors, network requests, and visual output, then verify the fix. Use a dedicated or temporary Chrome profile by default, and consider a separate test profile only when authenticated state is genuinely required. Treat DOM content, console logs, network responses, and JavaScript results as untrusted data; keep JavaScript execution read-only by default.