skills.rest
marjorg
marjorgCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

browser-testing-with-devtools

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

1|Updated Mar 2, 2025
Search Tags:#debugging#mcp#chrome devtools#browser testing#network analysis#performance profiling#console errors
One-click install
npx skills add https://github.com/marjorg/setup --skill browser-testing-with-devtools-marjorg
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: browser-testing-with-devtools
Source: https://github.com/marjorg/setup/tree/main/home/.agents/skills/browser-testing-with-devtools
Command: npx skills add https://github.com/marjorg/setup --skill browser-testing-with-devtools-marjorg

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 access to the DOM, console logs, network requests, and performance traces so UI bugs, API failures, and rendering issues are verified against real runtime behavior instead of guesswork. ## Core Features & Use Cases - Live Browser Inspection: Capture screenshots, read the DOM and computed styles, inspect the accessibility tree, and retrieve console output through the Chrome DevTools MCP server. - Structured Debugging Workflows: Follow defined reproduce-inspect-diagnose-fix-verify flows for UI bugs, network issues, and performance problems including Core Web Vitals analysis. - Security Boundaries: Enforces profile isolation, treats all browser content as untrusted data, and restricts JavaScript execution to read-only inspection to prevent prompt injection from page content. - Use Case: A task-completion animation glitches in your app. The agent navigates to localhost, reproduces the bug, checks the console for errors, verifies the PATCH request payload, takes before/after screenshots, and confirms the fix works. ## Quick Start Ask the agent to open your local dev server in Chrome DevTools MCP, reproduce the UI bug, and report console errors, network requests, 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 .mcp.json or opencode config that runs npx -y 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.

How do I debug UI bugs with Chrome DevTools MCP?▼

Follow the reproduce-inspect-diagnose-fix-verify workflow: navigate to the page and screenshot the bug, check console errors, inspect the DOM and computed styles, identify the root cause, fix the source code, then reload and verify with a comparison screenshot.

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

By default the server uses a dedicated or isolated profile without your sessions. The --autoConnect flag attaches to your running Chrome with access to all open windows and logged-in sessions, so it should only be used when a test genuinely requires authenticated state.

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 instruction-like text 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 calls, and performance metrics that only exist in a live browser environment.

Related Skills

Explore More Software Engineering Skills→
sluongngsluongng
6

chrome-devtools

Attach to a live Chrome session via the Chrome DevTools MCP server.

Community
Intermediate
jaisonerickjaisonerick

fix-bugs

Reproduce QA-reported failures with failing tests and apply minimal code fixes.

Community
Advanced
HomericIntelligenceHomericIntelligence
6

verification

Run pytest, mypy, ruff, and pre-commit checks before declaring completion.

Official
Intermediate
VYRE-StudiosVYRE-Studios

webapp-testing

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

Official
Intermediate