How to get the most out of your JavaScript console
We all know one of the most popular ways to debug in JavaScript is using console.log. But what if I told you there are plenty of other methods you can use in the console that can help you debug better and more efficiently.
At the most basic, you can use console.log to log a string or a bunch of JavaScript objects. Like so,
console.log("Hello World");But what if you wanted to log several JavaScript objects to your console?
const monday = { id: 1, happy: false, goal: 'work' };
const saturday = { id: 2, happy: true, goal: 'sleep' };You can always log this by just using console.log(variable) one after the other. If you take a closer look at the console you’ll notice a problem.
As shown above there are currently no variable names that are visible. You might not see that being a problem now but when you’re building an app and you have multiple objects you are working with it could start getting frustrating to not have the variable name available. JavaScript has an answer for everything, introducing computed property names. This basically allows us to club all of the variables together in a single console.log({ monday, saturday}); and the output of this is easily visible. This also makes our code cleaner by reducing the number of console.logs we might have to use.
console.table()
We can make our output way more readable by putting everything together in a table. Anytime you have objects with identical properties or an array of objects use console.table() . To do this we can use console.table({ monday, saturday}) and the console outputs:
console.group()
This is a handy way to group or nest relevant details together to make logs more readable.
This is also very useful when you have a few log statements within a function and you want to be able to clearly see the scope corresponding to each statement.
If you’re logging a Job Applicant:
console.trace()
console.trace() outputs a stack trace to the console and shows us how the code ended up at a specific point. Depending on your code there are certain methods you’d only like to call one time, like deleting from a database. console.trace() can be used to ensure the code is behaving the way we expect it to.
console.time()
One of the most important thing’s when you are a frontend developer is the need for your code to be fast. With console.time() this allows timing of operations in the code when testing.
This is only a few ways to efficiently use the console. JavaScript has so many more features that help you when coding. I Hope this article helped you learn something new today!!!
