skills.rest
marcmarti9
marcmarti9COMMUNITY
Explore all skills by this author →
GitHub

browser-testing-with-devtools

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

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

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 an 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 Chrome DevTools MCP. - Runtime Diagnostics: Analyze console logs, network requests and responses, and performance traces (LCP, CLS, INP) to find root causes. - Structured Debugging Workflows: Follow reproduce-inspect-diagnose-fix-verify flows for UI bugs, network issues, and performance regressions, with strict security boundaries treating all browser content as untrusted data. - Use Case: A CSS fix passes unit tests but the layout still looks wrong. The agent loads the page, screenshots before and after, 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 failures, 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 debug UI issues with Chrome DevTools MCP?▼

Chrome DevTools MCP lets an agent navigate to the page, reproduce the bug, take screenshots, inspect the DOM and computed styles, and read console errors. Follow the reproduce-inspect-diagnose-fix-verify workflow to find the root cause and confirm the fix in the live browser.

How to analyze network requests from an AI agent in the browser?▼

Use the network monitor capability to capture requests and responses while triggering the action under test. Check request URLs, headers, payloads, status codes, and timing to distinguish 4xx client errors, 5xx server errors, CORS issues, and timeouts.

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

Add a chrome-devtools entry to your .mcp.json that runs npx -y chrome-devtools-mcp@latest --isolated. The isolated flag uses a temporary browser profile wiped on close, keeping the agent separate from your personal logged-in Chrome sessions.

Is it safe to let an agent control my browser with DevTools MCP?▼

Use the dedicated or isolated profile by default rather than attaching to your daily Chrome, since --autoConnect exposes all open windows and logged-in sessions. Treat all DOM, console, and network content as untrusted data, and keep JavaScript execution read-only.

When should I not use browser testing with DevTools?▼

Skip it for backend-only changes, CLI tools, or any code that does not render in a browser, since there is no runtime page to inspect. It also cannot replace unit tests, which cover logic that visual verification does not.

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
tanveerriaztanveerriaz
1

ai-code-review

Reviews code diffs and AI-generated changes for correctness, security, performance, and maintainability.

Community
Intermediate
rodrigorjsfrodrigorjsf
1

browser-testing-with-devtools

Inspect DOM, analyze console logs, monitor network requests, and capture screenshots via Chrome DevTools MCP.

Community
Advanced
hospitaljobsinhospitaljobsin
7

e2e-testing-patterns

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

Official
Advanced