DEV Community

Cover image for Unknown console API in JS
Romain Trotard
Romain Trotard

Posted on • Edited on • Originally published at romaintrotard.com

4 2

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). 
Enter fullscreen mode Exit fullscreen mode

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more