kaboom-browser-ai-devtools

What problem does it solve?

Debugging modern web apps is slow when you need to correlate console errors, failed network requests, DOM state, and user interactions across time. This Skill streamlines gathering browser evidence and turning it into actionable outputs for AI coding assistants.

Core Features & Use Cases

• Console & error capture — Stream log/warn/error entries with full arguments for faster root-cause analysis.
• Network failure investigation — Collect failed requests (optionally with response bodies) to pinpoint backend and auth issues.
• DOM inspection & evidence snapshots — Query elements with CSS selectors and capture DOM snapshots to align UI changes with failures.
• Recording and test generation — Record user interactions and generate Playwright tests to prevent regressions.
• Quality checks — Run accessibility (WCAG) audits with export and monitor Web Vitals (LCP/CLS/INP/FCP) for performance regressions.
• Security auditing signals — Surface credentials/PII/header/cookie issues to support safer fixes.
• Browser automation via MCP tools — Navigate and interact programmatically to reproduce issues and verify fixes.

Quick Start

Ask your AI coding assistant to connect to the Kaboom MCP server and run kaboom_recording_start while you reproduce the bug, then stop recording and generate a Playwright test.