Using console.dir() to print JavaScript objects in the console

It usually happens when you need to quickly debug something. You want to check what an object looks like at a certain point in your code, so you print it out to the console. Naturally, you wrap the object in a console.log() statement, run the logic and wait for the printed output. But no. Instead of the expected object with all of its properties showing up in the console, you are given the ever unhelpful [Object] or [Array] elements.

This has happened to me so many times that I just wish there was an in-built console method which would JSON stringify an object by default and print to the console, something like console.stringify(obj). Alas, we are stuck with wrapping our object in a JSON.stringify() and then wrapping it again in our console.log() statement.

A quick note that the current approach of using JSON.stringify() - along with the replacer and space parameters - is perfectly valid and looks a little like this:

console.log(JSON.stringify(obj, null, 2));

There is nothing wrong with this solution and it works fine if you want to see everything in JSON format. But what if you want to see the object for what it is - a JavaScript object?

Let's look at an example :

const nestedObject = {
  consignments: [
    {
      consignmentId: 1,
      orders: [
        {
          orderId: 1,
          orderLines: [
            {
              productId: 123,
              productRef: "Red Jumper",
              orderComponents: [
                {
                  componentRef: "COMP-001",
                  price: null,
                  qty: 3
                }
              ]
            }
          ]
        }
      ]
    }
  ]
};

Here, we have a very nested object where we are trying to debug an issue with the price field in the orderComponents array. If we simply use console.log() to print out the object, we will get the following (not very helpful) output in our console:

console.log(nestedObject);

// Output
{ consignments: [ { consignmentId: 1, orders: [Array] } ] }

If we used our old friend JSON.stringify() to print out the entire object, we would get the following:

console.log(JSON.stringify(nestedObject, null, 2));

// Output
{
  "consignments": [
    {
      "consignmentId": 1,
      "orders": [
        {
          "orderId": 1,
          "orderLines": [
            {
              "productId": 123,
              "productRef": "Red Jumper",
              "orderComponents": [
                {
                  "componentRef": "COMP-001",
                  "price": null,
                  "qty": 3
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

That works! We can see that the price field is suspiciously set to null, so we can carry on with our debugging. Again, there is nothing wrong with this method. In this post, I'm simply providing an alternative way.

For the same result, but displaying the output in a simple JavaScript object showing all its properties, we can take advantage of console.dir() along with one key parameter called depth. Let's take a look:

console.dir(nestedObject, { depth: null });

// Output
{ consignments:
   [ { consignmentId: 1,
       orders:
        [ { orderId: 1,
            orderLines:
             [ { productId: 123,
                 productRef: 'Red Jumper',
                 orderComponents: [ { componentRef: 'COMP-001', price: null, qty: 3 } ] } ] } ] } ] }

Setting the depth parameter to null is essential for this trick to work as it removes the limit of the object's depth, so we can view all levels of the nested object.

Note: Remember that the object depth is unlimited. For example, when using the Moment.js library, this method will print out the entire Moment date object if you have moment.utc() as one of the object values. In which case, JSON.stringify() is probably the cleaner option.

---

In this post, we learnt a different way of printing JavaScript objects to the console using the console.dir() method. It helps us to see all the properties of a specified JavaScript object in the console without converting to JSON format.

You may continue to use JSON.stringify() after reading this post (I probably will too!), but having seen the advantages of using console.dir(), at least we have another option now!

If you have any questions or feedback on this post, feel free to comment below or start a conversation over on Twitter.

Thanks for reading!