How do I display an object with all its properties for debugging in JavaScript?

Richard C.

—December 15, 2023

The Problem

One of the most common debugging techniques in JavaScript and TypeScript, both in the browser and Node.js, is to print an object to the console or in an alert popup. You can read the full state of the object to see what’s going wrong in your program.

However, say you create a new object and try to display it like this:

const x = { name: "alice", address: { road: "oak" }, children: ["bob", "carol"] };
alert(x);

The browser will print [object Object], and not display any object properties. How do you get the browser to print the object properties in this case?

The Solution

If you want to debug an application running in the browser using print statements, the easiest way is to use the dev tools. All browsers have a console, usually accessed by pressing F12.

The most common command to print to the console is console.log:

const x = { name: "alice", address: { road: "oak" }, children: ["bob", "carol"] };
console.log(x);

This will display the object in the browser console with all properties, arrays, and sub-objects:

⌄ Object { name: "alice", address: {…}, children: (2) […] }
    ⌄ address: Object { road: "oak" }
        road: "oak"
        › <prototype>: Object { … }
    ⌄ children: Array [ "bob", "carol" ]
        0: "bob"
        1: "carol"
        length: 2
        › <prototype>: Array []
    name: "alice"
    › <prototype>: Object { … }

You used to have to use console.dir to display inner objects, but in modern browsers, the output of log and dir is almost identical.

Table Output

console.table(x) will display your object in a table, which might be useful to you in rare cases:

Error Output

If you want to display output to the console only under certain conditions, like when an error occurs, you can use the following console methods:

console.debug(x);
console.info(x);
console.warn(x);
console.error(x);

Write an Object to a String With JSON

Using console.log won’t help you if you are trying to write an object to a string to display it in a popup alert(), or to save the contents to a log file.

In this case, you need to export the object to JSON:

const x = { name: "alice", address: { road: "oak" }, children: ["bob", "carol"] };
const json = JSON.stringify(x);
alert(json);

// Displays:
// {"name":"alice","address":{"road":"oak"},"children":["bob","carol"]}

Note that stringify will not export all objects perfectly. Here are some exceptions:

• Functions in the object are ignored. Neither their names nor bodies are printed.
• Circular references will throw an error.
• BigInts will throw an error.
• Maps and Sets will be empty.
• DOM elements (like Button) will be empty.
• Properties with keys that are symbols will be ignored.

Printing an Object in Node.js

Node.js also provides console methods for displaying objects. It is more powerful, allowing you to specify how many levels down in the object’s properties to print, and whether to display colored properties. Specifying a depth can prevent circular reference errors. Colors are enabled by default.

console.dir(x, { depth: 0, colors: true });

// Result:
// { name: 'alice', address: [Object], children: [Array] }