Mastering JavaScript Console Logging

01 June 2024

JavaScript developers often rely on the console for debugging and monitoring their code. The console object provides several methods to log different types of messages, each serving specific purposes. Let's explore the diverse capabilities of the console and how you can enhance your logging experience with styled log messages.

1. Basic Logging with console.log()

The most commonly used logging method is console.log(). It outputs messages to the console and can display strings, numbers, objects, arrays, and more.

console.log('Hello, world!');
console.log(42);
console.log({ name: 'Alice', age: 30 });
console.log([1, 2, 3, 4, 5]);

2. Warning Messages with console.warn()

Use console.warn() to log warning messages. These messages typically appear in yellow, drawing attention to potential issues that are not critical errors.

console.warn('This is a warning message');

3. Error Messages with console.error()

For logging error messages, console.error() is the way to go. Error messages usually appear in red, indicating critical issues that need immediate attention.

console.error('An error occurred');

4. Informational Messages with console.info()

console.info() is used to log informational messages. These are typically styled similarly to console.log() messages but can be used to differentiate between general logs and informational logs.

console.info('This is an informational message');

5. Debugging with console.debug()

console.debug() is used to log debug messages. These messages are usually hidden by default and can be shown by adjusting the console's log level.

console.debug('Debugging details');

6. Assertions with console.assert()

console.assert() logs a message if the specified condition is false. It's useful for inline assertions during development.

console.assert(1 === 2, '1 is not equal to 2'); // This will log the message because the condition is false

7. Grouping Messages with console.group() and console.groupEnd()

To group related logs together, use console.group() and console.groupEnd(). Nested groups are also possible for more complex structures.

console.group('User Details');
console.log('Name: Alice');
console.log('Age: 30');
console.group('Address');
console.log('Street: 123 Main St');
console.log('City: Wonderland');
console.groupEnd();
console.groupEnd();

8. Timing with console.time() and console.timeEnd()

Measure the time taken by a block of code using console.time() and console.timeEnd(). This is helpful for performance profiling.

console.time('Loop time');
for (let i = 0; i < 1000; i++) {
    // Some code
}
console.timeEnd('Loop time');

9. Counting with console.count() and console.countReset()

console.count() logs the number of times it's been called with a specific label. Use console.countReset() to reset the counter.

console.count('Counter');
console.count('Counter');
console.count('Another Counter');
console.countReset('Counter');
console.count('Counter');

10. Table Display with console.table()

Display arrays and objects as tables for better readability using console.table().

const users = [
    { name: 'Alice', age: 30 },
    { name: 'Bob', age: 25 },
    { name: 'Charlie', age: 35 }
];
console.table(users);

11. Styled Log Messages with console.log()

Enhance your logs by styling messages with CSS. Use the %c specifier followed by CSS styles.

console.log('%cStyled message', 'color: blue; font-size: 20px; font-weight: bold;');

Conclusion

JavaScript console logging offers a rich set of methods to help you debug and monitor your code effectively. By utilizing these different logging techniques and styling your messages, you can make your logs more informative and easier to read, ultimately improving your development workflow.

Happy logging!

Back To List