Firefox Replay

Mods: the link should perhaps be changed to: <a href="https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Mozilla&#x2F;Projects&#x2F;WebReplay" rel="nofollow">https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Mozilla&#x2F;Projects&#x2F;We...</a><p>This currently has 1215 points, and the link is no longer valid. It now just shows an image of Firefox&#x27;s devtools and the sentence &quot;Replay is an early experiment. We&#x27;ll let you know on @FirefoxDevTools when it&#x27;s ready for input.&quot; That&#x27;s not useful, interesting, or informative. The MDN docs seem like an appropriate replacement.

This is a pretty nice comment from the source that explains how it works: <a href="https:&#x2F;&#x2F;github.com&#x2F;mozilla&#x2F;gecko-dev&#x2F;blob&#x2F;11d9c7b7fa82fdfb8ac2a8f0864e9d8d5fe2b926&#x2F;mfbt&#x2F;RecordReplay.h#L32-L73" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;mozilla&#x2F;gecko-dev&#x2F;blob&#x2F;11d9c7b7fa82fdfb8a...</a><p>``` &#x2F;&#x2F; Recording and replaying works by controlling non-determinism in the browser:<p>&#x2F;&#x2F; non-deterministic behaviors are initially recorded, then later replayed<p>&#x2F;&#x2F; exactly to force the browser to behave deterministically. Two types of<p>&#x2F;&#x2F; non-deterministic behaviors are captured: intra-thread and inter-thread.<p>&#x2F;&#x2F; Intra-thread non-deterministic behaviors are non-deterministic even in the<p>&#x2F;&#x2F; absence of actions by other threads, and inter-thread non-deterministic<p>&#x2F;&#x2F; behaviors are those affected by interleaving execution with other threads.<p>```

Ooooh wow. This might be enough to get me to use Firefox to develop with. This could be huge for its market share, a big part of the reason chrome was able to become so popular was because of how good its devtools were (compared to the competition at the time).<p>Firefox definitely managed to catch up but not before lots of devs switched to chrome and stopped checking for compatibility with Firefox.

They should&#x27;ve put this note at the very top of the page: &quot;Mac OS only for now!&quot;.<p>What is the point of promoting this to everyone at this stage?

If this works well, it could eventually be a very big boon for Firefox in the business world. Q&amp;A can now send reproducible bug demos to development. Technical clients can do the same. I wouldn&#x27;t be surprised if someone built tooling to map these recordings into automated tests either: expect the given recorded workflow to not throw errors.<p>I can&#x27;t quite remember when I had a bug where a tool like this would&#x27;ve been useful, but I&#x27;m sure I would&#x27;ve been (and will be) very thankful for it.

Why &quot;Download Firefox Nightly for macOS&quot;?<p>Is it not supported on Linux and Windows? Why?

Thanks for the feedback!<p>Replay is in the user-research and validation phase and still quite experimental.<p>firefox-replay.com is a work in progress. We&#x27;re still sorting out the best way to communicate record and replay debugging and the new use cases.<p>We&#x27;ll share more on @firefoxDevTools when we have something to report.

What&#x27;s going on? I just see a block of text next to a static image.<p>&quot;Replay is an early experiment. We&#x27;ll let you know on @FirefoxDevTools when it&#x27;s ready for input.&quot;

The biggest benefit for me (I think) would be if the product&#x2F;design people I work with could find issues and send their recordings to me. Don&#x27;t think I&#x27;ll be able to convince them to switch to FF though.

Regarding Mac OS: looks like, on Windows FF Developer Edition I can access it&#x27;s UI from creating a boolean in about:config named devtools.recordreplay.enabled<p>A new option in settings will be added to enable a Toolbox Button named &quot;Enable WebReplay&quot;, but pressing that button will replace the entire tab content with an about:blank

My first thought is I&#x27;m mildly skeptical that this will end up being granular enough or detailed enough to actually be useful in practice, but if it does, it could be <i>very</i> useful.<p>I&#x27;m pretty happy to see Firefox pushing its dev tools in this direction. They&#x27;ve done a really great job with layout and styling tools, but their JS dev tools have lagged behind Chrome&#x27;s. So even if this particular effort doesn&#x27;t pan out for some reason, it&#x27;s still very encouraging.<p>They&#x27;re not just carbon-copying Chrome, and they&#x27;re not just sitting back and ignoring the dev tools; they&#x27;re trying to push them forward in some interesting ways.

Is there any way to make this work in automation? This could really help with debugging failed e2e firefox tests.

This is quiet cool! They did far better job then I would have imagined in doing myself! Ha!<p>[Link to the editor](<a href="https:&#x2F;&#x2F;github.com&#x2F;abdusamed91&#x2F;realtime-codeeditor" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;abdusamed91&#x2F;realtime-codeeditor</a>)<p>I implemented it in my real time code editor coursework project where I made use of [Ace Editor](<a href="https:&#x2F;&#x2F;ace.c9.io&#x2F;)&#x27;s" rel="nofollow">https:&#x2F;&#x2F;ace.c9.io&#x2F;)&#x27;s</a> CRDT. The time machine slider does the job and looked remarkable when it ran.

No Linux support :(

For those interested into how this works, look into Time-Travel Debugging and the WebReplay API

This didn&#x27;t work for me.<p>1. I installed the nightly build as told.<p>2. Open nightly build<p>3. Went to the &quot;Save Recording&quot; option<p>4. The first two times, I got a [javascript error] saying I could not record.<p>5. The remaining couple of times - after I open a &quot;New Recording Tab&quot;, whatever that is - I didn&#x27;t see the javascript error but the website whose clickthru I wanted to record using this tool didn&#x27;t even load in that new recording tab.<p>Just this morning I recorded a clickthru like caveman using Quicktime. Can&#x27;t wait for FF to iron out the kinks in this feature.

How is this different from recording in Chrome Web Dev tools?<p>To be clear, I use both Chrome and Firefox for development but just to the surface level, so I&#x27;m probably missing the point here.

This looks pretty good. Are there any other tools like this for different platforms? I&#x27;d be especially interested in something like this for the .NET ecosystem.

Oh, oh, oh! This is so exciting!<p>I had built a poor mans version of this where I worked with puppeteer for automated tests. It&#x27;d basically record the full dim any time it changed, along with console logs, network request metadata, images and css and output it as a test recording. You could then view that and walk through it in an Electron app.<p>This&#x27;ll blow it out of the water. I hope for e2e testing&#x27;s sake that linux support comes soon.

Tangentially, our Apple II emulator [1] has a recording reverse-debugger, should you want to do similar to debug 6502 code... ;) Developers of recent Apple II games have been using it to resolve pesky bugs.<p>[1] <a href="https:&#x2F;&#x2F;paleotronic.com&#x2F;software&#x2F;microm8&#x2F;help&#x2F;web-debugger&#x2F;" rel="nofollow">https:&#x2F;&#x2F;paleotronic.com&#x2F;software&#x2F;microm8&#x2F;help&#x2F;web-debugger&#x2F;</a>

This looks great, it&#x27;s good to see that Firefox is pushing new dev features, instead of playing catch-up to Chrome.<p>Does Replay work on the Firefox Dev build?

I would love to give Firefox a shot, but there&#x27;s one thing I&#x27;ve had issues with, when working with projects using things like webpack, when there&#x27;s an error, Chrome links me back to the original file and line, I never seem to be able to do this in Firefox. Makes it so much harder to debug things. Am I doing something wrong, or is there a way to fix this?

I am not primarily a web developer, but I guess I don&#x27;t really see it.<p>I suppose &#x27;rewind&#x27; would mostly be useful for Javascript applications? But in Javascript you can already debug pretty well. It&#x27;s been a while, but I suppose Javascript debuggers can drop frames, like debugging other languages, so you already have a kind of rewind?<p>Does anyone have a good example use case for this?

This will be an absolute game changer for web development. I am currently working on a really simplified version of this, but as a chrome extension. We deal with a lot of real time data and have been facing some timing issues (network and user input) which is really hard to reproduce.<p>I’m going to give this a shot today!

I wonder how this is positioned compared to Bird Eats Bug and LogRocket&#x2F;FullStory

I&#x27;ve been working on a slightly related idea - <a href="https:&#x2F;&#x2F;speakhq.co" rel="nofollow">https:&#x2F;&#x2F;speakhq.co</a> - I did submit as a Show HN, but didn&#x27;t get too much traction.

Just tried it out, and performance seems really bad at the moment, to the point where I couldn&#x27;t tell if it was working properly. Does anyone have any suggestions of sites to try this on?

It might just be me but enabling the option and clicking and the recording button just attempt to reload the page and I get a blank page. Not sure what is supposed to happen.

Firefox is (mostly) a wonderful, free application. Linux is a wonderful, stable, free desktop.<p>Strange days indeed. Just giving some thanks where it&#x27;s due.

So in its scope this somewhat similar to Cypress.io?<p><a href="https:&#x2F;&#x2F;www.cypress.io&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.cypress.io&#x2F;</a>

Must admit, I&#x27;ve used screen recording during web development for some edge cases; this might address those situations

What would apple have to do to let us have this on iOs? I would love to have a choice of browser on my phone.

Is it not appearing for anyone else? I downloaded it (for MacOS), and that option does not exist.

I can&#x27;t see it.<p>&gt; An error occurred when connecting to firefox-replay.com. PR_CONNECT_RESET_ERROR

Is there a replaying debugger for reverse-engineering dotNet programs?

Really hope they can get this working with WebGL

Can I add a little bit of randomness to this?

Is this a rebranded Firefox Focus?

Macos only for now

Maybe once they figure out how to monetize the data

As a former gnu&#x2F;linux user, I see no point to have it on a desktop. Gnu is happy to live under c:&#x2F;MSYS2, and ‘linux’ part was never good at desktop-home hardware anyway. These 1.77% are barely justified as an option, imo.

is this like Postman ?

Looks interesting but too bad it only supports overpriced macs making it useless

Looks potentially really useful, but is it normal for them to create a whole site just for one new feature?

Very cool, but I&#x27;d much prefer they spend their time bringing Firefox&#x27;s dev tools up to par with Chrome&#x27;s first. I&#x27;ve tried several times to switch to FF completely, but every time I end up switching back on my work computer because of the dev tools.

We actually have something similar for this for tests at Testim (<a href="https:&#x2F;&#x2F;testim.io" rel="nofollow">https:&#x2F;&#x2F;testim.io</a>) but only for tests with screenshots and state.<p>Would people be interested in us open sourcing that part for regular debugging? I have considered it but I didn&#x27;t think people would be interested in using this in a non-test case.

While Microsoft is making great effort towards opening, it is sad to see Firefox develop a feature working on Mac OS only. This is terrible because you might argue that this is the same as a feature working on Windows only, but Windows can run on different hardware manufacturer. This is like a double closing. I am on Linux and I will uninstall Firefox as a repercussion hoping it will have an impact. Too bad for the last hope for a chrome alternative.