518 Followers
·
Follow

Live Code Comments — the fastest way to inspect JavaScript object values with Wallaby.js and Quokka.js

2 weeks ago we have released Quokka.js, and it had been a great success. In just a few hours the extension has taken the first place in the VS Code marketplace “Trending This Week” top , in less than 10 days Quokka took the first place of the “Trending This Month” top, and is still there.

Image for post
Image for post

As a result, we have received (and are receiving) tons of the valuable feedback from our users. One of the comments had inspired us to implement a new feature and we would like to share it today.

So Gleb Bahmutov had shared his project and upon checking it out we have immediately felt in love with the idea of using comments to quickly evaluate expressions. Thanks for sharing it Gleb!

And while inline console.log and automatically logged identifier expressions already available in Wallaby and Quokka may do the great job of displaying values, sometimes you may need to see the value right in a middle of a larger expression.

For example, given a chain of a.b().c().d(), you may want to quickly inspect the result of a.b().c() before the .d() is called. No breakpoint is going to help you here and restructuring the code just for the sake of easier debugging experience is not fun.

To make the life better in such cases, we have introduced a special comment (configurable) which tells wallaby and quokka to output the value of the expression right before the comment. One animated GIF is worth a thousand words:

Image for post
Image for post
Live Comments in Quokka.js and Wallaby.js

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 code inside the comment can do. For example, the watch comment below is incrementing the d.e value, and returning $, which points to the expression that the comment is appended to (a.b).

Image for post
Image for post

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

If you like this feature, then also check out the Live Performance Testing feature, which allows to quickly see how various parts of your code perform:

Image for post
Image for post
Live Performance Testing

And don’t forget to follow us on Twitter.

Written by

We create awesome developer tools.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store