browser-testing-with-devtools

Browser Testing with DevTools

Overview

Static code analysis tells you what the code should do. The browser tells you what it actually does. These are often different — especially with CSS cascade interactions, async race conditions, responsive breakpoints, and third-party script interference. An agent that only reads code is blind to the runtime reality.

The browser testing contract: Every UI change must be verified in a real browser. Inspect the DOM, read console logs, analyze network requests, profile performance, and capture screenshots. Don't guess what the user sees — observe it.

Real-world impact: 80% of frontend bugs are caught by looking at the browser, not the code. Layout issues, console errors, and performance regressions are invisible to static analysis but obvious at runtime. A 5-minute browser check prevents hours of "it works on my machine" debugging.

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", "--autoConnect"]
    }
  }
}

-y skips the npx install confirmation. --autoConnect connects automatically to a running Chrome instance (or launches one) — recommended for most users.

Available Tools

Chrome DevTools MCP provides these capabilities:

Tool	What It Does	When to Use
Screenshot	Captures the current page state	Visual verification, before/after comparisons
DOM Inspection	Reads the live DOM tree	Verify component rendering, check structure
Console Logs	Retrieves console output (log, warn, error)	Diagnose errors, verify logging
Network Monitor	Captures network requests and responses	Verify API calls, check payloads
Performance Trace	Records performance timing data	Profile load time, identify bottlenecks
Element Styles	Reads computed styles for elements	Debug CSS issues, verify styling
Accessibility Tree	Reads the accessibility tree	Verify screen reader experience
JavaScript Execution	Runs JavaScript in the page context	Read-only state inspection and debugging (see Security Boundaries)