I got tired of reading CSS bugs in a tiny overlay, so I made my debugger print a report

Description and use

BeeLadybug’s exportReport consolidates all debug data into a single readable report, simplifying CSS bug hunting.

Problem

The debug overlay was too small to read comfortably and too large to avoid covering the page, making CSS bug inspection tedious.

Outcome

The new exportReport feature consolidates all debug data into a single, readable report, improving debugging efficiency and revealing bugs in the debugger itself.

Workflow

• 1. Install bee‑ladybug via npm or load via CDN in console.
• 2. Create BeeLadybugCore instance and attach adapters (e.g., WebDOMAdapter, CSSAdapter).
• 3. Call exportReport(bee, {format:'html'}) or press F8 to trigger export.
• 4. The function gathers snapshots from each adapter, compiles rows, and downloads report-YYYYMMDD-HHMM.html.
• 5. Optionally open the file, press Ctrl+P to print PDF, or parse JSON/CSV output.

Evidence

Press F8, or the EXPORT button, and you get report-YYYYMMDD-HHMM.html

Source

It’s plain HTML with a dark theme. Ctrl+P turns it into a PDF. You can also get json (for CI or an AI agent) or csv (for a spreadsheet).

Source

In headless mode (ui: false) nothing is downloaded. The function just returns the data, so it works in Node and in bots too.

Source