Skip to content

Instantly share code, notes, and snippets.

@jasonLaster
Last active January 3, 2022 02:16
  • Star 120 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save jasonLaster/1e220992c294a571dd9b59abd084ccf2 to your computer and use it in GitHub Desktop.

Time Travel Debugging

Time Travel refers to the ability to record a tab and later replay it (WebReplay). The technology is useful for local development, where you might want to:

  • pause and step forwards or backwards
  • pause and rewind to a prior state
  • rewind to the time a console message was logged
  • rewind to the time an element had a certain style or layout
  • rewind to the time a network asset loaded

It is also useful in Production and CI, when you might want to:

  • save user recordings when an exception is fired
  • view a test recording when the test fails
  • easily mock and re-run integration tests

screen shot 2018-07-26 at 2 04 05 pm

Getting Started

  1. Install Firefox Nightly
  2. Go to about:config, enable devtools.recordreplay.enabled
  3. Open a new tab via Tools > Web Developer > Record Execution

Trying it out

Time Travel debugging should work on any website, but it is still fairly new technology so it is possible you could run into rough patches. If you do, please tweet at me @jasonLaster11

I recommend trying out todomvc to grok the basics :)

  1. go to todomvc
  2. open the debugger (check out those cool new stepping buttons)
  3. add a breakpoint in todo-view.js#34
  4. add a todo
  5. step back, step in, step out, step back. You've just done the time travel dance!

A Step By Step guide to time travel debugging

Here's a talk I gave at JS Conf EU on the potential of time travel debugging. If you can't tell already, I think recording based debuggerw will fundamentally change how we debug software.

Disclaimers:

  • webreplay currently only supports OS X 10.13
  • webreplay is still experimental and may never land in Firefox
@rouzbeh84
Copy link

beautiful!

@hinell
Copy link

hinell commented Jul 26, 2018

That's quite interesting but needs a closer look.

@andreicristianpetcu
Copy link

andreicristianpetcu commented Jul 27, 2018

I think the correct about:config property is devtools.debugger.features.replay

This is awesome!!!

@andreicristianpetcu
Copy link

webreplay currently only supports OS X 10.13

I'm on Ubuntu and it works fine

@kyo-ago
Copy link

kyo-ago commented Jul 27, 2018

It's very awesome!!!
I have been waiting since 2012!!!!!!

@wellington1993
Copy link

Nice!

@Mte90
Copy link

Mte90 commented Jul 30, 2018

@andreicristianpetcu I tested on linux and is adding only the items on the menu but the rewind button is not available (also the tab has no title instead need to have RECORDING like the gif).

@kenguest
Copy link

"webreplay currently only supports OS X 10.13" :( bother!

@kjr247
Copy link

kjr247 commented Aug 23, 2018

devtools.recordreplay.enabled seems to be missing in the newest nightly version. Is it because I am on a windows machine right now?

@Mte90
Copy link

Mte90 commented Dec 11, 2018

is changed in 'devtools.recordreplay.mvp.enabled' but is still only for OSX and not for Linux/Windows.

@garyconnelly1
Copy link

I'm on macOS but the 'devtools.recordreplay' seems to be missing on nightly. Anyone else having issues?

@kerryj89
Copy link

kerryj89 commented Apr 3, 2020

I'm on macOS but the 'devtools.recordreplay' seems to be missing on nightly. Anyone else having issues?

I am confused as well, I don't see the option in Settings, but I do see devtools.recordreplay.mvp.enabled and devtools.recordreplay.enabled set to True. No sign of it in the Tools menu nor the inspector.

@jasonLaster
Copy link
Author

Sorry for the confusion @kerryj89 and @garyconnelly1, the project has been spun out to its own product.

http://webreplay.io/

@garyconnelly1
Copy link

Okay thank you @jasonLaster.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment