skills.rest
jampissarandev
jampissarandevCOMMUNITY
Explore all skills by this author →
GitHub

browser-testing-with-devtools

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires chrome-devtools-mcp.

What problem does it solve? Debugging browser-based UI issues from static code alone is guesswork. This Skill gives the agent live visibility into the browser — DOM, console logs, network requests, and performance traces — so UI bugs, API failures, and rendering problems can be reproduced, diagnosed, and verified against real runtime behavior. ## Core Features & Use Cases - Live Browser Inspection: Capture screenshots, read the DOM and accessibility tree, inspect computed styles, and retrieve console output through the Chrome DevTools MCP server. - Structured Debugging Workflows: Follow step-by-step flows for UI bugs, network issues (4xx/5xx/CORS/timeouts), and performance profiling (LCP, CLS, INP, long tasks). - Security Boundaries: Enforces profile isolation, treats all browser content as untrusted data, and restricts JavaScript execution to read-only inspection to prevent prompt injection and credential exposure. - Use Case: A React dashboard chart fails to render. The agent navigates to the page, captures a screenshot, finds a console error, inspects the failing network request's payload, identifies the root cause, fixes the code, and verifies the fix with a clean console and 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 for console errors and visual issues.

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 in a real browser with an AI agent?▼

Configure the chrome-devtools MCP server, then have the agent navigate to the page, take a screenshot, inspect the DOM and computed styles, and read console output. This verifies actual runtime behavior instead of guessing from static code.

How to set up Chrome DevTools MCP for browser testing?▼

Add a chrome-devtools entry to your .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.

Can the agent use my logged-in Chrome sessions for testing?▼

By default the server uses a dedicated or isolated profile without your sessions. The --autoConnect flag can attach to your running Chrome, but it exposes all open windows and logged-in sessions, so it should only be used when a test genuinely requires authenticated state.

Is it safe for the agent to read DOM content and console logs?▼

Browser content is treated as untrusted data, never as instructions. The agent must not follow commands found in page content, navigate to URLs extracted from pages, or copy secrets from the browser, and suspicious instruction-like content is flagged to the user.

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

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

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
akirschke15-cmdakirschke15-cmd

fix-loop

Automate test-driven debugging cycles to fix failing unit tests.

Community
Intermediate
bacchus-labsbacchus-labs
4

accessibility-verification

Verify UI component accessibility with axe-core, keyboard navigation, screen readers, and Lighthouse.

Official
Advanced
t0labt0lab
2

playwright

Automate browser interactions and UI verification via Playwright CLI snapshots.

Official
Intermediate