{"slug": "bug-ai-dev-writing-docs-at-night-made-me-find-11-real-bugs-in-my-own-library", "title": "bug.ai.dev: writing docs at night made me find 11 real bugs in my own library", "summary": "Antonio Prosperi, a 53-year-old factory worker who develops open-source projects at night, used two AI assistants to review the roughly 1,235-line CSSAdapter module of his BeeLadybug inspection overlay and found 11 real bugs, including a scan() function that omitted the isReportNoise(el) filter used by the F8 report, causing false positives on WordPress sites. He fixed the issues, including adding modifier-key checks to the keyboard handler and escaping special characters in cssPath for Tailwind classes, and documented design limits such as overflow inside overflow:hidden ancestors as known limitations. BeeLadybug is published on npm as bee-ladybug.", "body_md": "Hi everyone, I'm Antonio. I'm 53, I work as a factory worker during the day, and in the evening I keep building my own projects: modules, classes, a small 2D game engine and a debugging tool called **BeeLadybug**.\n\nLast time I told you how I [argued with AI for hours over a floating search bar](https://dev.to/antonioprosperi2svg/i-wanted-a-floating-search-bar-the-fix-was-a-few-lines-of-css-after-hours-of-arguing-with-ai-272f) that only needed a few lines of CSS.\n\nThis time the story is different. This time the AIs were more bugged than my code. 😂\n\nBeeLadybug is an open-source inspection overlay that runs inside a Shadow DOM. You send it raw data, and adapters turn the page into something you can read:\n\n```\nimport('https://cdn.jsdelivr.net/npm/bee-ladybug/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\nPaste that in the console of any page (Chrome may ask you to type `allow pasting` first), press **F6** to start the CSS hunt, and **F8** to export a full HTML report.\n\nI'm writing the documentation one adapter at a time. Canvas, WebDOM, and then **CSSAdapter**, about 1,235 lines.\n\nTo document it properly I asked an AI to read the module and explain it to me. Instead of an explanation, I got a list of bugs.\n\nThen I asked a second AI to check the same folder. It found a *different* list. One said \"10 functions\" and then listed 11. Another said \"5 points\" and wrote 6.\n\nAfter a full day of work, reading 1,500 lines of code with two AIs arguing in my head... my brain got bugged too. 😂\n\nI stopped trusting the numbers and opened the file myself. One of the claims was that the `S` key scan didn't filter the same noise as the F8 report.\n\nLine 144, inside `scan()`:\n\n```\nif (!el || isBeeChrome(el) || isSkippedTag(el)) continue;\n```\n\nLine 216, inside `snapshot()`:\n\n```\nif (!el || isBeeChrome(el) || isSkippedTag(el) || isReportNoise(el)) continue;\n```\n\nThere it was. The quick scan was missing `isReportNoise(el)`, so on a WordPress site it reported fake problems on `#wpadminbar` and on hidden elements, while the F8 report skipped them correctly.\n\nThe bug was real. The counting was wrong, but the bugs were real.\n\nMerging both reviews, these were the ones worth fixing now:\n\n`#handleKey` didn't check modifier keys.`P` and `S` keys and the hover/pin boxes `scan()` didn't filter `isReportNoise`, as shown above.` oklch()`, `lab()`, `color()` and `color-mix()` produced a `media` (like `print`) were counted as active.` will-change` could push out a real error.`touchesSheet` checked the whole subtree on every mutation, which invalidated the cache almost every frame.`css.target`, `css.hits`, `css.pin`) `cssPath` didn't escape special characters, which breaks with Tailwind classes like `sm:w-1/2`.` data-bee-ladybug-css`), so they could count them as page nodes.\nOne small fix, as an example. The keyboard shortcut problem was solved like this:\n\n```\n#handleKey(event) {\n  if (event.ctrlKey || event.metaKey || event.altKey) return;\n  if (this.core && this.core.visible === false) return;\n  // ... S scans, P pins\n}\n```\n\n`npm test`: `npm run lint`: clean` npm run typecheck`: clean\nThe things that are design limits, not bugs (like overflow inside `overflow:hidden` ancestors, or `@import` sheets not being visible), will go in the docs as **known limitations**. I think that's more honest than pretending they don't exist.\n\nBeeLadybug is on npm as [`bee-ladybug`](https://www.npmjs.com/package/bee-ladybug), and the docs (in Italian, for now) are on [beeenginejs.com](https://beeenginejs.com/ladybug/inizia/).\n\nIf you're also building things at night after work: keep going. Your brain will get bugged, but your code will get better. 🐞", "url": "https://wpnews.pro/news/bug-ai-dev-writing-docs-at-night-made-me-find-11-real-bugs-in-my-own-library", "canonical_source": "https://dev.to/antonioprosperi2svg/bugaidev-writing-docs-at-night-made-me-find-11-real-bugs-in-my-own-library-3g3c", "published_at": "2026-11-11 21:38:06+00:00", "updated_at": "2026-11-11 21:52:47.513303+00:00", "lang": "en", "topics": ["developer-tools", "ai-tools"], "entities": ["Antonio Prosperi", "BeeLadybug", "CSSAdapter", "npm", "WordPress", "Tailwind", "beeenginejs.com"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/bug-ai-dev-writing-docs-at-night-made-me-find-11-real-bugs-in-my-own-library", "markdown": "https://wpnews.pro/news/bug-ai-dev-writing-docs-at-night-made-me-find-11-real-bugs-in-my-own-library.md", "text": "https://wpnews.pro/news/bug-ai-dev-writing-docs-at-night-made-me-find-11-real-bugs-in-my-own-library.txt", "jsonld": "https://wpnews.pro/news/bug-ai-dev-writing-docs-at-night-made-me-find-11-real-bugs-in-my-own-library.jsonld"}}