{"slug": "i-got-tired-of-reading-css-bugs-in-a-tiny-overlay-so-i-made-my-debugger-print-a", "title": "I got tired of reading CSS bugs in a tiny overlay, so I made my debugger print a report", "summary": "A developer released BeeLadybug 0.6.1, an open-source debug overlay that adds an exportReport() function, letting users press F8 or an EXPORT button to generate a standalone HTML report of CSS and DOM issues such as !important usage, stacking contexts, intercepted clicks, long tasks and slow resources, with JSON and CSV output also available. The exporter queries each registered adapter's optional snapshot() hook, and a failing adapter degrades to a single warning row while the rest of the report still renders. Testing on real sites surfaced 25 errors and 51 warnings on a large games portal, which the developer noted were mostly intentional CSS tricks, and the report also exposed three bugs in the tool itself that are being fixed.", "body_md": "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.\n\nThe 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.\n\nOne 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?\n\nVersion **0.6.1** adds `exportReport()`. Press **F8**, or the EXPORT button, and you get `report-YYYYMMDD-HHMM.html`:\n\n`!important`, stacking contexts, intercepted clicks, overflow), long tasks, slow resources, Python metrics\nIt'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).\n\n``` js\nimport { BeeLadybugCore, exportReport } from 'bee-ladybug';\n\nconst bee = new BeeLadybugCore();\n// ...attach adapters...\nexportReport(bee, { format: 'html' }); // downloads the file\n```\n\nIn headless mode (`ui: false`) nothing is downloaded. The function just returns the data, so it works in Node and in bots too.\n\nThe 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.\n\nFirst, my own games portal. It found:\n\n`.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.\n\nThe best part of testing on real pages: the report exposed its own weak spots.\n\n`×N`\nAll three are being fixed. A debugger that finds bugs in itself on its first real run felt like a good sign.\n\nInstall it in your project:\n\n```\nnpm i bee-ladybug\n```\n\nOr try it right now without installing: open any page, press F12 and paste this in the console, then press F8 for the report.\n\n```\nimport('https://cdn.jsdelivr.net/npm/bee-ladybug@0.6.1/src/index.js')\n  .then(({ BeeLadybugCore, WebDOMAdapter, CSSAdapter }) => {\n    const bee = new BeeLadybugCore();\n    new WebDOMAdapter(bee, { root: document.body }).attach();\n    new CSSAdapter(bee).attach();\n    window.bee = bee;\n  });\n```\n\nFeedback welcome, especially from people debugging Canvas games and DOM-heavy pages.", "url": "https://wpnews.pro/news/i-got-tired-of-reading-css-bugs-in-a-tiny-overlay-so-i-made-my-debugger-print-a", "canonical_source": "https://dev.to/antonioprosperi2svg/i-got-tired-of-reading-css-bugs-in-a-tiny-overlay-so-i-made-my-debugger-print-a-report-48n9", "published_at": "2026-10-26 22:07:26+00:00", "updated_at": "2026-10-26 22:12:16.329066+00:00", "lang": "en", "topics": ["developer-tools", "ai-agents"], "entities": ["BeeLadybug", "bee-ladybug", "jsDelivr", "Node"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/i-got-tired-of-reading-css-bugs-in-a-tiny-overlay-so-i-made-my-debugger-print-a", "markdown": "https://wpnews.pro/news/i-got-tired-of-reading-css-bugs-in-a-tiny-overlay-so-i-made-my-debugger-print-a.md", "text": "https://wpnews.pro/news/i-got-tired-of-reading-css-bugs-in-a-tiny-overlay-so-i-made-my-debugger-print-a.txt", "jsonld": "https://wpnews.pro/news/i-got-tired-of-reading-css-bugs-in-a-tiny-overlay-so-i-made-my-debugger-print-a.jsonld"}}