skills.rest
vukhanhtruong
vukhanhtruongCOMMUNITY
Explore all skills by this author →
GitHub

browser-devtools

Automate browser debugging and web-automation tasks with Playwright.

9|Updated Oct 22, 2025
Search Tags:#automation#debugging#playwright#network#web-testing#browser
One-click install
npx skills add https://github.com/vukhanhtruong/claude-rock --skill browser-devtools
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: browser-devtools
Source: https://github.com/vukhanhtruong/claude-rock/tree/main/plugins/browser-devtools/skills
Command: npx skills add https://github.com/vukhanhtruong/claude-rock --skill browser-devtools

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

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

Frequently Asked Questions about browser-devtools

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate browser debugging and web testing with Playwright?▼

Playwright automates browser debugging by orchestrating navigation, console inspection, screenshots, and network monitoring across Chromium, Firefox, and WebKit. Install dependencies with npm install, build the skill, run npm run install-browsers, then execute scripts like navigate.js to start debugging workflows.

Can I use Playwright to monitor network requests and measure performance metrics?▼

Yes. Playwright captures network activity, monitors API calls, and measures Core Web Vitals during automated sessions. The skill outputs JSON-formatted performance data suitable for analysis pipelines, enabling you to audit requests and metrics across headless and headed modes.

What's the best way to take screenshots and inspect DOM elements during automated testing?▼

Playwright's automation snapshots DOM elements and captures screenshots at any point in your test flow. Use flexible selectors to locate and interact with UI components, then export results as JSON for verification across multiple browser engines without manual inspection.

Does Playwright support headless and headed browser modes for web automation?▼

Yes. Playwright supports both headless and headed execution modes for Chromium, Firefox, and WebKit, letting you run fast automated tests in CI/CD or debug visually in real time with the browser window open.

How do I build deterministic browser automation workflows that reuse sessions across steps?▼

Chain Playwright actions within a single session to maintain state across navigation, inspection, and testing steps. Robust wait strategies and flexible selectors ensure reliable element discovery, enabling reproducible debugging sequences for complex web interactions.

What are the prerequisites for running Playwright-based browser automation?▼

Install Node.js, run npm install to fetch dependencies, and execute npm run install-browsers to download Chromium, Firefox, and WebKit binaries. These prerequisites prepare your environment to execute Playwright scripts for web debugging and QA workflows.

Related Skills

Explore More Software Engineering Skills→
CommandCodeAICommandCodeAI
103

playwright-skill

Automate browser testing with Playwright across Chromium, Firefox, and WebKit.

Official
Intermediate
KanTrunKanTrun

chrome-devtools

Automate browser tasks with Puppeteer CLI scripts and JSON outputs.

Community
Advanced
matt-rileymatt-riley
1

mocha-to-jest-migration

Migrate Mocha/Chai/Sinon test suites to Jest with incremental validation.

Community
Advanced
williamzujkowskiwilliamzujkowski
17

e2e-testing

Automate end-to-end web app testing with Playwright or Cypress in CI/CD pipelines.

Community
Intermediate