Debugging JavaScript Like a Pro: Mastering the Different Types of Console Logs

As front end developers, we’re all too familiar with the long, arduous process of debugging our code. Whether we’re using the debugger or the console object, it’s a daily task that we simply can’t avoid. But here’s the thing: while most of us stick to the basic console.log() method, there’s actually an entire API of console methods that we’re missing out on. And by only using one method, we’re doing ourselves a disservice. So, are you ready to simplify your debugging experience and become a more efficient developer? By mastering the most relevant console methods, you’ll not only be able to choose the right tool for the job, but also extract the most important information when logging your code. And who doesn’t want to save time and spare themselves some headaches?

In this article, we’ll explore the different types of console logs and how to use them to your advantage.

Console.log() - the meh

The console.log() method is the most basic of all console methods. It’s the one we use the most, and the one we’re most familiar with. It’s also the one that we use when we’re not sure which method to use. But, as you’ll see, it’s not the most efficient method for debugging.

The most basic use of console.log() is to simply log a string to the console.

console.log('Hello World!');

// Hello World!

Or, if you just wanna see the value of a variable, a cool trick is to pass it as an object to console.log(). This way, you can see the name of the variable and its value.

const name = 'Foo Bahadur';
console.log({ name });

// { name: 'Foo Bahadur' }

But, as you can see, this method is not very useful when it comes to debugging. It’s not very efficient, and it doesn’t provide much information.

Console.table() - the formatting fiend

The console.table() method is a great way to log an array of objects to the console. It’s a great way to visualize your data and see what’s going on.

const users = [
  { name: 'Foo', age: 25 },
  { name: 'Bar', age: 30 },
  { name: 'Baz', age: 35 },
];

console.table(users);

// ┌─────────┬─────┬─────┐
// │ (index) │ age │ name│
// ├─────────┼─────┼─────┤
// │    0    │ 25  │ Foo │
// │    1    │ 30  │ Bar │
// │    2    │ 35  │ Baz │
// └─────────┴─────┴─────┘

Console.error(), .warn() & .info() - the color-coded trio

Do you still log errors and warnings to the console? Well, you’re not alone. But, if you’re logging it with console.log(), you’re doing it rookie style. Behold, the console.error(), console.warn() and console.info() methods. The names are pretty self-explanatory. The main advantage of using these methods is that they’re color-coded, which makes them easier to spot and provides a visual cue that something is wrong. And, they also provide a stack trace, which is a great way to see where the error occurred.

console.error('Something went wrong!');
console.warn('This is a warning!');
console.info('This is an info message!');

Console.time() , .timeLog() & .timeEnd() - the timekeepers

An untold role of a developer is also to make sure that their code is as efficient as possible. The console.time() and console.timeEnd() methods are used to measure the time it takes for a piece of code to execute. And, if you want to log the time in between but don’t want to end the timer, you can use console.timeLog().

console.time('fetching data');
fetch('https://jsonplaceholder.typicode.com/users')
    .then((response) => response.json())
    .then((json) => {
        console.timeLog('fetching data', "Finished fetching data" ,"with", json.length, "users");
        console.timeLog('fetching data', "Starting expensive operation");
        expensiveOperation(json);
        console.timeLog('fetching data', "Finished expensive operation");
        console.timeEnd('fetching data');
    });

// fetching data: 75.734ms Finished fetching data with 10 users
// fetching data: 76.009ms Starting expensive operation
// fetching data: 800.02ms Finished expensive operation
// fetching data: 800.102ms

Console.group() & .groupEnd() - the parents

How often have you found yourself scrolling through a bunch of console logs, trying to find the one you’re looking for? The console.group() and console.groupEnd() methods are here to help. They allow you to group together a bunch of related logs so that you don’t spend hours scrolling through your console trying to find console-mates.

console.group('Users');
console.log('Foo');
// ...
console.log('Bar');
// ...
console.log('Baz');
// ...
console.groupEnd('Users');

// Users
//   Foo
//   Bar
//   Baz

Console.count() - the tally master

The console.count(), aka The Tally Master, is the go-to console method for counting how many times a particular piece of code is executed. Simply place console.count() before the code you want to count, and watch as it keeps track of every single iteration for you. It’s a simple yet powerful tool that saves you time and effort, and lets you focus on the bigger picture of your code

console.count('foo');
console.count('bar');
console.count('foo');
console.count('bar');
console.count('foo');

// foo: 1
// bar: 1
// foo: 2
// bar: 2
// foo: 3

Console.clear() - the cleaner

The console.clear() method is a simple yet powerful tool that clears the console. It’s a great way to keep your console clean and organized.

console.clear();

Console.assert() - the inspector

Okay, How many times have you done this? if(false) { console.log('Foo') }, well, you’re not alone here. The console.assert() method is a great way to log a message to the console only if a condition is false. It’s a great way to make sure that your code is running as expected. You can consider it little test suite for your code.

console.assert(1 === 2, 'This is wrong!');
console.assert(1 === 1, 'This is right!');

// Assertion failed: This is wrong!

Console.trace() - the detective dog

The console.trace() is that detective dog that sniffs out the origin of a particular piece of code, a great way to see the call stack of a function.

function foo() {
  function bar() {
    console.trace();
  }
  bar();
}
foo();

// console.trace()
//     at bar (VM123:2:13)
//     at foo (VM123:6:3)
//     at VM123:8:1

Final thoughts

From object visualization to memory profiling, console methods cover a wide range of areas. By using them correctly, we can save time and effort, and focus on the bigger picture of our code.

Of course, the debugger is still a valuable tool in some scenarios, but knowing all the console methods we have can help us make better decisions.

So, let’s cheer up and start using these console methods to their fullest potential! Say goodbye to the habit of using console.log() by default and embrace the power of console methods.

Resources

• MDN - Console