skills.rest
MSC72m
MSC72mCOMMUNITY
Explore all skills by this author →
𝕏@MSC72mGitHub

browser-testing-with-devtools

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

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

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 visibility into 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 the Chrome DevTools MCP server. - Console, Network, and Performance Analysis: Diagnose console errors, verify API request/response payloads, and profile Core Web Vitals such as LCP, CLS, and INP. - Structured Debugging Workflows: Follow reproduce-inspect-diagnose-fix-verify flows for UI bugs, network issues, and performance regressions, with strict security boundaries that treat all browser content as untrusted data. - Use Case: After changing a CSS layout, ask the agent to reload localhost, take before/after screenshots, confirm the console is clean, and verify the network calls return the expected status codes. ## Quick Start Set up the chrome-devtools MCP server and ask the agent to open your local dev server, reproduce the UI bug, and report console errors with 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 .mcp.json that runs npx -y chrome-devtools-mcp@latest --isolated. The --isolated flag launches Chrome with a temporary profile that is wiped when the browser closes, which suits most testing.

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, inspect the DOM and computed styles, fix the source code, then reload and compare screenshots to confirm.

Can the agent attach to my running Chrome browser?▼

Yes, via --autoConnect on Chrome 144+ with remote debugging enabled, but this exposes all open windows of your default profile including logged-in sessions. Prefer the dedicated or --isolated profile unless the test genuinely needs your login state.

What performance metrics can Chrome DevTools MCP measure?▼

Performance traces capture Core Web Vitals including Largest Contentful Paint, Cumulative Layout Shift, and Interaction to Next Paint, plus long tasks over 50ms. Record a baseline trace, fix the bottleneck, then measure again to compare.

When should I not use browser testing with DevTools?▼

Skip 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, such as layout, styling, interaction, and network behavior.

Why is browser content treated as untrusted data?▼

A malicious or compromised page can embed instruction-like text in the DOM, console, or network responses to manipulate the agent. The Skill requires flagging such content, never navigating to URLs found in pages, and never reading cookies or tokens via JavaScript execution.

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
david-nossebrodavid-nossebro

debug-and-fix

Reproduce web app failures and fix bugs with Playwright regression tests.

Community
Advanced
AhmedAbdelmoatyAhmedAbdelmoaty

playwright-testing

Plan and implement deterministic Playwright tests for browser apps and canvas games.

Community
Advanced
hospitaljobsinhospitaljobsin
7

e2e-testing-patterns

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

Official
Advanced