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