This content originally appeared on DEV Community and was authored by Alexey Sokolov
Large Language Models are impressive, but if you’ve ever asked one to debug a form or UI flow,
you’ve probably seen it hallucinate.
Example: You ask it to fix a “required” field bug, and it rewrites half your logic instead.
Why? Because the model never sees the real state of the page.
- Screenshots: too opaque. The AI sees pixels, not properties.
- Raw HTML: too noisy. Includes unused markup, scripts, templates, everything.
- What’s missing: the runtime state the browser is actually rendering.
Capturing runtime DOM as JSON
We built a small browser extension (Chrome + Firefox) that takes a snapshot of the current DOM and serializes it as JSON.
It includes things like:
- visibility / hidden / required / disabled
- input values and validation messages
- dataset / aria attributes
- trimmed text content
- lightweight selector paths
In other words: not the code before render, not pixels after render, but the structured state in between.
Why this matters
- Debugging: capture what the form really looked like when a bug happened.
- Reproducible bug reports: instead of vague screenshots, share JSON of the exact state.
- Test automation: compare snapshots before and after an action.
- Prompt engineering: feed context to LLMs in a way they can parse and reason about.
Security
- Runs locally, read-only, in the browser.
- No telemetry, no external calls.
- Doesn’t modify the page, only reads DOM.
- Data leaves your machine only if you copy it.
Try it out
How would you use something like this — for debugging, testing, or maybe in a way we haven’t thought of yet?
This content originally appeared on DEV Community and was authored by Alexey Sokolov