How you should not use (only) console.log

As a developer, I’ve worked with a lot of different languages and environments: C#, C++, Java, Go, Lisp, JS, PHP (and many more). The one thing in common between all of them is the debugging method that I’ve used: logging.

Being it a cout (C++) or System.out.println (Java), outputting something to the console/cli is an old as the world practice, in javascript this is done by console.log(arg) and here I'm going to give you more tools to help you debug your javascript code.

While console.log is a helpful tool, it should not be the only one you rely on for debugging. Here are some other ways you can use the console in javascript:

1. console.error: This function is similar to console.log, but it outputs the message in red and also prints the stack trace of where the error occurred. This can be helpful when trying to identify the source of an error in your code.

2. console.warn: This function works just like console.error, but the message is output in yellow and the stack trace is not printed. Use this for non-critical warnings in your code.

3. console.info: This function is similar to console.log, but the message is output in blue. Use this for informative messages that don't necessarily indicate an error or warning.

4. console.assert: This function allows you to test a boolean condition and output a message if the condition is false. For example, you can use console.assert to ensure that a variable has the correct value at a certain point in your code.

5. console.group and console.groupEnd: These functions allow you to group related log messages together, making it easier to read and understand the output in the console.

6. console.time and console.timeEnd: These functions allow you to measure the time it takes for a certain block of code to execute. This can be helpful for identifying performance issues in your code.

7. console.clear: Clears the console.

8. console.dir: Outputs an interactive list of the properties of the provided object.

9. console.table: Outputs the provided data in a table format.

10. console.count: Outputs the number of times this method has been called with the given label.

11. console.trace: Outputs a stack trace showing the calls that led to the current point in the code.

Some of the most useful are console.time and console.group, here are two example of their use

console.time

    console.time('Time taken');
    // code block to be measured goes here
    console.timeEnd('Time taken');

This will output as:

    Time taken: 100.123ms

You can also use console.time and console.timeEnd to measure multiple blocks of code and compare the results:

    console.time('Time taken for loop 1');
    // code for loop 1 goes here
    console.timeEnd('Time taken for loop 1');

    console.time('Time taken for loop 2');
    // code for loop 2 goes here
    console.timeEnd('Time taken for loop 2');

    Time taken for loop 1: 100.123ms
    Time taken for loop 2: 50.456ms

console.group

Here is an example of how you can use console.group and console.groupEnd to group related log messages together:

    console.group('Results for loop 1');
    console.log('Iteration 1: 10');
    console.log('Iteration 2: 20');
    console.log('Iteration 3: 30');
    console.groupEnd('Results for loop 1');

    console.group('Results for loop 2');
    console.log('Iteration 1: 15');
    console.log('Iteration 2: 25');
    console.log('Iteration 3: 35');
    console.groupEnd('Results for loop 2');

This will output something like:

    Results for loop 1:
      Iteration 1: 10
      Iteration 2: 20
      Iteration 3: 30
    Results for loop 2:
      Iteration 1: 15
      Iteration 2: 25
      Iteration 3: 35

Note that the label you provide to console.group and console.groupEnd should be the same in order to properly group the log messages together. You can also nest groups by using console.group within another console.group.

In summary, while console.log is a useful tool, it should not be the only one you rely on for debugging. By using the other functions in the console object, you can get a more comprehensive view of what's happening in your code and more effectively identify and fix issues.