TLDR - console.table()

When debugging for performance bottlenecks often we want to run through loops and function calls and record the time between the calls and see the bottle necks so we can optimise them.

I have found console.table() to be very helpful.

Example

let tfun1s,tfun2e,tfun2s,tfun2e,ts,te = 0;

ts = performance.now();
tfun1s = performance.now();
fun1();
tfun1e = performance.now();

tfun2s = performance.now();
fun2();
tfun2e = performance.now();
te = performance.now();

// time in microseconds
console.table(
   ["fun1",tfun1e-tfun1s],
   ["fun2",tfun2e-tfun2s],
   ["Total",te-ts],
);

On the console the output shows up like this

I found this much later and its so much easier to use and control with wrapper functions instead of numerous console logs dotted along the code.

Happy debugging!

Would like to know any other helpful tips for debugging client side code for optimisation - please leave you comments.

Cover photo credits - https://unsplash.com/photos/a-computer-screen-with-a-bunch-of-code-on-it-ieic5Tq8YMk