Pimp Out them Logs
What you are most used to is just writing:
Well there is at least 3 more I currently use besides log, we have
Browsers handle this different
This is very useful if you already have a lot of logs all over the place, also when doing an error you get a stack trace to know where that console comes from and what actually happened to get there.
Ever wanted to run https://jsperf.com/ without actually going to the website. This is exactly what timers do and you do it like so:
How it looks on chrome
The way that this works is that the tag inside the time function must be the same as the one in timeEnd and what happens is that the browser will connect these two and give you just how long the code between took to run.
Pretty sweet ah ?
So let’s imagine you have an object like this:
When you log it to the console you get something like this:
Not suuuuuper useful right ?
If only switch the log to table like this:
You get something way more awesome:
Better, ah ?
Another useful feature you have in your average console is the group one, this one allows to groups logs in the same group, so if have something like this:
I know this will never happen in real life but by doing this would just have all your logs shown like so:
With groups you encapsulate these logs into the part of the code they belong. By adding some lines of code you get something way more organized:
You can also collapse these groups by default for a cleaner view of what’s going on:
Did you ever manually counted logs just to know how many times a function was called? Turns out you don’t have to , there is a method called count on the console object that will do that for you.
Something like this:
Would give you:
You can also add css to your logs but only if the first argument is a string. To do this you need to prepend %c to your text and then pass the css in the second argument, like so:
I’m not saying this last one is very useful , but it’s certainly very cool.
That’s it folks! Have fun !