Introduction: Time Travel Debugger

Wallaby’s Time Travel Debugger allows you to move forward and backwards through your code to understand the conditions that led to a specific bug. The Time Travel Debugger accelerates your edit, compile and debug loop by allowing you to jump to a specific line of code, view runtime values, edit-and-continue and step into, over and out of your code.

Time Travel Debugger is currently a BETA feature and is only available for VS Code. Support for IntelliJ editors will be available in January 2020. If you have problems/feedback, please let us know.

Select your editor

The information on this page is adjusted to your editor of choice. Please select your editor by clicking on your editor’s logo below before proceeding with the tutorial:

Starting the Debugger

Once Wallaby has started, the time-travel debugger is available at any time. The debugger can be started from any of your project’s tests. Navigate to the line of code where your test starts and run the command, Wallaby.js: Debug Test (Shift + F5).

Starting Time Travel Debugger

In addition to being able to start the debugger on the line of code where your test starts, you may also start the debugger on any line of your code that is executed by your tests. When you start the debugger from a line other than the start of your test, the debugger will start and automatically progress to that line. If you start the debugger from a line of code that is covered by multiple tests, you will be prompted to select which test you want to debug.

Selecting Test To Debug

Debugger View

After starting the debugger, Wallaby’s Debugger View will automatically open. You may also launch the Debugger View at any time using the command Wallaby Tools: Focus on Debugger View.

The Debugger View displays all information related to your debug session. Debug actions are displayed when your mouse is positioned anywhere over the Debugger View.

Debugger View

The Debugger View shows the number of steps that were executed as a part of your debug session and also shows the current step and percentage executed. Note: in many cases, multiple execution steps may map to one displayed statement or expression due to transpilation and other testing framework behaviours.

The Debugger View’s Jump to menu provides the ability to quickly navigate to important parts of your project that were detected during the test run. You may navigate to the start of the test by clicking on the Test node. You may also jump to the first statement of any files used by your tests by clicking on one of the Loaded Files nodes.

Using Debugger Jump To View

To see the call stack for the current step, expand the Call Stack node of the Debugger View.

Debug Actions

Debug Actions are available from from the Debugger View header as well as via keyboard shortcuts.

Debug Actions

  • Run Back to Active Line Ctrl + F5
  • Step Back Out Ctrl + Shift + F11
  • Step Back Into Ctrl + F11
  • Step Back Over Ctrl + F10
  • Stop Debugger Shift + F5
  • Step Over F10
  • Step Into F11
  • Step Out Shift + F11
  • Run to Active Line F5

Inspecting Runtime Values

Inspecting runtime values during time-travel debug sessions is quick and easy. All you need to do is select the object, object property, parameter, expression or variable that you want to view. When you do this, Wallaby will display the value that you selected. If your selection is invalid (e.g. you only selected part of a variable) then no output will be displayed. For nested expressions statements (e.g. myObject.a.b.c), you do not need to select the entire expression (selecting only b will output myObject.a.b).

The example below shows the output of selecting operand1 on line 11 of a code file when the current execution step is on the same line.

Inspect Runtime Values

Note 1: during a debug session, Wallaby’s Advanced Logging features (console.log, live comments, show/copy value) are not available.

Note 2: your selection must be either on the current step or a previous step for the value to be displayed.

In addition to displaying selected expression values beside your code, selected expressions are also available in Wallaby Value Explorer in an easy-to-navigate, real-time tree view. Nested properties can be expanded to any depth, and values/paths may be copied to the clipboard.

Inspect Runtime Values in Value Explorer

Edit-and-continue

While the Wallaby debugger is on, you may edit your code at any time and continue debugging it.

Edit-and-continue

Tips and Tricks

Classical Debugger vs. Time Travel Debugger

While similar to classical debugging, the ability to step forward/backward through code provides a new way to consider using a debugger. Instead of starting the debugger at the start of your test, start at your failed expectation and use the Step Back Into command.

Breakpoints

Wallaby’s Time Travel Debugger does not have traditional breakpoints, you may instead use the Run to Active Line and Run Back to Active Line commands; for a single breakpoint, these are equivalent in functionality.

Quickly inspecting runtime values

To quickly inspect a runtime value, use the keyboard command Add Selection to Next Find Match (Ctrl + D), or instead double-click on the code that you wish to inspect (the selection will be automatically set to what you want to inspect).

Unable to navigate

Sometimes you may select a navigation option that is unavailable (e.g. a Step Into request when on the last execution step). When unable to navgiate, the code selected by the debugger will change from yellow to red.