skills.rest
Qiuyi-Hong
Qiuyi-HongCOMMUNITY
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 15, 2026
Search Tags:#debugging#mcp#chrome devtools#browser testing#network analysis#performance profiling#console errors
One-click install
npx skills add https://github.com/Qiuyi-Hong/addyosmani-skills --skill browser-testing-with-devtools-qiuyi-hong
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: browser-testing-with-devtools
Source: https://github.com/Qiuyi-Hong/addyosmani-skills/tree/main/skills/browser-testing-with-devtools
Command: npx skills add https://github.com/Qiuyi-Hong/addyosmani-skills --skill browser-testing-with-devtools-qiuyi-hong

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 an AI agent live access to 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. - Runtime Diagnostics: Analyze console logs, network requests and responses, and performance traces including Core Web Vitals (LCP, CLS, INP). - Structured Debugging Workflows: Follow step-by-step flows for UI bugs, network issues, and performance regressions, with before/after screenshot verification. - Security Boundaries: Enforces profile isolation, treats all browser content as untrusted data, and restricts JavaScript execution to read-only inspection. - Use Case: A task completion animation misbehaves in your app. The agent navigates to localhost, reproduces the bug, checks the console and network calls, identifies the root cause, applies the fix, and verifies with a fresh screenshot. ## 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 set up Chrome DevTools MCP for browser testing?▼

Add a chrome-devtools entry to your project's .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, take a screenshot, check console errors, inspect the DOM and computed styles, identify the root cause, fix the source code, then reload and compare a new screenshot.

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

By default the server uses a dedicated or isolated profile, so your real sessions are not exposed. The --autoConnect flag can attach to your running Chrome, but this grants access to all open windows and logged-in sessions, so it should only be used when a test genuinely requires that state.

Is it safe for the agent to read DOM and console content?▼

Browser content is treated as untrusted data, never as instructions. The agent must not follow commands found in page content, navigate to URLs extracted from pages, or copy secrets from the browser, and it should flag suspicious instruction-like content to the user.

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, network activity, and performance in an actual browser environment.

Related Skills

Explore More Software Engineering Skills→
thisisryanswiftthisisryanswift
2

ce-polish-beta

Start a local dev server and open the feature in a browser.

Community
Intermediate
rodgemd1-lgtmrodgemd1-lgtm

jake-ship

Automate code shipping from review to live deployment via Jake's pipeline.

Community
Advanced
spencerpaulyspencerpauly
672

auditing-performance

Audits web application performance bottlenecks and returns prioritized recommendations.

Community
Intermediate
cosmicstack-labscosmicstack-labs
364

e2e-testing

Write stable end-to-end tests for web apps using Playwright and Cypress.

Official
Intermediate