Happy Holidays front end friends. Today I will be doing a dive into some logging functions you may not know about. Debugging is a large part of developing and mastery of the debugging tools available to you will make you a happier dev

Please follow along with this code at the following codepen. Codepen’s console is not fully featured, so please open up a console window to follow along.

Here is a plain old console.log that we use all the time. Not very exciting.
console.log("Merry Christmas!")

But we can make it easier! Most of the time, we’re just interested in quickly logging a value. Why not make that process eight keypresses shorter?
PS: This will work for any method described throughout the rest of the tutorial as well.

const log = console.log
log("All I want for Christmas is to type less!")


We’re about to be logging a lot, so let’s put these in a nice group. This will display a drop down in the console so you can show or hide elements logged between console.group and console.groupEnd. The parameter is a label.

console.group("Naughty and Nice Children")


Sometimes you want to log a few aspects of your state at once. Instead of typing something like :

let naughtyChildren = ["Jeff" , "Joel", "Jim" , "John"]
let niceChildren = ["Jane" , "Jill" , "Jasmine", "Jaqueline"]
log("Naughty Children" , naughtyChildren)
log("Nice Children" , niceChildren)


You can simply pass multiple arguments to a log.

log("Naughty Children " , naughtyChildren, "Nice Children " , niceChildren)


One nice use case for this syntax is comparing values in arrays. If you open the console in chrome you will be able to see the two arrays side by side.

Alas! This is printing all on one line! This is pretty naughty. We should make it nice by using some formatting.

log("Naughty Children \n" , naughtyChildren, "\n Nice Children \n" , niceChildren)

Sometimes you would like to see a trace of your function. Console.trace lets you do just that.

console.group("Tracing")
let whoGetsCoalInTheirStocking =
       names => names.forEach(
             name => {
                 log(name, "will get coal in their stocking");
                 console.trace()
       })
whoGetsCoalInTheirStocking(naughtyChildren);

Now that we are done investigating Santa's List, let's end our group : 
console.groupEnd("Tracing")

Console.dir will let you view an interactive tree of your object.
In Chrome this happens automatically, but this is helpful for Firefox/Node environments


let test =
{ test1: { passed : true, difficulty: 10 } ,
test2: { passed : false, difficulty: 6 } ,
test3: { passed : false, difficulty: 5 } ,
test4: { passed : true, difficulty: 4 } ,
}
console.dir(test);

Egads! Our log is getting too long! Let’s clear it out. This might be useful if you get a few errors at the beginning of a page while you’re developing.

console.clear();

Here is a nifty trick to measure time.


console.time('start')
window.setTimeout( () => {console.timeEnd("start")}, 1000);


Sometimes you just don’t want to see logs anymore, but you’re not about to go back through a bunch of code and add some try/catch to everything like you do with all the code you yourself write. (ie. maybe a library is throwing an error that you don’t find to be too worrisome). One way to handle this situation is to overwrite the console.log method. As an added stocking stuffer: If you followed above and saved console.log to a variable (in our case log), you will still get your personal logs!

console.log("Ho ho ho") // Logs

log("Hum hum hum") // Does Log


There are a few aspects of logging that I did not cover. If you’d like to learn more please go ahead and look at the documentation for the console api!

Happy Logging!

-J