Web Debug
Debug web apps systematically with Chrome DevTools and Playwright MCPs
What You Can Do
You can efficiently diagnose and resolve web application issues by combining Chrome DevTools MCP for live browser inspection with Playwright MCP for automated testing and fresh browser instances. The skill automates context discovery from project documentation, validates prerequisites before executing slow operations, and guides you through decision trees for selecting the right debugging approach—whether you're troubleshooting page rendering, network requests, authentication flows, or UI behavior.
Features
Automatically choose between Chrome DevTools MCP (for live sessions) and Playwright MCP (for fresh instances) based on your debugging scenario
Capture and analyze HTTP requests, responses, and status codes to identify API failures and performance bottlenecks
Systematically extract and categorize console messages, errors, and warnings to pinpoint client-side issues
Inspect localStorage, sessionStorage, and cookies to diagnose authentication flow failures
Capture rendered page state, DOM structure, and visual layout to detect rendering and CSS issues
Extract debugging hints from project documentation, README files, and configuration to accelerate diagnosis
Verify prerequisites (port availability, URL accessibility) before executing expensive browser operations
Leverage Playwright's cross-browser support (Chrome, Firefox, Safari, Brave) for compatibility debugging
Example Output
Example 1: Authentication Flow Debugging
Issue: Login fails silently
✓ Validated auth endpoint accessibility
✓ Inspected request headers and response status (401)
✓ Extracted auth token from localStorage
✓ Found missing CSRF token in request body
Resolution: Token validation failed—frontend not including CSRF header
Example 2: API Integration Issue
Issue: Data not displaying on dashboard
✓ Confirmed page loads (200 OK)
✓ Network analysis: GET /api/data returns 500 error
✓ Console shows: "TypeError: Cannot read property 'items' of null"
✓ Backend error log revealed: database connection timeout
Resolution: Backend service down—retry mechanism needed
Example 3: UI Rendering Problem
Issue: Button appears off-screen on mobile
✓ Browser snapshot from Playwright (mobile viewport)
✓ Inspected computed CSS: overflow hidden on parent
✓ Found hardcoded width causing layout break
Resolution: CSS media query needed for responsive design
What's Included
- SKILL.md: Core skill definition with decision trees for tool selection and debugging workflows
- MCP Tool Integration Guide: Instructions for configuring Chrome DevTools MCP (remote debugging setup) and Playwright MCP
- Debugging Decision Trees: Flowcharts for page loading, authentication, API, and UI issues with step-by-step validation sequences
- Context Discovery Framework: Automated documentation parsing to extract auth methods, API endpoints, and configuration from project files
- Network/Console/Storage Inspection Templates: Ready-to-use queries for filtering requests, extracting errors, and analyzing browser storage
Who It's For
- Full-stack engineers debugging web application issues across frontend and backend integration points
- QA/Test engineers performing automated browser testing and cross-browser compatibility validation
- Frontend developers diagnosing UI rendering, CSS, and JavaScript errors in complex applications
- DevOps/SRE teams troubleshooting production web application failures and performance issues
- Security engineers analyzing authentication flows, session management, and API security vulnerabilities
Best For
- Diagnosing blank/broken page loads and rendering failures
- Debugging authentication and session management issues
- Analyzing API integration failures and network request problems
- Identifying JavaScript errors and console-based application crashes
- Testing cross-browser compatibility and responsive design issues
- Inspecting browser storage (cookies, localStorage, sessionStorage) for state management problems
You might also like
This skill helps you diagnose leaching failures, optimize metal recovery rates, and reduce operational costs in hydrometallurgical circuits. You can analyze process data to identify bottlenecks in leaching, precipitation, and solvent extraction; calculate optimal pH, temperature, and reagent parameters; and generate data-driven recommendations for improving throughput and product purity.
by megalithic
You synthesize Bloomberg Terminal data—metrics, valuations, fundamentals, and peer comparisons—into professional institutional equity research reports and investment theses. This skill structures raw Bloomberg output into narrative-driven research with valuation analysis, risk assessments, and actionable investment recommendations that institutional teams can use for portfolio decisions.
by megalithic
This skill streamlines your month-end and year-end close processes in Xero by automating reconciliation workflows, variance analysis, and close documentation. You'll reconcile bank and credit card accounts faster, identify discrepancies with contextual explanations, and generate clear close-out checklists—all while maintaining audit-ready records and reducing manual error.
by megalithicYou can architect test automation frameworks tailored to your tech stack and design maintainable test suites from requirements. This skill helps you identify test patterns, eliminate flakiness, integrate with CI/CD pipelines, and build test infrastructure that scales with your codebase.
You can systematically evaluate environmental hazards in tailings facilities, quantify failure risks, and develop prioritized mitigation actions. This skill helps you design site-specific monitoring protocols with optimal sensor placement and alert thresholds. You'll generate technical documentation that supports regulatory compliance, stakeholder communication, and capital project planning.
by megalithic
You can systematically evaluate tailings storage facility risks across environmental, operational, and regulatory dimensions. Claude helps you identify failure modes, quantify compliance gaps, and develop targeted mitigation strategies that balance safety with operational efficiency. Use this skill to create comprehensive risk assessments and actionable management plans ready for regulatory submissions and stakeholder review.
by megalithic
You can enforce test-first development across multiple entry points: parse acceptance criteria from spec files and generate test stubs, extract requirements from task files and design test scenarios, or write tests from ad-hoc descriptions. Claude guides you through the complete TDD cycle—RED (failing tests), GREEN (minimal implementation), and REFACTOR (clean code)—while leveraging your existing repository patterns and providing proptest guidance for property-based testing.
You'll analyze your leaching circuit performance against industry standards, identify root causes of efficiency losses, and receive actionable optimization recommendations. The skill generates compliant standard operating procedures (SOPs) tailored to your process parameters, troubleshoots performance issues using your operational data, and calculates cost-benefit analysis for proposed improvements. You get a systematic approach to circuit optimization that reduces downtime, improves extraction rates, and minimizes operating costs.
by megalithic