skills.rest
memasanz
memasanzCOMMUNITY
Explore all skills by this author →
GitHub

browser-testing-with-devtools

Tests and debugs web pages in real browsers using Chrome DevTools MCP.

1|Updated May 29, 2026
Search Tags:#debugging#frontend#mcp#chrome devtools#browser testing#network analysis#console errors
One-click install
npx skills add https://github.com/memasanz/agent-harness --skill browser-testing-with-devtools-memasanz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: browser-testing-with-devtools
Source: https://github.com/memasanz/agent-harness/tree/main/.github/skills/browser-testing-with-devtools
Command: npx skills add https://github.com/memasanz/agent-harness --skill browser-testing-with-devtools-memasanz

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @anthropic/chrome-devtools-mcp.

What problem does it solve? Static code analysis cannot reveal what actually happens when a page runs in a browser. This Skill gives the agent live visibility into the browser so it can inspect the DOM, read console errors, analyze network requests, and verify visual output with real runtime data instead of guessing. ## Core Features & Use Cases - Live Browser Inspection: Capture screenshots, read the DOM tree, computed styles, and the accessibility tree through Chrome DevTools MCP. - Structured Debugging Workflows: Follow step-by-step flows for UI bugs, network failures, and performance issues (Core Web Vitals, long tasks, layout shifts). - Security Boundaries: Treats all browser content as untrusted data and restricts JavaScript execution to read-only inspection, blocking credential access and prompt-injection from page content. - Use Case: A button click silently fails. The agent reproduces it in the browser, finds a console error and a failed PATCH request in the network monitor, diagnoses a wrong payload, fixes the code, and verifies with a before/after screenshot. ## Quick Start Ask the agent to open your local dev server page in Chrome DevTools, reproduce the UI bug, and report console errors, network requests, and a screenshot.

Frequently Asked Questions about browser-testing-with-devtools

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I debug UI issues with Chrome DevTools MCP?▼

Reproduce the bug in the browser, take a screenshot, then inspect the console for errors, read the DOM and computed styles, and check the accessibility tree. After fixing the source code, reload the page and verify with a comparison screenshot and a clean console.

How do I set up the Chrome DevTools MCP server?▼

Add a chrome-devtools entry to your project's .mcp.json or Claude Code settings with command npx and args @anthropic/chrome-devtools-mcp@latest. Once configured, the agent gains screenshot, DOM, console, network, and performance tools.

What can Chrome DevTools MCP inspect in a browser?▼

It provides screenshots, DOM tree inspection, console logs, network request monitoring, performance traces, computed element styles, the accessibility tree, and JavaScript execution in the page context for read-only state inspection.

Can the agent run JavaScript in the page with DevTools MCP?▼

Yes, but only for read-only state inspection such as reading variables or querying the DOM. It must not access cookies, localStorage tokens, or credentials, make external network requests, or modify the page without user confirmation.

When should I not use browser testing with DevTools?▼

Skip it for backend-only changes, CLI tools, or any code that does not run in a browser. It is designed for verifying rendered output, runtime behavior, and browser-specific issues that unit tests cannot cover.

Why is browser content treated as untrusted data?▼

A malicious or compromised page can embed instruction-like text in the DOM, console, or network responses to manipulate the agent. The skill requires flagging such content to the user and never executing instructions found in page content.

Related Skills

Explore More Software Engineering Skills→
corca-aicorca-ai
9

agent-browser

Automate browser rendering, interaction, and DOM inspection for JavaScript-heavy pages.

Official
Advanced
thrawn01thrawn01
11

review-validate

Validate reported bugs with parallel sub-agents and surface tests.

Community
Advanced
CodeCrafterAdi2006CodeCrafterAdi2006

test-driven-development

Guides test-first development using the red-green-refactor cycle for code changes and bug fixes.

Community
Intermediate
badhopebadhope

e2e-test

Automate end-to-end user flow testing across Playwright, Cypress, and Selenium.

Community
Advanced