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
Catch miscategorized transactions, validate account mappings, and identify posting errors before financial reconciliation. You can scan transaction batches, flag suspicious activity, and receive detailed audit reports with correction recommendations. This helps you prevent costly accounting errors and accelerate your monthly or quarterly close process.
by megalithic
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 can upload PitchBook reports, transaction summaries, and company profiles, then extract structured insights on deal metrics, market trends, and investment opportunities. Claude analyzes transaction patterns, financials, and risk factors to generate due diligence summaries, comparative analyses, and investment theses—saving you hours of manual data synthesis.
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 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 get an expert troubleshooter for your high-temperature metal processing operations. Submit your furnace parameters, process metrics, and observations—receive root-cause analysis, quantified optimization recommendations, and predictive maintenance guidance. Reduce yield loss, cut energy consumption, and extend equipment life while maintaining product quality and regulatory compliance.
by megalithic
You'll design maintainable, scalable test automation frameworks tailored to your tech stack and team. Claude helps you diagnose and fix flaky tests by identifying root causes (race conditions, async issues, data isolation problems) and providing targeted solutions. You'll establish testing strategies that reduce debugging time, improve CI/CD reliability, and create lasting documentation your team can follow.
You can structure end-to-end SAP data migration planning by generating comprehensive readiness checklists, data quality validation rules, and risk assessments. This skill creates detailed migration strategies that identify data gaps, compliance risks, and cutover dependencies—helping you mitigate costly migration failures before they happen.
by megalithic