How to inspect Javascript Objects

Question

How can I inspect an Object in an alert box? Normally alerting an Object just shows an opaque representation like [object Object]. For example:

alert(document); // displays "[object HTMLDocument]"

But I want to get the properties and methods of the object in the alert box. How can I achieve this functionality, if possible? Or are there any other suggestions?

Particularly, I am seeking a solution for a production environment where console.log and Firebug are not available.

I'm confused. In a production environment, you've got actual users, right? So why would you want to throw an alert with object properties? Maybe a better solution is to serialize the object and log it in a file or send an email? — Nathan Long
– Nathan Long, Commented Mar 19, 2011 at 0:17
Maybe s/he needs the alert as a tool, but the actual functionality to do something else. There could be all sorts of reasons why s/he might want to do this, such as showing statistics, or an error occurrence, or doing both by simply passing an object to whatever s/he is using to inspect the object. — Christian
– Christian, Commented Mar 21, 2011 at 0:06
Related on Node.js: stackoverflow.com/questions/24902061/… — Ciro Santilli OurBigBook.com
– Ciro Santilli OurBigBook.com, Commented Nov 2, 2014 at 10:44

Community · Accepted Answer · 2017-05-23 12:10:26Z

199

How about alert(JSON.stringify(object)) with a modern browser?

In case of TypeError: Converting circular structure to JSON, here are more options: How to serialize DOM node to JSON even if there are circular references?

The documentation: JSON.stringify() provides info on formatting or prettifying the output.

edited May 23, 2017 at 12:10

CommunityBot

11 silver badge

answered Mar 18, 2011 at 21:21

Torsten Becker

4,3132 gold badges24 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Christian Over a year ago

+1 Good suggestion. I'd add he could use jsonview (jsonviewer.stack.hu) to see it nicely.

Jan Molak Over a year ago

If you wanted to have it nicely formatted too you could call: alert(JSON.stringify(object, null, 4), where 4 is the number of spaces used for indentation.

Alex C Over a year ago

This gives me 'undefined' as output. I am trying to debug karma tests.

Morozov Over a year ago

There are caveats to this approach. OP says that she wants to inspect object's methods. stringify won't show methods: JSON.stringify({f: ()=>{}}) => "{}". Also, if the object implements toJSON method you get what that method returns, which is useless if you want to inspect the object: JSON.stringify({toJSON: () => 'nothin'}) => '"nothin"'.

Christian · Accepted Answer · 2011-03-18 21:13:50Z

59

The for-in loops for each property in an object or array. You can use this property to get to the value as well as change it.

Note: Private properties are not available for inspection, unless you use a "spy"; basically, you override the object and write some code which does a for-in loop inside the object's context.

For in looks like:

for (var property in object) loop();

Some sample code:

function xinspect(o,i){
    if(typeof i=='undefined')i='';
    if(i.length>50)return '[MAX ITERATIONS]';
    var r=[];
    for(var p in o){
        var t=typeof o[p];
        r.push(i+'"'+p+'" ('+t+') => '+(t=='object' ? 'object:'+xinspect(o[p],i+'  ') : o[p]+''));
    }
    return r.join(i+'\n');
}

// example of use:
alert(xinspect(document));

Edit: Some time ago, I wrote my own inspector, if you're interested, I'm happy to share.

Edit 2: Well, I wrote one up anyway.

edited Mar 18, 2011 at 21:13

answered Mar 18, 2011 at 20:25

Christian

28.3k18 gold badges117 silver badges162 bronze badges

6 Comments

Nakilon Over a year ago

Should be somehow protected from recursion. Hashes(dictionaries) with some internal html-renderer ids? Could be useful for noobs to push this check into the code.

Christian Over a year ago

@Nakilon I've always taken issue with infinite recursion, especially in PHP. There are two ways to fix this: using a depth parameter, or modifying the hash and add your own property which you use to check for recursion. The depth one is probably safer.

BC. Over a year ago

I like this version of line 7 better. It looks a little more like ruby and does some nice whitespace r.push(i+'"'+p+'" => '+(t=='object' ? '{\n'+xinspect(o[p],i+' ')+('\n' + i + '},') : o[p]+''));

Daniel Over a year ago

That piece of code totally wrecked Safari Mobile on iPhone. I'd go for the JSON.stringify solution below for a safer alternative.

Keno Over a year ago

This thing crashed safari,chrome inspecting an object, would not recommend.

|

zangw · Accepted Answer · 2016-05-03 10:29:52Z

42

Use console.dir(object) and the Firebug plugin

edited May 3, 2016 at 10:29

zangw

49.1k24 gold badges214 silver badges249 bronze badges

answered Jul 4, 2012 at 20:15

Ranjeet

6156 silver badges8 bronze badges

3 Comments

Shon Over a year ago

This gave me the most complete and helpful information for what I was after. Thanks.

Andrew Newby Over a year ago

I wasn't aware of the console.dir feature. I couldn't work out why I could no longer view the full object in Firebug. This has now sorted it for me. Thanks!

user10089632 Over a year ago

I need to know if there is other advantages of this over console.log besides the displaying convenience, please

brotherol · Accepted Answer · 2013-11-02 14:11:40Z

19

There are few methods :

 1. typeof tells you which one of the 6 javascript types is the object. 
 2. instanceof tells you if the object is an instance of another object.
 3. List properties with for(var k in obj)
 4. Object.getOwnPropertyNames( anObjectToInspect ) 
 5. Object.getPrototypeOf( anObject )
 6. anObject.hasOwnProperty(aProperty)

In a console context, sometimes the .constructor or .prototype maybe useful:

console.log(anObject.constructor ); 
console.log(anObject.prototype ) ;

answered Nov 2, 2013 at 14:11

brotherol

3713 silver badges6 bronze badges

Comments

Richard Torcato · Accepted Answer · 2019-01-04 17:07:37Z

18

Use your console:

console.log(object);

Or if you are inspecting html dom elements use console.dir(object). Example:

let element = document.getElementById('alertBoxContainer');
console.dir(element);

Or if you have an array of js objects you could use:

console.table(objectArr);

If you are outputting a lot of console.log(objects) you can also write

console.log({ objectName1 });
console.log({ objectName2 });

This will help you label the objects written to console.

edited Jan 4, 2019 at 17:07

answered Nov 22, 2012 at 20:16

Richard Torcato

2,84028 silver badges30 bronze badges

4 Comments

user10089632 Over a year ago

Those displayed values change dynamically, in real time which can be misleading for debugging purposes

Richard Torcato Over a year ago

in chrome use your console preferences and click preserve log. Now even if your script redirects you to another page your console is not cleared.

user10089632 Over a year ago

It seems that this issue is Firefox related because in Chrome unless you re console.log() the displayed values are still. You might suggest to move to Chrome but sometimes you're testing browser features availability. Anyway thanks for the tip that may be useful.

Yves M. Over a year ago

I cannot use console because I'm using styling stackoverflow.com/q/7505623/1480391 and it's not compatible

Joseph Bui · Accepted Answer · 2011-03-18 20:47:51Z

9

var str = "";
for(var k in obj)
    if (obj.hasOwnProperty(k)) //omit this test if you want to see built-in properties
        str += k + " = " + obj[k] + "\n";
alert(str);

edited Mar 18, 2011 at 20:47

Joseph Bui

1,73116 silver badges22 bronze badges

answered Mar 18, 2011 at 20:24

moe

30k4 gold badges21 silver badges16 bronze badges

1 Comment

moe Over a year ago

use Firefox or Chrome. Get Firebug for Firefox. a must have

vaFyreHeart · Accepted Answer · 2013-12-11 07:52:50Z

This is blatant rip-off of Christian's excellent answer. I've just made it a bit more readable:

/**
 * objectInspector digs through a Javascript object
 * to display all its properties
 *
 * @param object - a Javascript object to inspect
 * @param result - a string of properties with datatypes
 *
 * @return result - the concatenated description of all object properties
 */
function objectInspector(object, result) {
    if (typeof object != "object")
        return "Invalid object";
    if (typeof result == "undefined")
        result = '';

    if (result.length > 50)
        return "[RECURSION TOO DEEP. ABORTING.]";

    var rows = [];
    for (var property in object) {
        var datatype = typeof object[property];

        var tempDescription = result+'"'+property+'"';
        tempDescription += ' ('+datatype+') => ';
        if (datatype == "object")
            tempDescription += 'object: '+objectInspector(object[property],result+'  ');
        else
            tempDescription += object[property];

        rows.push(tempDescription);
    }//Close for

    return rows.join(result+"\n");
}//End objectInspector

Victor2748 · Accepted Answer · 2014-12-31 01:33:24Z

4

Here is my object inspector that is more readable. Because the code takes to long to write down here you can download it at http://etto-aa-js.googlecode.com/svn/trunk/inspector.js

Use like this :

document.write(inspect(object));

edited Dec 31, 2014 at 1:33

Victor2748

4,20914 gold badges56 silver badges95 bronze badges

answered Dec 31, 2014 at 0:25

Muhammad Eko Avianto

571 silver badge1 bronze badge

1 Comment

BrainSlugs83 Over a year ago

That's usually the case (and it's definitely the official guidance -- don't post links), OTOH, for something that's versioned like this, it can be kind of nice, since you know that you're always going to be looking at the latest code, and not some stale thing that was posted years ago and might not work anymore... -- Also, that huge block of code would look pretty awful pasted into a wall of text SO answer... -- Off topic: it would be nice if there was a way on SO to have "spoiler"-like tags for code and to be able to link to an external source and have it auto update (when possible),

Collectives™ on Stack Overflow

How to inspect Javascript Objects

8 Answers 8

4 Comments

6 Comments

3 Comments

Comments

4 Comments

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

4 Comments

6 Comments

3 Comments

Comments

4 Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related