Browser Testing with DevTools

- Building or modifying anything that renders in a browser

Category: design Source: addyosmani/agent-skills

What Is This

Browser Testing with DevTools is a skill designed for developers and agents working on anything that renders or runs inside a web browser. This skill leverages Chrome DevTools via the MCP (Multi-Channel Protocol) interface, giving tools and agents direct access to the browser's live runtime environment. With this capability, you can inspect the current DOM, capture console output, analyze network requests, profile application performance, and verify visual and interactive behavior in real time. This skill is essential for verifying that changes to web applications work as intended in an actual browser context rather than relying solely on static code analysis.

Unlike traditional code review or automated unit tests, browser testing with DevTools bridges the gap between code and runtime execution. It enables you to see precisely what the user sees, identify issues that only occur in the browser, and validate the real-world impact of your code changes.

Why Use It

Building or maintaining modern web applications requires more than just writing code that appears correct. Many bugs and issues surface only when code is executed in a browser, where factors such as the DOM structure, CSS cascade, network latency, and JavaScript execution order come into play. Here are some reasons to use this skill:

Debugging UI Issues: Quickly identify layout problems, styling errors, or unexpected interactions by inspecting the live DOM and CSS.
Diagnosing Console Errors: Capture and review warnings and errors output to the JavaScript console during runtime.
Analyzing Network Requests: Monitor API calls, static asset loading, and HTTP responses to ensure proper data flow and resource loading.
Profiling Performance: Use tools like the Performance panel to track Core Web Vitals, paint times, layout shifts, and JavaScript execution.
Verifying Fixes: Confirm that code changes actually resolve reported issues in the real browser environment.
Automated Visual and Functional Testing: Use agents to automate browser actions and verify that user-facing features behave as expected.

By integrating Chrome DevTools MCP, you gain a powerful suite of browser-level insights that cannot be obtained through static analysis or server-side testing alone.

How to Use It

Setting Up Chrome DevTools MCP

To enable this skill, you must configure your environment to connect with Chrome DevTools MCP. This allows your agent or tooling to interact directly with a running Chrome browser instance.

Installation Example:

Add the Chrome DevTools MCP server to your configuration. If you are using Claude Code, update your project settings as follows:

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

This setup ensures that the agent can launch and communicate with Chrome using the DevTools Protocol, providing access to live browser state.

Common Tasks and Code Examples

Inspect the DOM: Use the Elements panel or the DevTools Protocol to query or modify the DOM at runtime. For example, to check if a button is present:
```
document.querySelector('button#submit') !== null
```
Capture Console Errors: Listen for console events to surface errors or warnings:
```
window.addEventListener('error', (e) => { console.log(e.message); });
```
Analyze Network Requests: Use the Network panel or capture fetch/XHR activity programmatically:
```
fetch('/api/data')
  .then(response => response.json())
  .then(data => console.log(data));
```

Profile Performance: Collect performance metrics using the Performance panel or JavaScript APIs:

const { timing } = window.performance;
console.log('Page load time:', timing.loadEventEnd - timing.navigationStart);

All of these activities can be orchestrated by your agent through DevTools MCP, allowing for both manual inspection and automated browser testing.

When to Use It

Use the Browser Testing with DevTools skill in the following scenarios:

Developing, modifying, or debugging any web page, web application, or browser-based UI.
Investigating UI issues such as incorrect layout, broken styling, or failed JavaScript interactions.
Validating that a frontend bug is fixed by observing actual browser behavior.
Capturing and analyzing runtime errors and warnings that are not visible in backend logs.
Profiling web application performance, including render times and resource loading.
Automating UI validation and regression testing by simulating user interactions and checking real output.

Do NOT use this skill for backend-only projects, command-line tools, or code that does not execute in a browser environment.

Important Notes

Real Browser Context: This skill provides access to a live browser instance. Results reflect actual runtime behavior, including dynamic DOM changes and real network conditions.
Security and Privacy: Be cautious when inspecting sensitive data or working with authenticated sessions, as DevTools can expose cookies, local storage, and network payloads.
Performance Overhead: Running DevTools MCP may incur additional overhead on your system. Use it primarily for debugging and validation rather than in production environments.
Automation Support: Agents can automate browser actions, but ensure your tests are deterministic and account for asynchronous events or network variability.
Skill Scope: The skill is specifically for browser-based rendering and runtime inspection. It is not suitable for server-side or purely static code analysis.

By using Browser Testing with DevTools, you can significantly improve debugging efficiency and confidence in frontend changes, ensuring your web application behaves correctly for end users in the real world.