Skip to content
Wallaby
V2

Time Travel Debugger

Wallaby’s Time Travel Debugger is an advanced tool that allows you to visualize, investigate, and understand the execution of your code. The debugger allows you to move forwards and backwards through your code to identify the conditions that led to a specific bug. It also 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.

Starting the Debugger

Once Wallaby has started, the time-travel debugger can be started in a number of ways:

  • at the beginning of a failing test by clicking the debugger icon next to an entry in the the Overview panel’s Failing Tests or Errors views
  • at the beginning of any test by clicking the debugger icon while hovering over the ⋮ icon next to the test in the Test tab of the Side View
  • at the beginning of any test using the Debug code lens action above the test
  • at any covered line (whether in a test file or in code called by a test) by running the Wallaby.js: Debug Test (Shift + F5) command. When a line is covered by multiple tests, you will be prompted to select which test to debug.
  • at the beginning of a failing test by clicking the debugger icon next to an entry in the the Overview panel’s Failing Tests or Errors views
  • at the beginning of any test by clicking the debugger icon while hovering over the ⋮ icon next to the test in the Test tab of the Side View
  • at any covered line (whether in a test file or in code called by a test) by running the Debug test intention action, Start Debugger action, or by clicking on the debug icon in the IntelliJ Run Tool Window. When a line is covered by multiple tests, you will be prompted to select which test to debug.
  • at the beginning of a failing test by clicking the debugger icon next to an entry in the the Overview panel’s Failing Tests or Errors views
  • at the beginning of any test by clicking the debugger icon while hovering over the ⋮ icon next to the test in the Test tab of the Side View

Debugger View

When the debugger is running, the Overview panel will change in a number of ways:

  • An Interactive Timeline will appear at the top of the panel
  • The Failing Tests section will be hidden
  • The Logs section will take center stage, with some modified behaviour
  • The Debugger panel will appear, providing a color-coded guide that can be used to identify files in the timeline
  • An Indicator Guide will appear, providing information about the indicator colors within the timeline

A set of navigation icons will also appear in the main Wallaby panel header (above the Overview panel), providing the ability to manage execution within your debugger session.

Interactive Timeline

The Interactive Timeline is a visual representation of your code. Each notch on the the Timeline represents an expression evaluated during the execution of your test. The color of the indicator above the notch represents additional data about the expression. The Indicator Guide located in the bottom right of the Overview panel explains what these colors mean.

The notches and indicators can be clicked to navigate directly to the associated expression.

The Timeline has a draggable, resizeable “window” that controls how the Steps view (located immediately underneath the Timeline) is displayed. This window can be moved by dragging the top of the window left or right, and can be expanded or contracted by dragging the ends of the window left or right. It can also be expanded or contracted by using the mouse wheel anywhere over the Timeline or Steps, effectively zooming in or out.

Logs View, Watch Expressions

While the debugger is active, the Logs view will show only logs related to the current test. Additionally, a new section, Watch Expressions will appear at the top of the Logs panel. Watch Expressions can be added in a number of ways:

  • by hovering over a value
  • by hovering over a selection (allowing precise control)
  • by using the Show Value command
  • by hovering over a value
  • by hovering over a selection (allowing precise control)
  • by using the Show Value action or intention action
  • by selecting a value in the editor

Watch Expressions can be explored, copied, refreshed, or removed using the icons in the Watch Expressions section. Values will appear in your editor like regular logs. When working with nested expressions (e.g. myObject.a.b.c), you do not need to select the entire expression (selecting only b will output myObject.a.b). Watch Expression can only display values for steps up to (i.e. at or before) the active step.

Debugger View

The Debugger view, located in the top right of the Overview panel, provides a color-based legend for files involved in the active debugger session. The steps in the Steps View use these colors to denote which file a step belongs to. Icons on the right of the Debugger View can be used to navigate directly to the first line of code executed in that file as part of the debugged test.

The Show Call Stack icon available in the panel header can be used view the call stack for the current step. The stack will be displayed instead of the legend and indicator information (until closed).

Debug Actions

Debug Actions are available from from the Debugger file actions and Debugger View header, as well as via keyboard shortcuts.

Debug Actions are available from from the header of the Wallaby Run Tool window as well as via keyboard shortcuts. Keyboard shortcuts may be remapped in your IntelliJ Editor’s Settings.

Debug Actions

Run Back to Breakpoint Ctrl + F8

Run Back to Breakpoint Alt + Shift + F9

Runs backwards from the current debugger step and stops when a breakpoint is encountered.

Run Back to Active Line Ctrl + F5

Run Back to Active Line Alt + Shift + F6

Runs backwards from the current debugger step to the line of code where the cursor is currently positioned.

Step Back Out Ctrl + Shift + F11

Step Back Out Alt + Shift + F8

Returns back to the line before the current function was called.

Step Back Into Ctrl + F11

Step Back Into Shift + F7

If the line does not contain a function it behaves the same as “Step Back Over” but if it does the debugger will enter the function and continue line-by-line debugging there.

Step Back Over Ctrl + F10

Step Back Over Shift + F8

Steps backward over a given line. If the line contains a function the function will be executed and the result returned without debugging each line in the function.

Start/Stop Debugger Shift + F5

Start/Stop Debugger Alt + F5

Starts or stops the debugger.

Step Over F10

Step Over F8

Steps forward over a given line. If the line contains a function the function will be executed and the result returned without debugging each line in the function.

Step Into F11

Step Into F7

If the line does not contain a function it behaves the same as “Step Over” but if it does the debugger will enter the function and continue line-by-line debugging there.

Step Out Shift + F11

Step Out Alt + F8

Returns to the line after the current function was called.

Run to Active Line F5

Run to Active Line Alt + F6

Runs forward from the current debugger step to the line of code where the cursor is currently positioned.

Run to Breakpoint F8

Run to Breakpoint Alt + F9

Runs forward from the current debugger step and stops when a breakpoint is encountered.

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.

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.

Edit-and-continue

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

Default Limits

By default, Wallaby limits the number of steps that are recorded during a debug session to ensure system resources (memory and CPU) are not adversely affected by the Time Travel Debugger feature. If required, this can be adjusted using the maxTraceSteps setting.

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).

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

During a debug session, Wallaby’s Advanced Logging features (console.log, live comments, identifier expressions) are also available when current debugged line is the line with the log/comment/expression.

Unable to navigate

Wallaby debugger can only be used on files instrumented by Wallaby (i.e. those that have coverage gutter indicators when opened). When deciding what files to instrument the tool respects its configuration and testing framework-specific settings (for example Jest’s collectCoverageFrom setting).

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 to a red color.

Changing Debugger Highlight Colors

The colors used to highlight Wallaby’s Debugger context can be altered by changing your JetBrains editor settings:

  • Current Execution Context: Color Scheme -> Debugger -> Execution point
  • Stack Trace Line: Color Scheme -> Debugger -> Not top frame
  • Unable to Navigate: Color Scheme -> General -> Popups and Hints -> Error hint

Note: in many cases, multiple execution steps may map to one displayed statement or expression due to transpilation and other testing framework behaviours.