Object Dump JavaScript

Question

Is there a 3rd party add-on/application or some way to perform object map dumping in script debugger for a JavaScript object?

Here is the situation... I have a method being called twice, and during each time something is different. I'm not sure what is different, but something is. So, if I could dump all the properties of window (or at least window.document) into a text editor, I could compare the state between the two calls with a simple file diff. Thoughts?

Possible duplicate of [How can I display a JavaScript object?](https://stackoverflow.com/questions/957537/how-can-i-display-a-javascript-object) — Jan Hudec, Jun 12 '17 at 13:19

score 158 · Answer 1 · edited May 27 '12 at 20:49

158

console.log("my object: %o", myObj)

Otherwise you'll end up with a string representation sometimes displaying:

[object Object]

or some such.

edited May 27 '12 at 20:49

Michał Powaga

22,561
8
51
62

answered Jan 05 '11 at 19:24

Tim

2,715
2
17
9

1

How on earth is this not the selected answer? Lucky me that this was answered on my birthday 4 years ago, when I wasn't using js. – Joey Carson Apr 01 '15 at 22:43
2

In Meteor (server-side) it prints `my object: %o`. Not very helpful :) – Erdal G. Nov 11 '15 at 09:27
1

In Node.js this just prints a literal `"%o"` in output. Merely separating the string from the object, however, does dump a human-readable object as desired. – Jul 14 '17 at 14:42
1

Funny how this has evolved. Now `console.log("my", myObj)` just pretends the `%o` was there, in Chrome, Firefox, Opera, IE11, Edge. – Bob Stein Jul 08 '19 at 16:27

score 63 · Accepted Answer · answered Apr 14 '09 at 20:36

63

Firebug + console.log(myObjectInstance)

answered Apr 14 '09 at 20:36

Darin Dimitrov

1,023,142
271
3,287
2,928

4

...and then look into the *Firebug console* and not the standard *Javascript console*. :-) – towi Jun 29 '12 at 09:49
@SteveRobbins, a browser which doesn't have a console in which you could output values from your javascript is unlikely nowadays. Are you referring to some specific browser? – Darin Dimitrov Dec 05 '12 at 06:40
4

IE has a console, but logging an object returns `[object Object]`. Not very useful – Steve Robbins Dec 05 '12 at 18:42
7

@SteveRobbins, who uses IE to develop web applications nowadays? Personally the only use I have found so far for Internet Explorer is to download a real web browser once I reinstall my Windows operating system. By the way that's the only time I launch this peace of software. – Darin Dimitrov Dec 05 '12 at 22:03
9

Any developer who supports major browsers. If the problem only exists in IE it can only be tested in IE, so you have to use the browser. – Steve Robbins Dec 06 '12 at 19:14
1

@SteveRobbins, good luck with IE :-) And my condolences if you have to support it. Hopefully you will find some great plugins out there for this major browser to debug your code. – Darin Dimitrov Dec 06 '12 at 21:25
2

And if you are using node.js and a terminal.. There is no firebug?? – Cheruvim Mar 11 '14 at 19:52
See Tim's answer below. – jdm2112 Mar 24 '16 at 19:44

score 48 · Answer 3 · edited Jan 31 '12 at 12:34

48

function mydump(arr,level) {
    var dumped_text = "";
    if(!level) level = 0;

    var level_padding = "";
    for(var j=0;j<level+1;j++) level_padding += "    ";

    if(typeof(arr) == 'object') {  
        for(var item in arr) {
            var value = arr[item];

            if(typeof(value) == 'object') { 
                dumped_text += level_padding + "'" + item + "' ...\n";
                dumped_text += mydump(value,level+1);
            } else {
                dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n";
            }
        }
    } else { 
        dumped_text = "===>"+arr+"<===("+typeof(arr)+")";
    }
    return dumped_text;
}

edited Jan 31 '12 at 12:34

Uwe Keim

39,551
56
175
291

answered Jun 10 '10 at 04:04

zhongshu

7,748
8
41
54

4

Update your code with changing the function name, as in recursion call, it is called "dump" while defining time its "mydump" – Vikas May 17 '11 at 09:05
9

Copy and paste of: http://binnyva.blogspot.com/2005/10/dump-function-javascript-equivalent-of.html – utopianheaven Jan 08 '12 at 17:44
2

this kills Chrome and Firefox with "too much recursion" when used to examine a jquery object – slashdottir Mar 31 '14 at 14:08
@slashdottir it is easy to fix, by checking `if (level > 10) return level_padding + '<< too deep >>';` – John Henckel Jan 19 '18 at 17:30
The "too much recursion" happens due to circular reference (when child parameter of one object references its parent object). Can be solved by remembering all parents of current value and if current value matches one of parent's, stop digging further. – Alex Velickiy Feb 06 '19 at 10:45

score 43 · Answer 4 · edited Aug 29 '17 at 21:10

43

If you're on Chrome, Firefox or IE10 + why not extend the console and use

(function() {
    console.dump = function(object) {
        if (window.JSON && window.JSON.stringify)
            console.log(JSON.stringify(object));
        else
            console.log(object);
    };
})();

for a concise, cross-browser solution.

edited Aug 29 '17 at 21:10

Nathan Arthur

8,287
7
55
80

answered Jun 18 '13 at 10:43

Chris HG

1,412
16
20

I like this one. Especially for browser that do not support object dumping. – Aley Nov 01 '13 at 10:30
And maybe replace that "else console.log(object);" with a call to a custom traversal function as in http://stackoverflow.com/a/3011557/2236012 above?... ;) – C.B. Nov 14 '13 at 20:28
@C.B. "too much recursion" and a frozen browser is what this gets me in Firefox and Chrome. – slashdottir Mar 31 '14 at 14:10
5

JSON.stringify cannot serialize cyclic structures. It will not work for all objects. – Grzegorz Luczywo Jun 11 '14 at 10:09

score 31 · Answer 5 · edited May 27 '12 at 20:50

31

Just use:

console.dir(object);

you will get a nice clickable object representation. Works in Chrome and Firefox

edited May 27 '12 at 20:50

Michał Powaga

22,561
8
51
62

answered May 23 '12 at 14:54

mons droid

1,038
9
10

1

Chrome and Firefox give [object Object] – slashdottir Mar 31 '14 at 14:09
You can test it in the Console (Hit F12) with `console.dir({bar:"foo"});` Does your object overwrites the toString method? – mons droid Apr 11 '14 at 09:00
seems to be working in the console at least. probably userr by me. thank you – slashdottir Apr 11 '14 at 16:26
1

such a sweet feature – tomalone Feb 27 '19 at 15:13
1

You sir are a hero – j4hangir Nov 26 '20 at 12:29

score 19 · Answer 6 · answered Mar 26 '18 at 14:26

19

for better readability you can convert the object to a json string as below:

console.log(obj, JSON.stringify(obj));

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

answered Mar 26 '18 at 14:26

Aris

4,643
1
41
38

score 13 · Answer 7 · edited May 27 '12 at 20:51

13

For Chrome/Chromium

console.log(myObj)

or it's equivalent

console.debug(myObj)

edited May 27 '12 at 20:51

Michał Powaga

22,561
8
51
62

answered Jul 03 '10 at 11:05

kaznovac

1,303
15
23

score 5 · Answer 8 · answered Nov 27 '17 at 06:17

Using console.log(object) will throw your object to the Javascript console, but that's not always what you want. Using JSON.stringify(object) will return most stuff to be stored in a variable, for example to send it to a textarea input and submit the content back to the server.

score 0 · Answer 9 · answered Nov 09 '16 at 13:58

0

In Chrome, click the 3 dots and click More tools and click developer. On the console, type console.dir(yourObject).Click this link to view an example image

answered Nov 09 '16 at 13:58

Roy Selim

51
2

Object Dump JavaScript

9 Answers9