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?
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.
console.table(x)
will display your object in a table, which might be useful to you in rare cases:
(index) | road | 0 | 1 | Values |
---|---|---|---|---|
name | alice | |||
address | oak | |||
children | bob | carol |
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);
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:
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] }
Get actionable, code-level insights to resolve JavaScript performance bottlenecks and errors.
Create a free Sentry account
Create a JavaScript project and note your DSN
Grab the Sentry JavaScript SDK
<script src="https://browser.sentry-cdn.com/7.112.2/bundle.min.js"></script>
Sentry.init({ dsn: 'https://<key>@sentry.io/<project>' });
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.