My WebAssembly debugger lets you time-travel with your scroll wheel. WebAssembly (and Ghostty) are so fast that a step back just reruns from scratch.

GitHub:

Everything needs event sourcing by default.

This is awesome man

so blinkenlights @jartine made but without its aesthetics?

What is the optimization? Keeping the diff of the memory for each instruction stepping? Because how will you unexecute an instruction usually?

The optimization is to make it fast enough that I just replay everything to “unexecute”.

No I mean how do you capture all of it such that it does not take gigabytes of memory to record a program's execution?

What do you need gigabytes for? There’s an interpreter. A step forward executes the next instruction. A step back executes all the instructions from the beginning up to the previous step. The speed is what allows that to feel instant. There’s no capturing and no caching.

"A step back executes all the instructions from the beginning up to the previous step." Oh so this is the tradeoff. Thank you lmao. This is what I wanted to know.

It’s fascinating that program execution accumulates state, so stepping back means replaying from the start up to step n-1.

I have wanted this, so very many times. Also video like controls would be good with speed options to debug in real time. Play, Stop, SlowMo, Step.

I’ve created a free Discord community for everything QIP, the wasm component system behind this:

Wasmは純粋な計算だけだから再実行って手段が実現できるのか

I assume you will make snapshots periodically to simulate forward from instead of time traveling from the start for long running programs (and diff the snapshots to only store changes)

No snapshots in this demo. I expect for larger wasm components I’ll have to add some snapshotting but I’ll measure exactly where that line is.

love this!

time-travel debugging is such a good use of the interface. i keep runs interruptible so the human can take the mouse when the path gets weird; observability should make that handoff easier, not ceremonial.

j’ai pas lu la notice.

why is it important how fast ghostty is?

I was surprised how well for shortish recordings of another app just replaying up to playhead sufficed. Wasn't even in webassembly. This looks great.

This is cool!

Cool, but why a terminal? Debugging is about visualizing what is happening. A GUI can provide a much better experience.

cool

This is petty cool! My question isn't directly related to WebAssembly, but to Ghostty. How is your overall experience with Ghostty going so far? How long you've been using it?

Ghostty is really nice! I previously just used the built-in macOS Terminal so I want something simple. It’s the split panes and modern rendering that I really appreciate.

I've seen your demo for qip, a chronometer that uses canvas and fonts to render the numbers. I'm curious about the language that you used for this piece. I suppose you didn't write WebAssembly directly.

Yes that example is in Zig. I’m using the Codex coding agent, first I’ve made an Inter font lib, then iteratively made this example. I’m sure the code could have many improvements, but it’s pretty vanilla imperative code.

I checked how you rendered the "glyphs" and I saw it's bitmap. I thought your were dealing with real vector glyphs. Also the program is quite long. Check my vector clock in Java. It's simpler:

Oh, nice. I'm going to have to take a look at that.

Debugging by rewinding time instead of adding print statements. Perfect.

So cool! Following!

Btw does also it work for WAT files or just anything that compiles to wasm?

Is wat files something you’d be authoring? I’d suggest using wat2wasm

Had been exploring wat as of late with wat2wasm but yes it is a pain to write wat files over simply using JS or c++ even

This is the way...

Okay this is so sick? Is it on Github?

Thanks! Yes it is:

That's cool

Yummy

cool

Fantastic

what if your program did a side effect

how does that work calling JS functions that aren't pure?

"reruns from scratch" being fast enough to feel like a rewind is the whole trick.