debugger

Execute automated browser user flows and monitor console logs with Playwright MCP.

8|1|Updated Oct 29, 2025
One-click install
npx skills add https://github.com/tomeraitz/dotclaude-templates --skill debugger-tomeraitz
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: debugger
Source: https://github.com/tomeraitz/dotclaude-templates/tree/main/.claude/skills/debugger
Command: npx skills add https://github.com/tomeraitz/dotclaude-templates --skill debugger-tomeraitz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates the verification of frontend changes by executing user flows directly in a browser, ensuring that new code functions correctly and doesn't introduce regressions.

Core Features & Use Cases

  • Automated Browser Testing: Simulates user interactions like clicks, typing, and navigation.
  • Console Log Monitoring: Captures and analyzes browser console output for errors and debug messages.
  • Evidence Capture: Generates snapshots and screenshots for documentation and analysis.
  • Use Case: After implementing a new feature on a login page, use this Skill to automatically navigate to the login page, fill in credentials, submit the form, and verify that the login is successful and no errors appear in the console.

Quick Start

Use the debugger skill to navigate to http://localhost:3000/dashboard and click the 'Save' button.

Frequently Asked Questions about debugger

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

FAQPage Schema
How do I automate frontend verification after making code changes?

You can verify frontend changes by executing automated user flows directly in a browser using Playwright. This approach simulates user interactions, monitors console logs for errors, and captures screenshots to ensure new code functions correctly and does not introduce regressions.

Do I need Playwright MCP running to automate browser testing?

Yes, the Playwright MCP server must be running and accessible to execute browser automation tasks. It provides the necessary environment to simulate user interactions, monitor console logs, and capture visual evidence for frontend verification.

What is automated browser testing for frontend changes?

Automated browser testing simulates user interactions like clicks, typing, and navigation to validate expected application states. It captures console logs and visual evidence, ensuring new frontend features work correctly and do not introduce regressions.

Can I capture console logs and screenshots during Playwright browser automation?

Yes, during Playwright browser automation, you can capture and analyze browser console output for errors and debug messages. The process also generates snapshots and screenshots to provide visual evidence for documentation and analysis of user interactions.

What's the best way to check for frontend regressions after implementing a new feature?

The best way to check for frontend regressions is automating user flows in a browser to verify expected interactions and application states. By simulating user actions and monitoring console logs for errors, you can validate functionality and capture visual evidence of success.

Why does frontend browser testing fail to capture console errors during automated flows?

Frontend browser testing requires the Playwright MCP server to be running and accessible. If the server is not properly configured, automated user flows cannot monitor console logs for errors or capture screenshots and snapshots during verification.