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
You can instantly diagnose leaching circuit performance issues, identify bottlenecks limiting recovery rates, and receive data-driven recommendations to optimize extraction efficiency. The skill analyzes operational parameters like temperature, pH, residence time, and reagent consumption to pinpoint underperformance root causes and suggest targeted improvements that reduce costs while maximizing mineral recovery.
by megalithic
You pull company financials, market data, and deal metrics from Capital IQ, then synthesize them into compelling investment theses. The skill helps you identify competitive advantages, financial trends, and growth catalysts while structuring your analysis using professional frameworks. You'll transform raw data into actionable investment insights with built-in validation and risk assessment.
by megalithic
Systematically troubleshoot dewatering circuit problems by analyzing solids recovery, moisture content, and filtration performance. Use Claude-assisted process modeling to identify root causes, model alternative configurations, and predict performance improvements. Optimize separation parameters and circuit configurations to increase throughput and product quality while minimizing water loss.
by megalithic
You get a detailed audit of your ABAP code that identifies performance bottlenecks, security vulnerabilities, and compliance gaps with SAP standards. This skill analyzes database queries, memory management, code structure, and documentation to deliver actionable optimization recommendations that improve maintainability and runtime efficiency.
by megalithic
You can automatically validate journal entries for accounting rules compliance, detect errors before posting to QuickBooks, and generate standardized narratives for audit trails. Process multiple entries in batches, verify account codes and debit/credit balances, and export formatted entries ready for QuickBooks import—all while flagging duplicate or suspicious entries for review.
by megalithic
This skill transforms raw Bloomberg data into actionable investment insights by extracting key metrics, synthesizing multiple data sources, and generating comprehensive analytical reports automatically. You can benchmark companies against peers, analyze earnings trends, assess portfolio risks, and create presentation-ready analyses in minutes. Perfect for analysts who need to turn market data into investment theses quickly.
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
Connect your FreshBooks account to pull real-time financial data—invoices, expenses, revenue—and generate professional financial reports, trend analysis, and actionable insights. Create executive summaries, profitability breakdowns, cash flow forecasts, and custom metrics tailored to your business goals.
by megalithic