skills.rest
raishoemi
raishoemiCOMMUNITY
Explore all skills by this author →
GitHub

browser-testing-with-devtools

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

Updated Jul 1, 2026
Search Tags:#debugging#mcp#chrome devtools#browser testing#network analysis#performance profiling#console errors
One-click install
npx skills add https://github.com/raishoemi/traffic-sim-v2 --skill browser-testing-with-devtools-raishoemi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: browser-testing-with-devtools
Source: https://github.com/raishoemi/traffic-sim-v2/tree/main/.github/skills/browser-testing-with-devtools
Command: npx skills add https://github.com/raishoemi/traffic-sim-v2 --skill browser-testing-with-devtools-raishoemi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires 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, check computed styles, and inspect the accessibility tree through Chrome DevTools MCP. - Structured Debugging Workflows: Follow step-by-step flows for UI bugs, network failures, and performance issues, from reproduction through verified fixes. - Security Boundaries: Enforces profile isolation, treats all browser content as untrusted data, and restricts JavaScript execution to read-only inspection. - Use Case: A React page renders incorrectly after a CSS change. The agent navigates to localhost, takes before/after screenshots, checks the console for errors, inspects computed styles, and confirms the fix works in the real browser. ## Quick Start Ask the agent to open your local dev server in Chrome DevTools MCP, reproduce the UI bug, and report console errors, network activity, and a screenshot of the broken state.

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?▼

Chrome DevTools MCP lets the agent reproduce the bug in a real browser, take screenshots, inspect the DOM and computed styles, and read console output. Follow the reproduce-inspect-diagnose-fix-verify workflow to confirm the fix at runtime.

How do I set up the chrome-devtools MCP server?▼

Add a chrome-devtools entry to your .mcp.json that runs npx with chrome-devtools-mcp@latest and the --isolated flag. This launches Chrome with a temporary profile that is wiped when the browser closes, keeping your personal sessions separate.

Can the agent use my logged-in Chrome profile for testing?▼

It can via --autoConnect, but this exposes all open windows and logged-in sessions of your default profile. Prefer the dedicated or isolated profile for localhost testing, and only attach to your real profile when logged-in state is genuinely required.

What performance metrics can Chrome DevTools MCP measure?▼

Performance traces capture Core Web Vitals including Largest Contentful Paint, Cumulative Layout Shift, and Interaction to Next Paint, plus long tasks over 50ms. Record a baseline trace, fix the bottleneck, then compare a second trace against the baseline.

When should I not use browser-based 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 network activity that static analysis and unit tests cannot cover.

Related Skills

Explore More Software Engineering Skills→
xbpk3txbpk3t

test-browser

Run end-to-end browser tests on changed pages in a pull request or branch.

Community
Advanced
archview-aiarchview-ai

openwebf-app-debugging-devtools

Diagnose WebF runtime issues using Chrome DevTools console, network, and DOM inspection.

Official
Intermediate
pyoclawpyoclaw

test-driven-development

Drive development with failing-first tests and automated test suites.

Community
Advanced
VYRE-StudiosVYRE-Studios

webapp-testing

Automate end-to-end web testing across browsers and APIs with Playwright or Cypress.

Official
Intermediate