Performance Tuning/Testing in JS
Is your app slow? Does it take more time than it should have when that button is clicked to complete the action? Well Lets find out.
Chrome Developer Tools
When testings performance bottle necks chrome dev tools are really useful. In case you did not know in Chrome, you can profile functions and see what was the execution cycles that went through along with the time taken. You can start recording and do your operation and then stop. Then you can follow along the graph to figure out what was killing inside.
For more details check chrome developer blog.
Introducing Debuk
https://www.npmjs.com/package/debuk
This is a small wrapper utility that enhances can be used along with chrome dev tools. It can also be used in a server side app as well. Basically it is a wrapper that you can wrap different functions with and It will provide you with stats on the functions it is wrapped.
From their original example, By looking at this it would not be trivial how much time the mySum is called with the code below.
const mySum = (a, b) => a + b;const list = [1,2,3,4,5,6];
list
.map(i => mySum(i, 5))
.reduce((a,i)=> mySum(a + 2, mySum(i, 5)));
It will me much more difficult when the calling can happen from multiple different files in multiple different places. But with Debuk you can simply wrap it with Debuk and it will show stats on the usage of mySum.
const mySum = Debuk((a, b) => a + b);This will show how much time it is executed per execution cycle and the time it took. This is once advantage Debuk have over console.count. What it means is that it resets the count for each execution cycle and show the output where as console.count show the full total count. If you are developing a Single Page Application (SPA) this is really useful as there can be common functions that are called from multiple places.
If you add the params to options can view the arguments that mySum was called upon as well.
const mySum = Debuk((a, b) => a + b, {params = true});Well that is not the full list of things Debuk can do, it can profile functions and each profile will be available on profile tab in chrome dev tools. Think about the time you add console.log all around the functions and within just to log parameters?
It has both a UMD(2.1 KB) and a npm build and can be integrated with couple of lines to any web applications or a server side project.
Let me know how you find it useful. I am open for suggestions on how we can improve this further at https://github.com/udnisap/debuk
