The Chrome JavaScript debug console and [Object object]

By Alvin Alexander. Last updated: October 26, 2019

As I’ve gotten back into client-side web development — specifically using Sencha Touch 2, a JavaScript framework — I’ve quickly run into a problem in the Chrome JavaScript debug console. When I try to use console.debug() to debug an object, I get this non-useful output about the JavaScript object I’m printing:

[Object object]

There may be better ways to print the desired object, but I quickly discovered this trick to printing all of the properties of a JavaScript object:

function dumpObject (obj) {
    var output, property;
    for (property in obj) {
        output += property + ': ' + obj[property] + '; ';
    }
    console.log(output);
}

This provides a lot of output about the object you pass into it. If your object is very large, you’ll get a lot of output. However, that’s better than no output at all.

Better example

I just used this code in a Sencha ExtJS controller, and the important code looks like this:

onStockFormCancelClicked: function(button, event, options) {
    this.dumpObject(event);
    button.up('window').close();
},

dumpObject: function(obj) {
    var output, property;
    for (property in obj) {
        output += property + ': ' + obj[property] + '; ';
    }
    console.log(output);
}