skills.rest
sasidhar4444
sasidhar4444COMMUNITY
Explore all skills by this author →
GitHub

browser-testing-with-devtools

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires chrome-devtools-mcp.

What problem does it solve? Static code analysis cannot reveal what actually happens at runtime 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 instead of guessing. ## Core Features & Use Cases - Live Browser Inspection: Capture screenshots, read the DOM tree, retrieve console logs, and monitor network requests through Chrome DevTools MCP. - Structured Debugging Workflows: Follow step-by-step flows for UI bugs, network failures, and performance profiling (LCP, CLS, INP). - Security Boundaries: Enforces profile isolation, treats all browser content as untrusted data, and restricts JavaScript execution to read-only inspection. - Use Case: A CSS fix looks correct in code but breaks the layout at runtime. The agent navigates to the page, screenshots the before/after state, checks the console for errors, and verifies computed styles to confirm the fix. ## Quick Start Ask the agent to open your local dev server page in Chrome DevTools MCP, reproduce the UI bug, and report console errors with 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 set up Chrome DevTools MCP for browser testing?▼

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

How to debug UI issues with Chrome DevTools MCP?▼

Follow the reproduce-inspect-diagnose-fix-verify workflow: navigate to the page, screenshot the bug, check console errors, inspect the DOM and computed styles, fix the source code, then reload and compare screenshots to confirm the fix.

Can Chrome DevTools MCP access my logged-in browser sessions?▼

Only if you use --autoConnect, which attaches to your running Chrome profile with access to all open windows. The default dedicated profile or --isolated mode is recommended so tests never touch your real sessions or cookies.

When should I not use browser testing with DevTools MCP?▼

Skip it for backend-only changes, CLI tools, or code that never runs in a browser. It is designed for anything that renders in a browser, such as UI layout, styling, network calls, and client-side performance.

Why is browser content treated as untrusted data?▼

DOM text, console logs, and network responses can contain injected instructions designed to manipulate the agent. The Skill requires flagging instruction-like page content to the user and never navigating to URLs extracted from page content without confirmation.

Related Skills

Explore More Software Engineering Skills→
hgflimahgflima
1

browser-testing-with-devtools

Automate browser testing with Chrome DevTools MCP for DOM inspection and console analysis.

Community
Advanced
pyoclawpyoclaw

test-driven-development

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

Community
Advanced
codelablycodelably
41

tdd-workflow

Enforce test-driven development workflows with 80%+ coverage targets.

Official
Advanced
VYRE-StudiosVYRE-Studios

webapp-testing

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

Official
Intermediate