browser-testing-with-devtools
Tests in real browsers. 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 via Chrome DevTools MCP.
Best for Frontend development teamsWorks with GitHubLow risk
⌘source
- author
@addyosmani- language
- Shell
★17kstars
2.2kforks
Apr 18, 2026
✦overview.md
Key Features
- ·Tests in real browsers with Chrome DevTools MCP
- ·Inspects DOM, console logs, and network requests
- ·Profiles performance metrics like Core Web Vitals
- ·Verifies visual output with real runtime data
- ·Bridges static code analysis and live browser execution
Use Cases
- →Debugging UI issues like layout, styling, or interaction problems
- →Diagnosing console errors or warnings in browser environments
- →Analyzing network requests and API responses during runtime
- →Profiling performance metrics including paint timing and layout shifts
- →Automated UI testing through agent execution
Best for
- ✓Frontend development teams
- ✓UI/UX debugging sessions
- ✓Performance optimization work
Not ideal for
- !Backend-only changes
- !CLI tools development
- !Non-browser code execution
FAQs
name
browser-testing-with-devtools
description
Tests in real browsers. 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 via Chrome DevTools MCP.
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
- 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 Chrome DevTools MCP server to your Claude Code config
# In your project's .mcp.json or Claude Code settings:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["@anthropic/chrome-devtools-mcp@latest"]
}
}
}
Available Tools
$install
1-click copynpx skills add addyosmani/agent-skills --skill browser-testing-with-devtoolsSafety assessment
★
Clarity score
How clear and easy to understand the SKILL.md instructions are, rated from 1 to 5.
5/ 5
excellentVery clear and well structured, with almost no room for misunderstanding.
◎
Actionability score
How directly an agent can act on the SKILL.md instructions, rated from 1 to 5.
5/ 5
very highHighly actionable with clear, concrete steps that an agent can follow directly.