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

Values

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.

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

Configuration

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:'
    }
  };
};