Instantly share code, notes, and snippets.

Embed
What would you like to do?

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

This comment has been minimized.

rouzbeh84 commented Jul 26, 2018

beautiful!

@hinell

This comment has been minimized.

hinell commented Jul 26, 2018

That's quite interesting but needs a closer look.

@andreicristianpetcu

This comment has been minimized.

andreicristianpetcu commented Jul 27, 2018

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

This is awesome!!!

@andreicristianpetcu

This comment has been minimized.

andreicristianpetcu commented Jul 27, 2018

webreplay currently only supports OS X 10.13

I'm on Ubuntu and it works fine

@kyo-ago

This comment has been minimized.

kyo-ago commented Jul 27, 2018

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

@wellington1993

This comment has been minimized.

wellington1993 commented Jul 27, 2018

Nice!

@Mte90

This comment has been minimized.

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

This comment has been minimized.

kenguest commented Jul 31, 2018

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

@kjr247

This comment has been minimized.

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

This comment has been minimized.

Mte90 commented Dec 11, 2018

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

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