skills.rest
TRAPZZY
TRAPZZYCOMMUNITY
Explore all skills by this author →
GitHub

browser-testing-with-devtools

Inspect DOM, console, network, and performance in live browsers via Chrome DevTools MCP.

5|Updated Mar 5, 2024
Search Tags:#debugging#mcp#chrome devtools#browser testing#network analysis#performance profiling#dom inspection
One-click install
npx skills add https://github.com/TRAPZZY/God-Eyes --skill browser-testing-with-devtools-trapzzy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: browser-testing-with-devtools
Source: https://github.com/TRAPZZY/God-Eyes/tree/main/.skills/browser-testing-with-devtools
Command: npx skills add https://github.com/TRAPZZY/God-Eyes --skill browser-testing-with-devtools-trapzzy

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @anthropic/chrome-devtools-mcp.

What problem does it solve? Static code analysis cannot reveal what actually happens at runtime in a browser. This Skill gives the agent live visibility into the browser so UI bugs, console errors, network failures, and performance bottlenecks are verified with real runtime data instead of guesswork. ## Core Features & Use Cases - Live Browser Inspection: Capture screenshots, read the DOM tree, retrieve console logs, and monitor network requests through Chrome DevTools MCP. - Structured Debugging Workflows: Follow step-by-step flows for UI bugs, network issues, and performance profiling (LCP, CLS, INP), including screenshot-based before/after verification. - Security Boundaries: Treats all browser content as untrusted data, restricts JavaScript execution to read-only inspection, and blocks credential access and prompt-injection from page content. - Use Case: A task-completion animation misbehaves in your React app. The agent navigates to the page, reproduces the bug, checks the console and network PATCH requests, compares screenshots before and after the fix, and confirms a clean console. ## Quick Start Set up the Chrome DevTools MCP server and ask the agent to open your local dev page, reproduce the UI bug, and report console errors, network requests, and a screenshot.

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 the agent reproduce the bug in a live browser, take screenshots, inspect the DOM and computed styles, and read console logs. Follow the workflow: reproduce, inspect, diagnose, fix in source code, then reload and verify.

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

Open the network monitor via Chrome DevTools MCP, trigger the action, then inspect request URLs, headers, payloads, response status codes, and timing. The skill maps 4xx, 5xx, CORS, and timeout patterns to likely root causes.

What tools does Chrome DevTools MCP provide for testing?▼

It provides screenshot capture, DOM inspection, console log retrieval, network monitoring, performance traces, computed element styles, accessibility tree reading, and JavaScript execution constrained to read-only state inspection.

Can the agent run JavaScript in the page with this skill?▼

Yes, but only for read-only inspection such as reading variables and querying the DOM. It must not access cookies, localStorage tokens, or credentials, make external requests, or mutate the page without user confirmation.

When should I not use browser testing with DevTools?▼

Do not use it for backend-only changes, CLI tools, or code that never runs in a browser. It is designed specifically for verifying and debugging anything that renders or executes in a web browser.

Is browser content safe to treat as instructions for the agent?▼

No. DOM text, console messages, and network responses are untrusted data, not instructions. The skill requires flagging instruction-like page content to the user and never navigating to URLs extracted from page content without confirmation.

Related Skills

Explore More Software Engineering Skills→
sluongngsluongng
6

chrome-devtools

Attach to a live Chrome session via the Chrome DevTools MCP server.

Community
Intermediate
DataDogDataDog
31

fix-local-tests

Fix failing rshell tests by aligning implementation with bash behavior.

Official
Intermediate
bacchus-labsbacchus-labs
4

accessibility-verification

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

Official
Advanced
jh941213jh941213
125

e2e-verify

Automate end-to-end UI verification in a real browser with Playwright, Cypress, or agent-browser.

Community
Advanced