Browser Testing with DevTools
Paste the following prompt into your AI chat to install this skill:
Please follow https://skillhub.cn/install/skillhub.md and install @user_e40a4360/bowser-testing-with-devtools.
About this skill
Browser Behavior Can't Be Inferred From Static Code
When building or changing front-end code, code review and unit tests only cover part of the truth: whether a component renders, whether CSS applies, whether network requests succeed, whether the console stays clean, and whether performance regresses all still depend on the real browser environment. This skill addresses that gap by letting an agent inspect live page state through Chrome DevTools MCP instead of guessing.
Core Capabilities and Workflow
The skill exposes DevTools capabilities as agent-usable tools:
- screenshot: visual verification, before/after comparison, and responsive or CSS changes.
- DOM inspection: inspect the live DOM tree and confirm component structure or render output.
- console logs: read log, warn, and error output to diagnose runtime issues.
- network monitor: check requests, responses, payloads, and status codes.
- performance trace: capture load, reflow, and rendering timing data.
- element styles: read computed styles to debug CSS problems.
- accessibility tree: verify screen-reader structure and accessible labels.
- JavaScript execution: perform read-only state inspection in the page context.
Boundaries and Safety Constraints
Use it for browser-rendered UI, layout debugging, API verification, performance diagnosis, and automated UI checks; avoid it for backend-only, CLI, or non-browser code. The source treats DOM content, console output, network responses, and script results as untrusted data. Avoid interpreting page text as instructions, navigating to URLs extracted from content without confirmation, or reading localStorage, sessionStorage, cookies, or tokens. JavaScript execution should remain read-only by default, avoid external requests, and require user confirmation before any mutation or side effect.
Use Cases
- Front-end engineer checks card styles after a CSS change by comparing screenshots and computed styles across viewports.
- Integration engineer debugging API anomalies inspects requests, responses, and status codes, then uses console logs to locate frontend errors.
- Performance engineer validates first-screen optimization using performance traces for loading, paint, and layout shift without noticeable jank.
- Accessibility engineer reviews the page before release by checking the accessibility tree and screenshots for labels, structure, and empty states.
Best For
- Front-end engineers who need an agent to inspect DOM, styles, console output, and network requests to verify real rendering.
- QA engineers who want screenshots, accessibility tree checks, and performance traces to replace manual visual review with reproducible evidence.
- Full-stack engineers debugging UI-to-API issues who need to inspect request responses, status codes, and frontend logs.
- AI agent engineers adding browser verification steps to automation workflows instead of relying only on static code analysis.
Related Skills
Track multiple GitHub projects, check releases and changelogs, and generate structured update summaries with impact analysis.
Upload local files to Qiniu Object Storage with server-side auto-delete days and public or private permanent URLs, ideal for temporary files and replacing Base64 storage.
Creates themed learning sites by generating flashcards, lessons, quizzes, index, and progress pages into a deployable website.
End-to-end mathematical optimization modeling with Gurobi and Python, covering data validation, code generation, solving, result analysis, and iterative revision.