JavaScript `console` Methods: A Comprehensive Guide
Tags: javascript, webdev, programming, tutorial
Published: 2023-03-18 10:08:51

In this blog post, we will dive into the JavaScript `console` object and explore its various methods. The `console` object provides developers with a range of helpful tools for debugging and monitoring code execution. Let's dive in!

## 1. `console.log()`

This is the most commonly used method for printing messages to the console. It displays a message, an object, or multiple messages/objects in a string format.

```javascript
console.log("Hello, World!");
console.log("Hello", "World!");
console.log({ key: "value" });
```

Expected output:
```
Hello, World!
Hello World!
{ key: "value" }
```

## 2. `console.info()`

Similar to `console.log()`, this method prints informational messages to the console. In some browsers, it may display an info icon alongside the message.

```javascript
console.info("This is an informational message.");
```

Expected output:
```
[i] This is an informational message.
```

## 3. `console.warn()`

This method prints warning messages to the console. In many browsers, it displays a warning icon and highlights the message in yellow.

```javascript
console.warn("This is a warning message.");
```

Expected output:
```
[⚠] This is a warning message.
```

## 4. `console.error()`

Use this method to print error messages to the console. Many browsers display an error icon and highlight the message in red.

```javascript
console.error("This is an error message.");
```

Expected output:
```
[✖] This is an error message.
```

## 5. `console.assert()`

This method writes an error message to the console if the specified condition is false. It does nothing if the condition is true.

```javascript
console.assert(1 === 2, "1 is not equal to 2");
```

Expected output:

```
[✖] Assertion failed: 1 is not equal to 2
```

## 6. `console.clear()`

This method clears the console, removing all messages.

```
console.clear();
```

## 7. `console.table()`

This method displays tabular data in a well-formatted table.

```javascript
const data = [
  { name: "John", age: 30 },
  { name: "Jane", age: 28 },
];
console.table(data);
```

Expected output:

```
┌─────────┬──────┬─────┐
│ (index) │ name │ age │
├─────────┼──────┼─────┤
│    0    │ John │  30 │
│    1    │ Jane │  28 │
└─────────┴──────┴─────┘
```

## 8. `console.count()`

This method logs the number of times it has been called with a specific label.

```javascript
for (let i = 0; i < 5; i++) {
  console.count("Counter");
}
```

Expected output:
```
Counter: 1
Counter: 2
Counter: 3
Counter: 4
Counter: 5
```

## 9. `console.countReset()`

This method resets the count for the specified label.

```javascript
console.count("Counter");
console.countReset("Counter");
console.count("Counter");
```

Expected output:
```
Counter: 1
Counter: 1
```

## 10. `console.group()`, `console.groupCollapsed()`, and `console.groupEnd()`

These methods are used to create nested groups of log messages, making it easier to read and understand output. `console.groupCollapsed()` creates a group that is initially collapsed.

```javascript
console.group("Parent Group");
console.log("Parent Log");
console.group("Child Group");
console.log("Child Log");
console.groupEnd();
console.log("Parent Log");
console.groupEnd();
```

Expected output:
```
Parent Group
  | Parent Log
  | Child Group
  |   ├ Child Log
  | Parent Log
```

## 11. `console.time()` and `console.timeEnd()`

These methods help measure the time taken for a block of code to execute. They take a label as a parameter, and `console.timeEnd()` outputs the elapsed time.

```javascript
console.time("Timer");
for (let i = 0; i < 1000; i++) {
  // Some operation
}
console.timeEnd("Timer");
```

Expected output:
```
Timer: 3.123ms
```

_Note: this obviously changes depending on what you place inside the timer block!_

## 12. `console.trace()`

This method displays a stack trace for the point at which it is called.

```javascript
function firstFunction() {
  secondFunction();
}

function secondFunction() {
  console.trace();
}

firstFunction();
```

Expected output:
```
Trace
    at secondFunction (script.js:6)
    at firstFunction (script.js:3)
    at script.js:9
```

## Bonus: Displaying Large Formatted Text in the Console

To display large, formatted text in the console, you can use the `%c` format specifier in `console.log()` along with CSS styling. You may see this kind of text shown in the console on large sites such as Facebook or Google, that are subject to frequent attacks on their users - it's often used to show a large warning to users telling them to not paste code into the console they do not understand.

```javascript
console.log(
  "%cHello, World!",
  "font-size: 24px; font-weight: bold; color: blue;"
);
```

In the example above, the `%c` format specifier is used to apply CSS styles to the text. The first argument of `console.log()` contains the text and the `%c` specifier, while the second argument contains the CSS styles.

You can apply multiple styles and use multiple `%c` specifiers within a single `console.log()` call:

```javascript
console.log(
  "%cHello%c, %cWorld%c!",
  "font-size: 24px; font-weight: bold; color: blue;",
  "",
  "font-size: 24px; font-weight: bold; color: red;",
  ""
);
```

In this example, different styles are applied to "Hello" and "World". Each `%c` specifier corresponds to a style string, and an empty string is used to reset the styling.

That's it! You now have a solid understanding of the various JavaScript `console` methods and how to display large formatted text in the console. Happy coding!

# Find that easy? Already know most of it?

You might be interested in taking one of our [Web Development Certifications](https://accreditly.io/), to help show prospective employers or clients that you know your stuff. We have a [JavaScript Fundamentals certification](https://accreditly.io/certifications/javascript-fundamentals), which covers some of the information found here.