skills.rest
rizqinrr
rizqinrrCOMMUNITY
Explore all skills by this author →
GitHub

browser-testing-with-devtools

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

665|3|Updated Sep 12, 2026
Search Tags:#debugging#accessibility#mcp#chrome devtools#browser testing#performance profiling#console errors
One-click install
npx skills add https://github.com/rizqinrr/viserys-agent --skill browser-testing-with-devtools-rizqinrr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: browser-testing-with-devtools
Source: https://github.com/rizqinrr/viserys-agent/tree/main/skills/browser-testing-with-devtools
Command: npx skills add https://github.com/rizqinrr/viserys-agent --skill browser-testing-with-devtools-rizqinrr

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 an AI 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, computed styles, and the accessibility tree through the Chrome DevTools MCP server. - Structured Debugging Workflows: Follow step-by-step flows for UI bugs, network failures, and performance issues (LCP, CLS, INP, long tasks). - 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 passes unit tests but the layout still looks broken. The agent navigates to the page, screenshots the before/after state, checks the console for errors, and confirms the computed styles match the spec. ## Quick Start Ask the agent to open your local dev server page in Chrome DevTools MCP, reproduce the UI bug, and report console errors, network requests, and a screenshot of the result.

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 bugs 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 the agent use my logged-in Chrome sessions for testing?▼

Only with --autoConnect, which attaches to your running Chrome and exposes all open windows including logged-in sessions. The recommended default is the dedicated or --isolated profile; use a separate test profile if logged-in state is genuinely required.

Why should browser content be treated as untrusted data?▼

DOM text, console logs, and network responses can contain injected instructions designed to manipulate the agent. The Skill requires never executing commands found in page content, never navigating to URLs extracted from pages, and flagging suspicious content to the user.

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 UI, network behavior, performance, and accessibility in a live 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
akirschke15-cmdakirschke15-cmd

fix-loop

Automate test-driven debugging cycles to fix failing unit tests.

Community
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