Skip to content



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 am going to 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 stylize 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.

  "%c This is a stylized text",
  "color:red;text-decoration: underline;"

Stylized console log

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

  "%c This is a red text %c and a blue text",

Log with multiple colors

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>;

console.count example

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
    myContextValue === undefined,
    "useMyContext has to be used below MyProvider"

  return myContextValues;

console.assert example

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 example

Improve readability:

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

function myMethod() {"My method optional label");

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

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

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


console.log('Outside log'); example

It's possible to nest 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).

      name: "First algo",
      duration: "3.2s",
      other: "Hello",
      name: "Second algo",
      duration: "4.1s",
      other: "Guys and girls",
  ["name", "duration"]

console.table example

Make timers: console.time

When you want to see how long a method takes to run you can use 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");


console.time example

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


console.trace example


Rainbow Apps

Get it on Google Play

© Copyright 2022 Rainbow Apps. All rights reserved.

Rainbow Apps

© Copyright 2022 Rainbow Apps.
All rights reserved.

Get Numbersion app

Get it on Google Play

Follow me