Using Live Code Comments to quickly measure code performance with Wallaby.js and Quokka.js

Many of you have already tried the new Live Code Comments feature available in Wallaby.js and Quokka.js. Today I’m happy to introduce a new feature. It allows to use the comments to measure any function performance with a single keystroke, and see the numbers updated in real time.

Let’s suppose we have two simple implementations of the Fibonacci sequence algorithm, one is loop-based and another one is recursion-based.

As you may already know, we can quickly inspect any expression values with a simple comment. In this case we are interested to see the F(20) result:

Now what if we need to quickly see which algorithm implementation is faster? With the new feature we can use the /*?.*/ comment to measure the time it takes to execute any expression:

It’s nice, but executing something one time may result in a significant measurement error, so let’s add a loop and try to play with the number of times each function is executed:

The displayed total and average execution time, along with extremum values quickly give you the idea about how two implementations differ in terms of their performance.

As you can see, the feature 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 optimisation, or just for experimenting to see how different things perform.

For example, in just few seconds you may get the idea of how exactly the execution time is distributed in your Angular 2 app Jasmine test:

or in your React app Jest test:

or pretty much any part of your application tested with any testing framework supported by Wallaby.js or inside your Quokka.js file:

The feature is already published and available in both Wallaby.js and Quokka.js, so enjoy!

Also, if you don’t want to miss interesting updates about tools, for example when Quokka is going to be available for other editors, then don’t forget to follow us on Twitter.