DEV Community

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

Posted on • Updated on

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

Stylized console log

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

console.log(
  "%c This is a red text %c and a blue text",
  "color:red",
  "color:blue"
);
Enter fullscreen mode Exit fullscreen mode

Log with multiple colors

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:

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

  return <p>A simple component</p>;
}
Enter fullscreen mode Exit fullscreen mode

console.count example

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:

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;
};
Enter fullscreen mode Exit fullscreen mode

console.assert example

Note: If you want to know more about React context performances issues, do not hesitate to read my article.


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:

function myMethod() {}

console.dir(myMethod);
Enter fullscreen mode Exit fullscreen mode

console.dir example


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.

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

console.group example

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).

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

console.table example


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():

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

console.time example

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:

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

parent();
Enter fullscreen mode Exit fullscreen mode

console.trace example


What is your favorite console command?
Do not hesitate to comment and if you want to see more, you can follow me on Twitter or go to my Website.

Discussion (0)