🚧 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

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

Article by:

Aphinya Dechalert

Aphinya Dechalert

Aphinya is a skilled tech writer with field experience in software development, agile, and fullstack JavaScript. She is a dev advocate and community builder, helping others navigate their dev journey.

More posts...

newsletter

🧐 Spiders & Bots love SSR

Bots and crawlers have a thing against single page apps. This is where SSR comes in and why.

newsletter

πŸ’‘ We need to talk about React

Over the past few weeks, I've been immersing myself in React - specifically, Next.js. While React can be fun, the differences between function and class-based component construction can throw off newbies. It also doesn't help that tutorials mix and match them without much context or explanation. Personally, I've come

newsletter

Dev Freebies and Ways To Upskill

Another week, another newsletter πŸ’Œ This week has been pretty intense for me - from playing with Next.js SSR and learning how to use Chakra UI. Here's what I learned from the process of learning something new: * it's always hardest at the start * what you know doesn't become real until

newsletter

Productivity is in the tools you use

As I get back into the groove of weekend projects, I find myself optimizing my workflow. We often associate productivity with our abilities to stay focused. But as software developers and engineers, our tools are as equally important - or more importantly, the extensions and plugins we utilize in our