Firefox Is Testing "Time Travel Debugging"

Mozilla is testing a new feature in Firefox called Time Travel Debugging. The feature is aimed at developers and is currently only available in the latest version of Firefox Nightly for Mac.

The new Firefox Time Travel Debugging feature is actually an implementation of an older Firefox project previously known as WebReplay.

According to Mozilla's documentation, WebReplay allows Firefox content processes "to record their behavior, replay it later, and rewind to earlier states."

"Replaying processes preserve all the same JS behavior, DOM structures, graphical updates, and most other behaviors that occurred while recording. The browser's JS debugger can be used to inspect and control the replay."

For obvious reasons, such a feature is more than helpful, especially in today's web dev landscape where websites now run a heavy dose of CSS3 and JavaScript-based animations, interactions, and effects, all of which can be performance chokepoints or breaking points in a page's normal rendering.

WebReplay —or Time Travel Debugging, as it's been renamed— allows developers to record how a complex page renders, and lets the developer go back in time to see at what point and during which operation things broke down.

Time Travel Debugging is part of Firefox's Web Developer Tools, a collection of utilities that developers can use to debug their sites. Pressing F12 in every Firefox version turns Web Developer Tools on and off.

How to enable and use Time Travel Debugging

1. Install Firefox Nightly on Mac

2. Go to about:config, enable devtools.recordreplay.enabled

3. Open a new tab via Tools > Web Developer > Record Execution

Time Travel Debugging is currently undergoing tests, and this doesn't mean it will land in upcoming Firefox Stable versions, although it really looks like something that will come in handy if it does.

Other details are available in this GitHub gist . This is the Bugzilla page where the feature's progress inside Firefox can be tracked for future updates.