7 Console Methods Used by Pros
Tags: webdev, javascript, beginners, programming
Published: 2022-06-05 05:43:47

Often while **debugging**, beginners use the `console.log()` method to print out values. But there are a few other **console methods** that make your life much easier. Want to know what these methods are? Let's dive in!

## 1. `console.table()`

Logging **matrixes** or even long **arrays** or **objects** is a headache using the `console.log()` method. `console.table()` is a much more elegant way to do it.

```js
// Matrix
console.table([
  ["apple", "banana", "cherry"],
  ["Rs 80/kg", "Rs 100/kg", "Rs 120/kg"],
  ["5 ⭐", "4 ⭐", "4.5 ⭐"],
]);

// Maps
class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
}

const family = {};
family.mother = new Person("Jane", "Smith");
family.father = new Person("John", "Smith");
family.daughter = new Person("Emily", "Smith");

console.table(family);
```

![tables](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8bj8t7aqmp57nkch5ikd.PNG)

## 2. `console.trace()`

Are you having issues **debugging** a function? Left wondering how the **execution flows**? `console.trace()` is your friend!

```js
function outerFunction() {
  function innerFunction() {
    console.trace();
  }

  innerFunction();
}

outerFunction();
```

![trace](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4safvyqecrd2wdah7aev.PNG)

## 3. `console.error()` and `console.warn()`

Tired of **boring logs**? Spice things up with `console.error()` and `console.warn()`.

```js
console.error("This is an error message");
console.warn("This is a warning message");
console.log("This is a log message");
```

![messages](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qxnwo660ol7keriu3xlb.PNG)

## 4. `console.assert()`

This is another brilliant **tool** for **debugging**! If the **assertion** fails, the **console** will print out the **trace**.

```js
function func() {
  const a = -1;
  console.assert(a === -1, "a is not equal to -1");
  console.assert(a >= 0, "a is negative");
}

func();
```

![assertion](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wj8e84kgw8qc1uev4qz7.PNG)

## 5. `console.count()` and `console.countReset()`

Yet another incredible **debugging tool**! `console.count()` will print out the number of times it is executed.

```js
function fibonacci(num) {
  console.count("fibonacci");
  if (num < 2) {
    return num;
  }
  return fibonacci(num - 1) + fibonacci(num - 2);
}

fibonacci(2);

console.countReset("fibonacci");
console.log("COUNTER RESET");

fibonacci(5);
```

![counter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fwtf0czci97ntz50rptp.PNG)

## 6. `console.time()`, `console.timeEnd()`, and `console.timeLog()`

Need to check how long something takes? The **timer methods** are there to rescue you!

```js
console.time("timeout-timer");

setTimeout(() => {
  console.timeEnd("timeout-timer");
}, 1000);

setTimeout(() => {
  console.timeLog("timeout-timer");
}, 500);
```

![timers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fm7mh4kt7dzie8qjir4x.PNG)

**NOTE:** The `setTimeout`s are not executed immediately, resulting in a small deviation from the expected time.

## 7. `console.clear()`

After **logging** so much to the **console**, of course, you would need to clear it up for further use. The `console.clear()` method is the way to go!

```js
console.log("Some random text");
console.clear();
```

![cleared-console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g8e9et2cubeqqmg9s6t7.PNG)

**That's all folks!** Hope this helps you become a **better**, **well-rounded developer**!

Finding **personal finance** too intimidating? Checkout my **Instagram** to become a [**Dollar Ninja**](https://www.instagram.com/the.dollar.ninja/)

# Thanks for reading

Need a **Top Rated Front-End Development Freelancer** to chop away your development woes? Contact me on [Upwork](https://www.upwork.com/o/profiles/users/~01c12e516ee1d35044/)

Want to see what I am working on? Check out my [Personal Website](https://tapajyoti-bose.vercel.app) and [GitHub](https://github.com/ruppysuppy)

Want to connect? Reach out to me on [LinkedIn](https://www.linkedin.com/in/tapajyoti-bose/)

Follow me on [Instagram](https://www.instagram.com/tapajyotib/) to check out what I am up to recently.

Follow my blogs for **Weekly new Tidbits** on [Dev](https://dev.to/ruppysuppy)

**FAQ**

These are a few commonly asked questions I get. So, I hope this **FAQ** section solves your issues.

1. **I am a beginner, how should I learn Front-End Web Dev?**
   Look into the following articles:

    1. [Front End Development Roadmap](https://dev.to/ruppysuppy/front-end-developer-roadmap-zero-to-hero-4pkf)
    2. [Front End Project Ideas](https://dev.to/ruppysuppy/5-projects-to-master-front-end-development-57p)

2. **Would you mentor me?**
   Sorry, I am already under a lot of workload and would not have the time to mentor anyone.