browser-devtools
CommunityAutomate and debug browsers with Playwright.
Authorvukhanhtruong
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill helps developers automate, debug, and analyze web pages by orchestrating Playwright to navigate, inspect console logs, monitor network activity, capture screenshots, and run in-depth performance tests. It reduces manual debugging toil and speeds up web development workflows.
Core Features & Use Cases
- Automated Web Debugging: Navigate to pages, inspect console output, and identify errors quickly.
- UI Analysis & Testing: Take screenshots, snapshot DOM elements, and verify UI behavior across scenarios.
- Performance & Network Analysis: Measure Core Web Vitals, monitor API calls, and analyze network requests.
- Chained Workflows: Reuse sessions across steps to build deterministic debugging sequences.
Quick Start
Install dependencies and Playwright browsers, build the skill, and test with a simple navigation example:
- Run: npm install
- Build: npm run build
- Install browsers: npm run install-browsers
- Test navigation: node dist/scripts/navigate.js --url https://example.com
Dependency Matrix
Required Modules
None requiredComponents
scripts
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: browser-devtools Download link: https://github.com/vukhanhtruong/claude-rock/archive/main.zip#browser-devtools Please download this .zip file, extract it, and install it in the .claude/skills/ directory.