devtape-viewer

DevTape overlay — Shadow DOM debug panel with causal timeline, DOM snapshots, and export for browser failures.

Install

npm install devtape-viewer

Usually installed via devtape-browser (overlay: true) or devtape-react. Mount manually when you want full control:

import { FailureRecorder } from "devtape-core";
import { mountEvidenceViewer } from "devtape-viewer";

const recorder = new FailureRecorder();
const viewer = mountEvidenceViewer(recorder, { environment: "development" });

viewer.refresh();
viewer.dispose();

Features

• Single timeline (not separate Console/Network tabs)
• Click an event for labeled fields, correlations, and DOM snapshot
• Clear — wipe live timeline and frozen bundle
• Resizable — drag the top edge; height persists in localStorage
• Export: Copy JSON, Copy Markdown, Copy prompt, Download JSON/MD, Download HTML
• In the local demo, downloads prefer writing into devtape_output/ when the save endpoint is available
• Correlations shown as evidence, not root cause

Download HTML is enabled only after a failure freezes. It saves one dependency-free interactive report that can be opened offline, containing only the same already-redacted frozen bundle shown in the overlay.

Requirements

• Browser Document with body and Shadow DOM support
• Development environment (refuses production unless allowProduction: true)

The overlay mounts inside an open Shadow DOM host (#devtape-viewer-host) so host-app global CSS cannot restyle DevTape controls.

License

MIT