Sentry Answers>JavaScript>

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

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

Richard C.

The ProblemJump To Solution

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:

Click to Copy
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:

Click to Copy
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:

Click to Copy
⌄ 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:

(index)road01Values
namealice
addressoak
childrenbobcarol

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:

Click to Copy
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:

Click to Copy
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.

Click to Copy
console.dir(x, { depth: 0, colors: true }); // Result: // { name: 'alice', address: [Object], children: [Array] }
  • ResourcesImprove Web Browser Performance - Find the JavaScript code causing slowdowns
  • ResourcesJavaScript Frontend Error Monitoring 101
  • Syntax.fm logo
    Listen to the Syntax Podcast

    Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.

    SEE EPISODES

Loved by over 4 million developers and more than 90,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.

© 2024 • Sentry is a registered Trademark
of Functional Software, Inc.