How to Pretty Print Objects in JavaScript

Ever had difficulties to navigate through complex objects in JavaScript during debug? - console.table might be just what you're looking for.

With console.table, you can display the passed data — which can be either an array or an object, or a combination of both — in a table.

// You can display arrays in a table
console.table('🐖', '🐂', '🐏', '🐐');

// You can also display objects
const animals = [
  { icon: '🐖', name: 'Pig' },
  { icon: '🐂', name: 'Ox' },
  { icon: '🐏', name: 'Ram' },
  { icon: '🐐', name: 'Goat' },
];

console.table(animals);

Besides displaying data, you can also pass a second argument to console.table. It must be either an array or an object that can be used to restrict which columns to display. The below example will only display the name of the animals.

const animals = [
  { icon: '🐖', name: 'Pig' },
  { icon: '🐂', name: 'Ox' },
  { icon: '🐏', name: 'Ram' },
  { icon: '🐐', name: 'Goat' },
];

// Restrict to only display names
console.table(animals, ['name']);

If you are also interested in how you can format stringify JSON outputs, check the article below:

How to Format JSON in JavaScript

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

---

Resources

• MDN Web Docs