Create a gist now

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.

Show comment
Hide comment
@rouzbeh84

rouzbeh84 Jul 26, 2018

beautiful!

rouzbeh84 commented Jul 26, 2018

beautiful!

@hinell

This comment has been minimized.

Show comment
Hide comment
@hinell

hinell Jul 26, 2018

That's quite interesting but needs a closer look.

hinell commented Jul 26, 2018

That's quite interesting but needs a closer look.

@andreicristianpetcu

This comment has been minimized.

Show comment
Hide comment
@andreicristianpetcu

andreicristianpetcu Jul 27, 2018

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

This is awesome!!!

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.

Show comment
Hide comment
@andreicristianpetcu

andreicristianpetcu Jul 27, 2018

webreplay currently only supports OS X 10.13

I'm on Ubuntu and it works fine

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.

Show comment
Hide comment
@kyo-ago

kyo-ago Jul 27, 2018

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

kyo-ago commented Jul 27, 2018

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

@wellington1993

This comment has been minimized.

Show comment
Hide comment
@wellington1993

wellington1993 commented Jul 27, 2018

Nice!

@Mte90

This comment has been minimized.

Show comment
Hide comment
@Mte90

Mte90 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).

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.

Show comment
Hide comment
@kenguest

kenguest Jul 31, 2018

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

kenguest commented Jul 31, 2018

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

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