DEV Community

Cover image for Simple function to print table in browser console
amythical
amythical

Posted on • Edited on

Simple function to print table in browser console

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],
);
Enter fullscreen mode Exit fullscreen mode

On the console the output shows up like this

Image description

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

Top comments (0)