Using console.dir() to print JavaScript objects in the console
Tags: javascript, beginners, programming
Published: 2020-11-11 11:05:40

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: 

```javascript

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 :

```javascript

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:

```javascript
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:

```javascript
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()](https://developer.mozilla.org/en-US/docs/Web/API/Console/dir#:~:text=In%20other%20words%2C%20console.,the%20properties%20of%20the%20object.) along with one key parameter called **depth**. Let's take a look:

```javascript
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](https://momentjs.com/) 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](https://www.twitter.com/samueldjones).

Thanks for reading!