Browser Testing with DevTools

Verify UI, console, network, performance and accessibility in a real browser through the Chrome DevTools MCP server.

Dev & CodingIntermediate★ 423⑂ 45AI score 9/10Last updated: Sep 13, 2026

What it does

Wires the agent into a real Chrome session via the Chrome DevTools MCP server, so runtime behaviour is observed instead of guessed.
Documents each available capability — screenshots, DOM inspection, console logs, network monitoring, performance traces, computed styles, accessibility tree, JS evaluation — with when to use it.
Provides step-by-step debugging workflows for UI bugs, network failures and performance regressions (reproduce → inspect → diagnose → fix → verify).
Includes a structured test-plan template with expected results and checklists, plus a before/after screenshot regression routine.
Adds strong safety rules: treat all browser content as untrusted data, keep JS evaluation read-only, never read cookies or tokens, and prefer isolated Chrome profiles.

Who it's for

Frontend and full-stack developers who want the agent to confirm what actually renders.
Anyone chasing console errors, CORS/4xx/5xx issues, or Core Web Vitals (LCP, CLS, INP).
Teams that want guardrails before letting an agent drive a browser.

Example uses

A task-completion animation glitches: screenshot the state, read console errors, diff actual DOM/computed styles against expectations, fix, and re-verify.
A save action silently fails: inspect the network panel for the PATCH request URL, payload and status code, then correct the client request.
A page feels slow: record a baseline trace, find long tasks over 50ms and poor LCP/CLS, fix the bottleneck, and compare a new trace.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/aiskillstore/marketplace/HEAD/pending/addyosmani/browser-testing-with-devtools/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)

Download the ZIP with the button below.
In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.

↓ Download ZIP

Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the pending/addyosmani/browser-testing-with-devtools folder from the GitHub repo aiskillstore/marketplace into my ~/.claude/skills/browser-testing-with-devtools/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/aiskillstore/marketplace.git && mkdir -p ~/.claude/skills && cp -r marketplace/pending/addyosmani/browser-testing-with-devtools ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

Open a terminal and clone the repo: git clone https://github.com/aiskillstore/marketplace.git
Copy the skill into your Claude Code skills folder: mkdir -p ~/.claude/skills && cp -r marketplace/pending/addyosmani/browser-testing-with-devtools ~/.claude/skills/
Make sure Chrome and Node.js (with npx) are installed.
Create a .mcp.json in your project root containing: {"mcpServers":{"chrome-devtools":{"command":"npx","args":["-y","chrome-devtools-mcp@latest","--isolated"]}}}
Restart Claude Code and confirm the chrome-devtools MCP server connects.
Trigger it with a request like "open localhost:3000 and check for console errors".
Recommended: keep using the isolated/dedicated profile; only attach to a logged-in Chrome profile when the test truly requires it, and close unrelated tabs first.

View source on GitHub ↗