Learn to use console.table to debug collections of objects in Chrome.
In this protip, I'll show you a trick for displaying all of the data in a collection of objects for quicker debugging.
If you want to follow along, do so in Google Chrome! (or Firefox)
roleModels in the page that is a collection of objects.
cmd + option + j), type
roleModels and press enter. You should see something output like this:
In most cases when there is an array of objects, every object will have a similar structure. In this case, every object has the follow keys:
- firstName (string)
- lastName (string)
- stateOfOrigin (string)
- roles (array)
Rather than have to open each object individually by clicking on the arrow next to it, to see what data is in each object, there's a convenience method on the
console object called
Rather than just typing
Now you should get a table with the keys as the column headers, the first row as the index of that object in the array, and the rest of the data associated with that object.
This is an awesome feature that gives you the ability to see data at a glance.
console.table takes two parameters: the array of objects to display, and an array of the keys you want to display. In this scenario,
roles doesn't display much outside of the length of the array itself, so we might want to show all the data without the roles column.
To do so, you would use:
console.table(roleModels, ['firstName', 'lastName', 'stateOfOrigin'])
Now you should get the same table, without the roles column.
console.table also works for an object of objects (because an array is a type of object) and the index will be the key for the child objects. You can see an example of this by running
Hopefully you find this to be a useful gem tucked away in the Chrome developer tools!
This feature is only available in Chrome and Firefox.