Live data from Hacker News

Show HN: Time travel debugger for web development

replay.io

151–160 of 223 posts

Re: Show HN: Time travel debugger for web development

#151
I love this, and apart from its intended purpose it seems like a potentially valuable learning tool for devs new to a language.

Years ago I used Adobe LiveCycle, a horrible "low code" enterprise framework foisted on us from far above.

One thing I always did like about it though was its replay tool which this reminds me of. I was always surprised it wasn't more of a thing in the dev space, it seems very useful.

Re: Show HN: Time travel debugger for web development

#152

Engineer @ Replay here - If you're a console.log kind of developer (isn't everyone at least some of the time?), you should check this out. Imagine being able to add console.log() statements to code that already ran and seeing the results immediately! It's a bit mind blowing the first time you use it.

Do you have a demo video of doing exactly this? I downloaded the app, it's unclear how to edit code that's already run.

Re: Show HN: Time travel debugger for web development

#153

Earlier quoted context omitted.

> First, nobody uses breakpoints. It saddens me that a lot of people don't use debuggers and default to adding print statements. As far as I can tell, it's for several reasons: 1. The debugger is primitive (e.g. Godot GDScript - no conditional breakpoints or watches). 2. The debugger is unstable (e.g. Android Studio - frequently hangs, or takes a long time to populate data needlessly) 3. The debugger's UI is not frie…

I think print statements are actually useful in ways that typical debuggers are not meant to be; they make it easy to show changes over time, and they provide a tight feedback loop between observing the value of some data and performing interactions that update that data. For example, if you wanted to know how a coordinate calculation changed as you scrolled the page, print statements would be more useful than a debu…

Anything you can do with a print statement can also be done with a logpoint, if your debugger has that concept. Logpoints can also sometimes be simulated with conditional breakpoints (log something and then return false).

The debugger saves so much time wasted recompiling/reloading with new print statements, IMO it's strictly better on every aspect.

Re: Show HN: Time travel debugger for web development

#154

Earlier quoted context omitted.

(Replay engineer): we basically record all the inputs and outputs to a program. In the example of an HTTP request: when recording we'd record that a request was made, and the response. When replaying, rather than make the HTTP request, we return the response that was recorded. If you're interested you can learn more about how Replay works here: https://medium.com/replay-io/how-replay-works-5c9c29580c58

> Likewise, the raw pointer values don’t have an effect on the behavior of the JavaScript There are actually some cases where raw pointer values can effect user-visible browser behavior indirectly. Notably if the pointer values affect iteration order in an associative data structure which the browser uses in some way that tickles JS differently depending on the order. There are bunches of other bizarre edge cases you…

(Replay employee) Yeah, later in the post (https://medium.com/replay-io/effective-determinism-54cc91f56...) we mention needing mitigations to ensure that hashtable iteration is deterministic in cases where it affects how the browser interacts with the JS engine. There are others needed as well to ensure that the browser behaves the same across a large range of websites, my favorite is handling sites that sniff information about the system's math libraries by e.g. calling Math.sin() on specific values and testing the results --- the values when replaying need to be bitwise identical with what happened while recording.

Re: Show HN: Time travel debugger for web development

#155
I just learned about it here and tried it out on a small to medium-sized TypeScript React app. It worked right out of the gate! The original TypeScript files appeared in the Source browser. Time travel works. And the video replay too of course.

Really impressive. Will keep it around for sure to try debugging a real issue next time. Congrats on the launch and the great app!

Re: Show HN: Time travel debugger for web development

#156
post #86

Earlier quoted context omitted.

Hey! Sorry to hear you're having an issue. That message occurs when we try to asynchronously load a JavaScript bundle for the app and it fails. Typically, that's because we've updated the app and that bundle has been replaced with another file. That shouldn't be the case for you though so perhaps there's a network issue? Clearing your cache and trying again might resolve it. Feel free to jump on our discord ( https:/…

I'm using just a slightly outdated browser, which is probably the cause. I'm on Ungoogled Chromium 81 (by choice) which doesn't automatically update, and the ||= (boolean OR assignment) operator wasn't added until 85. Your payload appears to compile down for older browsers (as is evident by the use of `var`, unless.. you actually write code using `var`) but it misses the ||= operator transformation it seems. Thus, th…

BTW, created https://github.com/RecordReplay/devtools/issues/3619 to follow up on the logical or assignment as well. Should be fixed soon

Re: Show HN: Time travel debugger for web development

#157

I read the medium post ( https://medium.com/replay-io/how-replay-works-5c9c29580c58 ), which gives an overview of how Replay works, but there are a few things I still don't understand. 1) How does the step backward functionality work? Do you take snapshots every so often of the Javascript environment? How do you handle destructive assignments? 2) Does Replay record actual syscalls made by the browser, or is it record…

Thanks for the links to the blogs. I was wondering how it worked and the "How it works" bit on that page said nothing. Nice that they've explained it. It looks like the blog does answer your questions though:

> The interface which Replay uses for the recording boundary is the API between an executable and the system libraries it is dynamically linked to.

I assume the ordered locks use a global order.

Re: Show HN: Time travel debugger for web development

#158

I read the medium post ( https://medium.com/replay-io/how-replay-works-5c9c29580c58 ), which gives an overview of how Replay works, but there are a few things I still don't understand. 1) How does the step backward functionality work? Do you take snapshots every so often of the Javascript environment? How do you handle destructive assignments? 2) Does Replay record actual syscalls made by the browser, or is it record…

(Replay employee)

1. Rather than having to restore state to the point at the previous step, we can step backwards by replaying a separate process to the point before the step, and looking at the state there (this post talks about how that works: https://medium.com/replay-io/inspecting-runtimes-caeca007a4b...). Because everything is deterministic it doesn't matter if we step around 10 times and use 10 different processes to look at the state at those points.

2. We record the calls made by the browser, though it is the calls into the system libraries rather than the syscalls themselves (the syscall interfaces aren't stable/documented on mac or windows).

3. Maintaining ordering like this isn't normally necessary for ensuring that behavior is the same when replaying. In the case of memory locations, the access made by thread 2 to location B will behave the same regardless of accesses made by thread 1 to location A, because the values stored in locations A and B are independent from one another.

Re: Show HN: Time travel debugger for web development

#159

Earlier quoted context omitted.

Congratulations! This looks super interesting! How are side effects (mutating HTTP calls, cookie creation, other I/O) handled?

(Replay engineer): we basically record all the inputs and outputs to a program. In the example of an HTTP request: when recording we'd record that a request was made, and the response. When replaying, rather than make the HTTP request, we return the response that was recorded. If you're interested you can learn more about how Replay works here: https://medium.com/replay-io/how-replay-works-5c9c29580c58

Thanks for the pointer. Will take some time to digest the content. Have you considered in making a library, so whoever wants a session replay can manually initiate a recording? So you don't have to maintain a browser fork. I am asking without fully understanding the technical detail. Please forgive my ignorance

Re: Show HN: Time travel debugger for web development

#160

I read the medium post ( https://medium.com/replay-io/how-replay-works-5c9c29580c58 ), which gives an overview of how Replay works, but there are a few things I still don't understand. 1) How does the step backward functionality work? Do you take snapshots every so often of the Javascript environment? How do you handle destructive assignments? 2) Does Replay record actual syscalls made by the browser, or is it record…

Thanks for the links to the blogs. I was wondering how it worked and the "How it works" bit on that page said nothing. Nice that they've explained it. It looks like the blog does answer your questions though: > The interface which Replay uses for the recording boundary is the API between an executable and the system libraries it is dynamically linked to. I assume the ordered locks use a global order.

[deleted]
Post reply on HN