Advanced Logging feature used together with Value Explorer and Running Selected Tests features enables highly productive workflow.

There are 3 major ways to log something in wallaby.js and quickly inspect the output inline, or inside the Failing Tests/Line tests view, in all supported editors.

Via console.log

The most straightforward way is to just console.log(anything):

Watch expressions

Identifier expressions

Another simple way to log something is to just type a variable name and get its value(s) displayed:

Watch expressions

Note that only simple identifier expressions, for example a, are automatically logged this way, but not other types of expressions, for example not a.b or a.b(). To log other types of expressions, you may use the console.log way or comment-based watch expressions (see below).

Live Comments


The most powerful way to log any expression is to use a special comment right after the expression you want to log.

Watch expressions in action

Inserting the special comment /*?*/ after some expression will log just the value of that expression.

You may also write any JavaScript code right in the comment to shape the output. The code has the access to the $ variable which is the expression that the comment is appended to. The executed code is within a closure, so it also has the access to any objects that you may access from within the current lexical environment.

Note that there’s no constraints in terms of what the comment code can do. For example, the watch comment below is incrementing d.e value, and returning $, which points to the expression that the comment is appended to (a.b).

Unlike console logging, the special comment logging has some built-in smarts. For example, when you place the comment after an expression that is a promise, the resolved value of the promise is logged. Or, if an expression is an observable, then its values are displayed.

Promises and Observables

Note that the special logging comment feature (as well as the performance testing one) is not available for CoffeeScript code due to the CoffeeScript compiler limitation.

Live comment snippet

To save some time on typing the comment when you need it, you may:

Performance Testing

The feature also allows to quickly see how various parts of your code perform. It can be very helpful for identifying possible bottlenecks in your app and for doing the performance optimization.

Live Performance Testing in action

Inserting the special comment /*?.*/ after any expression will report how much time it took to execute the expression.

Live Performance Testing in action

Adding the comment to an expression that gets executed multiple times, for example inside a loop, will make the tool to display total execution time, average execution time (total execution time divided by number of times the expression had been executed), minimum and maximum execution time.

Live Performance Testing in action

Execution time and result via a single comment

You may also use the execution time reporting comment and add to it any expression that you may use in live comments to display both an expression execution time and execution result.

For example,

a() //?. $

displays a() execution time and result.


The watch comment prefix default value (?) can be changed in wallaby config file. For example, to make the watch comment to be /*out:*/, you may do:

module.exports = function (wallaby) {
  return {

    hints: {
      commentAutoLog: 'out:'

Live Value Display

Live Comments feature provides an excellent way to log any expression value and to keep displaying the value when you change your code.

Sometimes you may also want to quickly display some expression value, but without modifying your code. Live Value Display allows you to do it with a special command (Show Value command/intention action, or with a corresponding keyboard shortcut).

Note that the expression being logged either needs to be selected, or the cursor position needs to be right after the expression being logged when the command is invoked. It works just as if you were inserting a live comment where your cursor is located.