skills.rest
PHenrique07
PHenrique07COMMUNITY
Explore all skills by this author →
GitHub

browser-testing-with-devtools

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

5|Updated Feb 12, 2026
Search Tags:#debugging#MCP#chrome devtools#browser testing#network analysis#performance profiling#console errors
One-click install
npx skills add https://github.com/PHenrique07/Sementis-IFSP-Pirituba --skill browser-testing-with-devtools-phenrique07
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: browser-testing-with-devtools
Source: https://github.com/PHenrique07/Sementis-IFSP-Pirituba/tree/main/.github/skills/browser-testing-with-devtools
Command: npx skills add https://github.com/PHenrique07/Sementis-IFSP-Pirituba --skill browser-testing-with-devtools-phenrique07

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 AI 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 to verify rendering and debug UI issues. - Console and Network Analysis: Retrieve console logs and monitor network requests to diagnose errors, CORS problems, and incorrect API payloads. - Performance Profiling: Record performance traces covering LCP, CLS, and INP to identify bottlenecks and measure fixes against a baseline. - Use Case: After changing a CSS layout, ask the agent to reload the page, take before/after screenshots, confirm the console is clean, and verify the network requests return expected data. ## Quick Start Use Chrome DevTools to open my localhost page, check the console for errors, and take a screenshot to verify the layout.

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 with command npx and args -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 issues 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 element and computed styles, fix the source code, then reload and compare screenshots to confirm the fix.

Can Chrome DevTools MCP analyze network requests and API responses?▼

Yes, the network monitor captures request URLs, methods, headers, payloads, response status codes, and timing. It helps diagnose 4xx client errors, 5xx server errors, CORS misconfigurations, and timeouts.

Does Chrome DevTools MCP support performance profiling?▼

Yes, it records performance traces covering Core Web Vitals such as Largest Contentful Paint, Cumulative Layout Shift, and Interaction to Next Paint. Record a baseline trace, fix the bottleneck, then measure again to compare.

Is it safe to attach Chrome DevTools MCP to my personal browser profile?▼

Attaching to your real profile via --autoConnect exposes all open windows including logged-in sessions. Default to the dedicated or --isolated profile, and only use a separate test profile when logged-in state is genuinely required.

When should I not use browser-based testing with DevTools?▼

Do not use it for backend-only changes, CLI tools, or code that does not run in a browser. It is designed for anything that renders in a browser, where runtime verification adds value over static analysis.

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

debug-and-fix

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

Community
Advanced
SanketAdlakSanketAdlak

hybrid-search-implementation

Implement hybrid search combining vector similarity and keyword matching with RRF fusion.

Community
Advanced
hospitaljobsinhospitaljobsin
7

e2e-testing-patterns

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

Official
Advanced