Unknown console API in JS

Are you a fan of console.log when you debug (instead of using debugger)? Or you want to make better logging for your scripts / applications?

You are in the right place! In this article, I gonna show you some console methods that you probably don't know that are going to make your logs better :)

Log with style: console.log

Okay, I'm sure you know this one. But did you know you can stylized your text.
You can do this by putting %c and defining the style in the following parameter (inline css format) before the text you want to stylize.

console.log(
  "%c This is a stylized text",
  "color:red;text-decoration: underline;"
);
```



![Stylized console log](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4efpwo2568c5wiuboqwz.png)


> **Note:** You can put multiple different stylized text in a same log:



```javascript
console.log(
  "%c This is a red text %c and a blue text",
  "color:red",
  "color:blue"
);
```



![Log with multiple colors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jcmfyltnd51u1i6y92kt.png)

> **Note:** You can do it with other logging function like `info`, `debug`, `warn` and `error`.

---- 

## Make a quick counter: `console.count`

How many times when doing `React` you wanted to see how many times a component renders? Yep you can see it with the **React Developper Tools** but it's not enough quick for me :)
So you can make a counter thanks to `console.count`:



```javascript
function MyComponent() {
  console.count("Render counter");

  return <p>A simple component</p>;
}
```



![console.count example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yct72d1pc4ewglt0kbxl.gif)


> **Note:** The label is optional, by default it will be "default".

---- 

## Log error with assertion: `console.assert`

If you want to display an error message when a specific assertion is false you can use `console.assert`:



```javascript
const useMyContext = () => {
  const myContextValues = useContext(MyContext);

  // You probably want to throw an error if it happens
  // It's only an example
  console.assert(
    myContextValue === undefined,
    "useMyContext has to be used below MyProvider"
  );

  return myContextValues;
};
```



![console.assert example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qqkhubojvcb4pqvsy6sc.png)

> **Note:** If you want to know more about React context performances issues, do not hesitate to read [my article](https://dev.to/romaintrotard/react-context-performance-5832).

---- 

## Full description of elements: `console.dir`

`console.dir` allows you to show a better description of objects. For example when you `console.log` a function it will only stringify the function, but with `console.dir` it will show you all properties:



```javascript
function myMethod() {}

console.dir(myMethod);
```



![console.dir example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v11a0op4z1njw8wq6k80.gif)


---- 

## Improve readability: `console.group`

If you have a lot of logs, it can be difficult to keep track of all these logs. Fortunately, `console.group` is here for you.



```javascript
function myMethod() {
  console.group("My method optional label");

  console.log("Log that will be group");

  console.info("With this one");

  console.error("And this one too");

  console.groupEnd("My method optional label");
}

myMethod();

console.log('Outside log');
```



![console.group example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/il7jnrpwhm49s7nlt0x2.gif)


> **Note:** It's possible to nest `console.group`. The label is totally optional but can really help you for debugging.

---- 

## Make a nice table: `console.table`

If you want to display data inside a table, you can do it with `console.table`. The **first parameter** is the **data** to display (an array or object). The **second one** is the columns to display (optional parameter).



```javascript
console.table(
  [
    {
      name: "First algo",
      duration: "3.2s",
      other: "Hello",
    },
    {
      name: "Second algo",
      duration: "4.1s",
      other: "Guys and girls",
    },
  ],
  ["name", "duration"]
);
```



![console.table example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/75lzyiutwb664krgwoo6.png)


---- 

## Make timers: `console.time`

When you want to see how long a method takes to run you can use `performance.now()` otherwise even easier `console.time()`, `console.timeEnd()` and `console.timeLog()`:



```javascript
function myMethod() {
  console.time("A label");

  // Do some process

  // If you want to log the time during the process
  console.timeLog("A label");

  // Other process

  // Will print how long the method takes to run
  console.timeEnd("A label");
}

myMethod();
```



![console.time example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0rroksj2ob49f6p9rbs9.png)


> **Note:** The label is optional, it will have the "default" label. You cannot start a timer with the same label than already running one.

---- 

## Display stacktrace: `console.trace`

If you want to know where is called your function then `console.trace` is your friend and will display the stack trace:



```javascript
function children() {
console.trace('Optional message');
}
function parent() {
 children();
}

parent();
```



![console.trace example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eyog7ty3cf0re7n0u38k.png)


----


What is your favorite console command? 
Do not hesitate to comment and if you want to see more, you can follow me on [Twitter](https://twitter.com/romain_trotard ) or go to my [Website](https://www.romaintrotard.com).