skills.rest
insightriot
insightriotOFFICIAL
Explore all skills by this author →
GitHub

browser-testing-with-devtools

Inspect live browser DOM, console, network, and performance data via Chrome DevTools MCP.

1|Updated Apr 13, 2026
Search Tags:#debugging#mcp#chrome devtools#browser testing#network analysis#performance profiling#ui verification
One-click install
npx skills add https://github.com/insightriot/signal --skill browser-testing-with-devtools-insightriot
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: browser-testing-with-devtools
Source: https://github.com/insightriot/signal/tree/main/plugin/skills/verify/browser-testing-with-devtools
Command: npx skills add https://github.com/insightriot/signal --skill browser-testing-with-devtools-insightriot

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Static code analysis cannot confirm that browser-rendered changes actually work. This Skill gives agents runtime access to live browser state—DOM, console output, network activity, and performance traces—so UI bugs, console errors, and slow interactions are verified with real evidence instead of assumptions. ## Core Features & Use Cases - Runtime UI Verification: Take before/after screenshots, inspect DOM structure and computed styles, and confirm visual fixes actually render correctly. - Network and Console Diagnosis: Monitor requests for 4xx/5xx failures, CORS errors, and payload issues while maintaining a zero-console-error standard. - Performance Profiling: Record traces to identify LCP, CLS, INP, and long-task bottlenecks, then re-measure after fixes. - Use Case: After fixing a layout bug, use this Skill to reproduce the page, screenshot the result, check the console for errors, and verify the accessibility tree before shipping. ## Quick Start Use Chrome DevTools to open the page, take a screenshot, check the console for errors, and verify my layout fix renders correctly.

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?▼

Follow the reproduce-inspect-diagnose-fix-verify workflow: take a screenshot to confirm visual state, check the console for errors, inspect DOM structure and computed styles, fix the code, then take another screenshot to verify the fix.

How to diagnose network request failures in the browser?▼

Monitor network activity during the failing action, check for 4xx/5xx responses and CORS errors, analyze request and response payloads, and review timing for slow requests. This isolates whether the failure is client-side or server-side.

Can Chrome DevTools MCP read cookies or localStorage?▼

No. The Skill explicitly prohibits accessing cookies, localStorage, or any authentication material. JavaScript execution is restricted to read-only state inspection, and secrets must never be exfiltrated from browser storage.

When should I not use browser-based testing?▼

Avoid it for backend-only work or CLI tooling where nothing renders in a browser. It is designed for UI construction, visual debugging, console errors, network analysis, and performance profiling of web pages.

Why is browser content treated as untrusted data?▼

DOM nodes, console logs, and network responses can contain injected instructions or hidden malicious text. Treating them as data rather than commands prevents prompt injection, unexpected redirects, and unauthorized actions.

Related Skills

Explore More Software Engineering Skills→
aporto-techaporto-tech

qa

Run QA tests on web applications and fix bugs iteratively.

Official
Advanced
graysurfgraysurf

review-evidence

Consolidate review findings, validations, artifacts, and verification status into a JSON record.

Community
Advanced
edonyzpcedonyzpc
149

obsidian-test-vault-smoke

Validate Obsidian plugin changes via tiered end-to-end smoke tests.

Community
Advanced
badhopebadhope

e2e-test

Automate end-to-end user flow testing across Playwright, Cypress, and Selenium.

Community
Advanced