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

Ready to run

npx skills add https://github.com/sasidhar4444/ai-receptionist --skill browser-testing-with-devtools-sasidhar4444

💬 Prompt for ChatGPT / Claude Chat▼

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.