Open Skills Logo
Open Skills

browser-testing-with-devtools

Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be configured.

Author

@addyosmani

Category

Development Tools

Install

Hot:4

Download and extract to your skills directory

Copy command and send to AI Agent for auto-install:

Download and install this skill https://openskills.cc/api/download?slug=addyosmani-skills-browser-testing-with-devtools&locale=en&source=copy

Browser Testing with DevTools - Real-Time Browser Debugging and Automated Testing

Skill Overview

Browser Testing with DevTools is a skill that provides agents with real-time browser visibility through the Chrome DevTools MCP. It enables agents to directly inspect the DOM, capture console errors, analyze network requests, track performance data, and verify how pages render in a real browser environment.

Use Cases

  • Building or debugging browser-rendered content: When developing or modifying any code that runs in a browser (React, Vue, or plain web pages), this skill lets you see the page’s actual state directly instead of relying on guesses or static code analysis.

  • Diagnosing frontend runtime issues: When a page has layout problems, styling anomalies, broken interactions, or console errors, the agent can inspect the DOM structure in real time, read computed styles, analyze console logs and network requests, and quickly identify the root cause.

  • Verifying fixes and performance: After fixing bugs or optimizing performance, you can use screenshot comparisons, performance tracing, and accessibility tree inspection to confirm that the changes truly resolved the issue without introducing new errors or performance regressions.

    • Core Features

  • Real-time browser state inspection: Supports capturing page states, inspecting the DOM tree, reading computed styles of elements, and viewing the accessibility tree, allowing the agent to see the actual rendering in the browser like a developer.

  • Runtime data capture: Can retrieve console logs (log, warn, error), monitor network requests and responses, and record performance metrics (LCP, CLS, INP, and long tasks) to help diagnose frontend errors, API call issues, and performance bottlenecks.

  • Safe and controlled JavaScript execution: Runs read-only JavaScript code in the page context to inspect application state, query the DOM, or validate data, while strictly restricting external requests and credential access to ensure a safe and controlled testing process.

    • Frequently Asked Questions

    What is Chrome DevTools MCP? How do I install it?

    Chrome DevTools MCP is an MCP server that allows agents to connect to and control Chrome DevTools. To install it, add the following configuration to the project’s .mcp.json file or Claude Code settings:

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

    By default, it uses a separate temporary browser profile and does not affect your personal browser data. If you need to test features that require a logged-in state, it is recommended that you create a separate testing profile.

    What is the difference between browser testing and unit testing?

    Unit tests verify whether code logic is correct, but they cannot test CSS layouts, actual browser rendering, network behavior, or performance issues. Browser testing runs in a real browser environment through Chrome DevTools MCP. It can inspect the DOM structure, verify that styles are applied correctly, analyze whether network requests are sent, and measure page-load performance—areas that unit tests do not cover.

    The two approaches complement each other: unit tests ensure code logic, while browser testing ensures actual runtime behavior.

    Is it safe to use this skill? Could it expose my login information?

    This skill is designed with multiple layers of security protection. First, it uses a separate temporary browser profile by default (--isolated), completely isolated from your everyday browser. Second, all content read from the browser (DOM, console logs, and network responses) is treated as “untrusted data”; the agent will not interpret it as instructions. Third, JavaScript execution is restricted to read-only operations, and access to credentials such as cookies and localStorage is prohibited.

    If you do need to test features that require authentication, it is recommended that you create a dedicated testing profile and log in only with a test account, preventing the agent from accessing your sensitive sessions.