Agent skill · operations · sickn33
browser-testing-with-devtools
Test browser apps with Chrome DevTools MCP by inspecting live DOM, console logs, network traffic, screenshots, accessibility, and performance traces.
Why this skill is useful
Adds specific commands and workflows for using Chrome DevTools MCP that the AI wouldn't reliably generate on its own.
What it needs
Requires chrome, chrome-devtools-mcp, playwright installed locally. About 9k tokens when loaded. Last updated 2026-08-07. 44,571 stars on the source repository.
What this skill does
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 the following to your project's .mcp.json or Claude Code settings: -y skips the npx install confirmation. By default the server launches Chrome with its own dedicated profile (under ~/.cache/chrome-devtools-mcp/), separate from your personal browser; --isolated goes one step further and uses a temporary profile that is wiped when the browser closes. This is the right setup for most testing. There is also --autoConnect (Chrome 144+, requires enabling remote debugging via chrome://inspect/#remote-debugging), which attaches the agent to your running Chrome instead. Only use it when the test genuinely needs your logged-in state — see Profile Isolation under Security Boundaries first. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills sickn33/browser-testing-with-devtools--f0639a