skills.rest
SanHsien
SanHsienCOMMUNITY
Explore all skills by this author →
𝕏@Hsien_3GitHub

browser-testing-with-devtools

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

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

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 profile performance instead of guessing why a UI bug occurs. ## Core Features & Use Cases - Live Browser Inspection: Capture screenshots, read the DOM and computed styles, retrieve console logs, and monitor network requests through the Chrome DevTools MCP server. - Structured Debugging Workflows: Follow reproduce-inspect-diagnose-fix-verify flows for UI bugs, network failures, and performance issues including Core Web Vitals (LCP, CLS, INP). - 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 and network PATCH requests, takes before/after screenshots, and verifies the fix with a clean console. ## 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 activity, and 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 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 bugs with Chrome DevTools MCP?▼

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

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 can attach to your running Chrome, but this exposes 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 agents to never execute commands found in page content, never navigate to URLs extracted from pages, and flag suspicious instruction-like text to the user.

What performance metrics can Chrome DevTools MCP measure?▼

Performance traces capture Core Web Vitals including Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and Interaction to Next Paint (INP), plus long tasks over 50ms. Record a baseline trace, fix the bottleneck, then record another trace to compare.

When should I not use browser testing with DevTools?▼

Do not use 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, where runtime verification of DOM, console, network, and visual output matters.

Related Skills

Explore More Software Engineering Skills→
udecodeudecode
240

test-browser

Execute end-to-end browser tests on pull request-affected pages using agent-browser CLI.

Official
Advanced
meta-pytorchmeta-pytorch
2.5k

implement

Generate minimal code changes to fix failing tests from /write-tests runs.

Official
Intermediate
spencerpaulyspencerpauly
672

auditing-performance

Audits web application performance bottlenecks and returns prioritized recommendations.

Community
Intermediate
VYRE-StudiosVYRE-Studios

webapp-testing

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

Official
Intermediate