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).
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.
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.
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.
To see the call stack for the current step, expand the
Call Stack node of the Debugger View.
Debug Actions are available from from the Debugger View header as well as via keyboard shortcuts.
- 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
- Step Into
- Step Out
Shift + F11
- Run to Active Line
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
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.
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.
While the Wallaby debugger is on, you may edit your code at any time and continue debugging it.
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.
Wallaby’s Time Travel Debugger does not have traditional breakpoints, you may instead use the
Run to Active Line
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