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
- Install Firefox Nightly
- Go to about:config, enable
devtools.recordreplay.enabled - Open a new tab via Tools > Web Developer > Record Execution
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 :)
- go to todomvc
- open the debugger (check out those cool new stepping buttons)
- add a breakpoint in
todo-view.js#34 - add a todo
- step back, step in, step out, step back. You've just done the time travel dance!
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
I'm on macOS but the 'devtools.recordreplay' seems to be missing on nightly. Anyone else having issues?