Console beyond console log
The console is an essential debugging tool in JavaScript. It allows you to write and see output from your code without having to create some kind of plugin (like a debugger). However, the console can be a bit confusing if you don’t know how it works. Try running console.log(console) it does more than we’ve realized. In this article, we’ll look into some console commands that’ll make debugging easier.
console.assert()
In some cases, if we want to console log something if the condition is false in that case you’re probably looking for console.assert().If the assertion is true, nothing happens.
console.table()
Another trick we often see is that devs use console.log with braces console.log({foo, bar}) to provide labels for the things that they are logging that’s cool. But change the log to the table you’ll get a much prettier output.
console.group(label)
As a js developer, we often like to overuse console.log and that can make things pretty messy. Use console.group to group things together with a label.
Additionally you can collapse them by default to save space in the console.
console.dir(object)
Things can also get ugly if you are logging a bunch of objects. Change console.log to console.dir to get a much cleaner dropdown than console logging
console.time(label)
You can also keep track of the amount of time between your console logs.
Console.time() starts the timer, console.timeLog() will log the amount of time elapsed since that timer started. The console.timeEnd() stops a timer that was previously started by calling console.time(). This console feature becomes handy when you want to check the execution time of your code.
console.trace()
In javascript, we are often working with deeply nested functions and objects. When debugging it may be necessary to traverse through the stack trace of our code. Instead of using console.log(), we can use console.trace() to see what happened before this function was called.
Conclusion
In this article, I’ve covered only a few methods that I personally use most from the console, but there’s more to it. If you would like to explore more it can be found here:
https://developer.mozilla.org/en-US/docs/Web/API/console
That’s all for this post, but if you have any questions about writing console in JavaScript or what I covered here, feel free to leave a comment below! I’m always happy to chat about these topics.
