e2e-debug

Inject console logs into source files and observe browser output for frontend debugging.

3|Updated Mar 9, 2026
One-click install
npx skills add https://github.com/iamcxa/kc-claude-plugins --skill e2e-debug-iamcxa
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: e2e-debug
Source: https://github.com/iamcxa/kc-claude-plugins/tree/main/e2e-pipeline/skills/e2e-debug
Command: npx skills add https://github.com/iamcxa/kc-claude-plugins --skill e2e-debug-iamcxa

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps developers rapidly diagnose frontend runtime bugs by injecting observable console.log probes into suspect source files, observing their output in a browser session, and ensuring all injections are reliably removed afterwards.

Core Features & Use Cases

  • Orchestrates a four-phase workflow: Analyze, Inject, Observe, Diagnose, and mandatory Cleanup with manifest-driven and grep fallbacks.
  • Supports Teams (persistent observer) and subagent modes, experiment mode for structured runs, automatic multi-round hypothesis loops, and history capture for resuming with --continue.
  • Use case: reproduce a UI bug, inject targeted console logs to reveal data shape mismatches, capture observed console output and network activity, apply a suggested fix, and remove all debug artifacts.

Quick Start

Run /e2e-debug with a concise bug description and target URL to start an inject-observe-cleanup session.

Frequently Asked Questions about e2e-debug

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

FAQPage Schema
How do I debug frontend runtime bugs by injecting console logs into source files?

You can debug frontend runtime bugs by orchestrating an inject-observe-cleanup workflow that inserts observable console.log probes into suspect source files, captures browser output, and removes all injections afterwards via a manifest-driven cleanup.

What is the best way to reproduce and diagnose UI bugs in a browser session?

The best way to reproduce UI bugs in a browser session is to inject targeted console logs to reveal data shape mismatches, capture observed console output and network activity, apply a suggested fix, and remove all debug artifacts.

How do I ensure injected debug console logs are removed after browser testing?

To ensure injected debug logs are removed after browser testing, a mandatory cleanup phase uses manifest-driven removal with a grep fallback to reliably strip all injected console probes from the source files.

Can I resume an e2e debugging session if I need to stop and continue later?

Yes, you can resume an e2e debugging session using history capture designed for --continue workflows, allowing you to pick up persistent or ephemeral observer modes and iterative hypothesis loops where you left off.

Does this browser testing debugging approach support automated multi-round hypothesis loops?

Yes, the browser testing debugging approach supports automatic multi-round hypothesis loops alongside Teams persistent observer and subagent observation modes to systematically diagnose frontend runtime issues.

When should I not use an inject-observe-cleanup workflow for web application debugging?

You should not use an inject-observe-cleanup workflow when your web application debugging requires no source file modifications, as this approach relies on directly injecting temporary console logs into suspect files to observe runtime behavior.