skills.rest
nicorevo
nicorevoCOMMUNITY
Explore all skills by this author →
GitHub

browser-testing-with-devtools

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

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

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 — DOM state, console errors, network traffic, and performance metrics — so UI bugs, API failures, and rendering issues are verified against real runtime behavior instead of guessed from source code. ## Core Features & Use Cases - Live Browser Inspection: Capture screenshots, read the DOM and accessibility tree, inspect computed styles, and retrieve console logs through the Chrome DevTools MCP server. - Network and Performance Analysis: Monitor request/response payloads, diagnose 4xx/5xx/CORS/timeout failures, and record performance traces covering LCP, CLS, INP, and long tasks. - Structured Debugging Workflows: Follow reproduce-inspect-diagnose-fix-verify flows for UI bugs, network issues, and performance regressions, with screenshot-based before/after verification. - Security Boundaries: Enforces profile isolation, treats all browser content as untrusted data, and restricts JavaScript execution to read-only inspection. - Use Case: A task-completion animation misbehaves in your app. The agent navigates to localhost, reproduces the bug, checks the console and network calls, identifies a duplicate PATCH request, fixes the code, and verifies with a clean console and matching screenshots. ## Quick Start Ask the agent to open your local dev server in Chrome via DevTools MCP, reproduce the UI bug, and report console errors, network requests, 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 set up Chrome DevTools MCP for browser testing?▼

Add a chrome-devtools entry to your .mcp.json that runs npx with chrome-devtools-mcp@latest and the --isolated flag. This launches Chrome with a temporary profile that is wiped when the browser closes, keeping tests separate from your personal browsing.

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, identify the root cause, fix the source code, then reload and compare screenshots to confirm.

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; if logged-in state is required, use a separate test profile signed into only the account under test.

When should I not use browser testing with DevTools MCP?▼

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, console behavior, network calls, and performance in a live browser environment.

Why is browser content treated as untrusted data?▼

DOM text, console logs, and network responses can contain injected instructions designed to manipulate the agent. The skill forbids interpreting page content as commands, navigating to URLs found in pages, or reading cookies and tokens via JavaScript execution.

How do I verify frontend performance with DevTools MCP?▼

Record a baseline performance trace, then check Largest Contentful Paint, Cumulative Layout Shift, Interaction to Next Paint, and long tasks over 50ms. After fixing the bottleneck, record a second trace and compare it against the baseline.

Related Skills

Explore More Software Engineering Skills→
langwatchlangwatch
3.5k

browser-pair

Drives a headed Playwright Chromium session for interactive UI feedback and live code verification.

Official
Intermediate
jaisonerickjaisonerick

fix-bugs

Reproduce QA-reported failures with failing tests and apply minimal code fixes.

Community
Advanced
Jignesh-PonamwarJignesh-Ponamwar
5

test-writer

Generate unit, integration, and end-to-end tests for Python and JavaScript projects.

Community
Intermediate
cheatcode-aicheatcode-ai
15

webapp-testing

Automate local web application testing with Playwright and headless Chromium.

Official
Intermediate