🚧 There's more to JavaScript than just console.log()

As a frontend dev, console.log() is necessary. But there's more to debugging than just littering it everywhere.

The thing about console.log() is that it's more than just a utility tool that helps us debug. It is also something that you can put inside your error handling process to let future you know where things are failing.

console.log() inside fallback methods as a permanent fixture is underused.

There's also more to it than console.log. Here's a comprehensive list of other console methods that needs some attention and love.

console.info("This is an information message");
console.warn("This is a warning");
console.error("Your application has a error");

//✍  writing messages based on conditions
console.assert(document.getElementById("name"), "No element found with ID 'name'");

//♾ got a loop? 
for (i = 1; i <= 5; i++){
    cosole.count();
}
//to reset the count 👆
cosole.countreset();

//⌚ need a timer? Use time to track how long an operation takes. 
console.time("answer time");
//other block of codes
console.timeLog("answer time");
//other block of codes
console.timeEnd("answer time");

// need to group your log messages? Try using group 👇
console.log("This is the outer level");
console.group("First group");
console.log("In the first group");
console.group("Second group");
console.log("In the second group under first group");
console.warn("Still in the second group");
console.groupEnd();
console.log("Back to the first group");
console.groupEnd();
console.debug("Back to the outer level");


//🤪 great for large datasets
console.table({'id':1001, 'name':'dottedsquirrel.com'}); 

//have a ton of other messages but want a clean start? use clear. 
console.clear();

Beyond console.log

If you're working with React, you can make debugging breakpoints by using debugger; statement inside your code.

For Node.js, Consola is an elegant console logger that makes your dev life a little bit smoother. Think of Consola as console.log but with more features and details.

The other alternative extension to console.log would be to utilize your debugger.

Quote of the week

“First, solve the problem. Then, write the code.” – John Johnson