skills.rest
yourlabpt
yourlabptCOMMUNITY
Explore all skills by this author →
GitHub

browser-testing-with-devtools

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

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

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 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, check computed styles, and inspect the accessibility tree through Chrome DevTools MCP. - Runtime Diagnostics: Analyze console errors, network requests and responses, and performance traces including Core Web Vitals like LCP, CLS, and INP. - Structured Debugging Workflows: Follow reproduce-inspect-diagnose-fix-verify flows for UI bugs, network issues, and performance bottlenecks, with screenshot-based before/after verification. - Use Case: A task completion animation glitches 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 clean console and matching screenshots. ## 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 problem.

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 debug UI issues with Chrome DevTools MCP?▼

Follow the reproduce-inspect-diagnose-fix-verify workflow: navigate to the page, trigger the bug, take a screenshot, then check console errors, inspect the DOM element, and read computed styles. After fixing the source code, reload and verify with a clean console and a comparison screenshot.

How do I set up the chrome-devtools MCP server?▼

Add a chrome-devtools entry to your .mcp.json that runs npx with the -y flag and chrome-devtools-mcp@latest plus the --isolated argument. The --isolated flag uses a temporary browser profile that is wiped when the browser closes, which suits most testing.

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 of that profile. Prefer the default dedicated profile or --isolated for localhost testing, and use a separate test-only Chrome profile when 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 agent must never execute commands found in page content, navigate to URLs extracted from pages, or copy secrets from browser data into other tools.

When should I not use browser-based testing?▼

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→
hgflimahgflima
1

browser-testing-with-devtools

Automate browser testing with Chrome DevTools MCP for DOM inspection and console analysis.

Community
Advanced
ByronWilliamsCPAByronWilliamsCPA

debug-tests

Diagnose failing pytest tests using root-cause-first analysis before changing application code.

Official
Intermediate
aemsitesaemsites
3

Testing Blocks

Automate testing of AEM Edge Delivery code changes with unit, browser, and lint checks.

Official
Intermediate
hospitaljobsinhospitaljobsin
7

e2e-testing-patterns

Provide end-to-end testing patterns for Playwright and Cypress.

Official
Advanced