7/26/2018 - 5:57 PM

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

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.


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