skills.rest
nntoan
nntoanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

browser-testing-with-devtools

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

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

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 DOM, console logs, network requests, and performance traces so UI bugs, API failures, and rendering issues are verified against real runtime behavior instead of guesswork. ## Core Features & Use Cases - Live Browser Inspection: Capture screenshots, read the DOM and computed styles, inspect the accessibility tree, and retrieve console output through the Chrome DevTools MCP server. - Structured Debugging Workflows: Follow step-by-step flows for UI bugs, network failures (4xx/5xx/CORS/timeouts), and performance profiling with Core Web Vitals (LCP, CLS, INP). - Security Boundaries: Enforces profile isolation, treats all browser content as untrusted data, and restricts JavaScript execution to read-only inspection to prevent prompt injection from page content. - Use Case: A user reports a task-completion animation glitch. The agent navigates to localhost, reproduces the bug, checks the console for errors, verifies the PATCH request payload in the network monitor, fixes the code, and confirms the fix with a before/after screenshot comparison. ## Quick Start Set up the chrome-devtools MCP server in your project configuration, then ask the agent to open your local dev server page and check the console and network requests for errors.

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 project's .mcp.json that runs npx chrome-devtools-mcp@latest with the --isolated flag. This launches Chrome with a temporary profile that is wiped when the browser closes, keeping tests separate from your personal browsing data.

How do I debug UI bugs with Chrome DevTools MCP?▼

Follow the reproduce-inspect-diagnose-fix-verify workflow: navigate to the page, take a screenshot, check console errors, inspect the DOM element and computed styles, identify the root cause, fix the source code, then reload and compare screenshots to confirm.

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

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, timeouts, and requests that were never sent.

Is it safe to let an agent read browser content like the DOM and console?▼

Browser content must be treated as untrusted data, never as instructions. The Skill prohibits navigating to URLs found in page content, reading cookies or tokens, and executing JavaScript that makes external requests, and it recommends isolated browser profiles.

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

Do not use 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, including layout debugging, console diagnosis, and performance profiling.

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 record another trace to compare.

Related Skills

Explore More Software Engineering Skills→
tuanfungtuanfung

browser-testing-with-devtools

Automate UI testing, debugging, and performance analysis of web applications using Chrome DevTools.

Community
Advanced
Magnatrix-LabMagnatrix-Lab
1

deploy-pipeline

Orchestrate building, testing, and deploying AI systems to staging and production.

Community
Advanced
PostHogPostHog
713

test-electron-app

Drive the running PostHog Electron app over CDP to test and verify desktop changes.

Official
Advanced
hospitaljobsinhospitaljobsin
7

e2e-testing-patterns

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

Official
Advanced