BeeLadybug, my open-source debug overlay, has always shown what's happening in real time: FPS, logs, !important, z-index traps, clicks being swallowed by the wrong element.
The problem is the overlay. Make it big and it covers the game or the page you're debugging. Make it small, the way it is now, and you're squinting at a phone-sized box on the left of the screen while the rows scroll past.
One evening I gave up and asked myself a simple question: why can't I just press a key and get everything on one page, to read calmly?
Version 0.6.1 adds exportReport(). Press F8, or the EXPORT button, and you get report-YYYYMMDD-HHMM.html:
!important, stacking contexts, intercepted clicks, overflow), long tasks, slow resources, Python metrics
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).
import { BeeLadybugCore, exportReport } from 'bee-ladybug';
const bee = new BeeLadybugCore();
// ...attach adapters...
exportReport(bee, { format: 'html' }); // downloads the file
In headless mode (ui: false) nothing is downloaded. The function just returns the data, so it works in Node and in bots too.
The Core still knows nothing about Canvas, the DOM or Python. Each adapter can now register an optional snapshot() hook that returns rows like { severity, selector, rule, value, source }. The exporter asks every registered adapter for its snapshot, and if one throws, it becomes a single warn row while the rest of the report still renders. A new adapter only has to implement snapshot() to show up in the report.
First, my own games portal. It found:
.entry-content creating a stacking context that Then, for fun, a big professional games portal. 25 errors, 51 warnings 😄 To be fair, most of them are intentional tricks: negative margins so a carousel can bleed to the edges, and content clipped on purpose inside cards. Their site works great. It still averaged ~52 FPS with 3× my DOM nodes, which taught me more than the error count did.
The best part of testing on real pages: the report exposed its own weak spots.
×N
All three are being fixed. A debugger that finds bugs in itself on its first real run felt like a good sign.
Install it in your project:
npm i bee-ladybug
Or try it right now without installing: open any page, press F12 and paste this in the console, then press F8 for the report.
import('https://cdn.jsdelivr.net/npm/bee-ladybug@0.6.1/src/index.js')
.then(({ BeeLadybugCore, WebDOMAdapter, CSSAdapter }) => {
const bee = new BeeLadybugCore();
new WebDOMAdapter(bee, { root: document.body }).attach();
new CSSAdapter(bee).attach();
window.bee = bee;
});
Feedback welcome, especially from people debugging Canvas games and DOM-heavy pages.