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.
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.
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:
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).
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:
And don’t forget to follow us on Twitter.