DEV Community

Alechko
Alechko

Posted on

Real Runtime Snapshots: Why They Matter for Debugging and Design.

#design #llm #webdev #javascript

Static code lies.

It’s not that the code is wrong — it’s that it’s incomplete.

You’ve seen this before:

  • In the HTML template, an input looks fine. At runtime it’s hidden.
  • Validation rules exist, but the markup doesn’t show them.
  • A <div> says color: green; but your background is bright red — and nobody notices until QA screams.

If you feed this to an LLM (or even a colleague), you’ll get nonsense fixes.

LLMs start rewriting the whole file instead of a tiny patch.

Humans shrug: “looks fine in the screenshot.”

Because screenshots and static code don’t carry the truth.

Why runtime snapshots matter

A runtime snapshot is the actual state of the DOM — here and now.

  • Visibility: is it really rendered, or hidden with CSS?
  • Validation: is the field required, does it fail .validity?
  • Computed styles: what’s the actual color, padding, font?
  • Focus: which element is active?

This isn’t fluff. It’s the difference between:

🖼️ “Here’s a screenshot, tell me what’s wrong.”

🤖 “What do you want? It looks fine.”

vs.

📄 “Here’s the JSON snapshot: text color = green, background = red.”

🤖 “Got it. Green on red = not readable.”

That’s when debugging and design reviews suddenly make sense.

You can hack it manually (but it sucks)

Sure, you can call:

document.activeElement
getBoundingClientRect()
element.validity
getComputedStyle()
Enter fullscreen mode Exit fullscreen mode

Piece by piece, you’ll reconstruct the state.

It works, but it feels like playing Mr. Wolf from Pulp Fiction — messy, slow, and only called in emergencies.

Tools that help

There are tools that automate this. One example is e2llm:

it grabs the runtime DOM state → exports structured JSON (attributes, hierarchy, visibility, validation).

It’s local-only, no telemetry, copy-ready JSON.

I’ve found it saves hours when debugging forms or doing quick design sanity checks.

Instead of LLMs (or humans) guessing, they actually see.

The bigger picture

This isn’t about hype. It’s about time saved:

  • Debugging UI flows faster.
  • Making design reviews objective.
  • Giving LLMs reproducible inputs so they stop nuking your whole file.

💬 How do you handle runtime state today?

Share your hacks, tools, or pain stories. I’ll be answering questions in the comments — curious what tricks you use.

Top comments (0)