Displaying objects in IE Developer Tools console

Question

I'm debugging my web application in Firefox, Chrome and Internet Explorer. With the latter I'm using Developer Tools to debug my scripts.

The problem I'm having is that when I write some expression in console window and it should return an object all I can see is a simple {...} which isn't really helpful.

Is it possible to make it work similar to Firebug or Chrome console that actually display object content. Chrome is the best in this regard, because you can directly traverse the whole object as in Visual Studio.

Anyway. Is it possible to make IE Developer Tools console to display object properties and their values?

The only way I get to see properties of an object of interest, I set a breakpoint at the appropriate line and use the *Watch* window... — Linus Kleen, Dec 29 '10 at 09:40
@goreSplatter: That's fine if you want to inspect something in the code. But I run arbitrary code in console that's not actually part of my script... Something as simple as: `window.JSON.parse('{"d":"2010-01-01T12:34:56Z","i":123}');` and all I get back as a result is just `{...}` which is **really** helpful. Thanks Microsoft. — Robert Koritnik, Dec 29 '10 at 09:43

score 20 · Answer 1 · answered Jan 23 '13 at 20:47

20

I use the built in JSON object.

JSON.stringify(my_object)

answered Jan 23 '13 at 20:47

Dave Aaron Smith

4,517
32
37

Assuming this is available (which for me it was), this is a much nicer solution :-) – Topher Fangio Jul 09 '13 at 18:11
this doesn't show all the properties. if you have a complex object, it seems to only show static properties. That is, if a property is a function, it seems to get left out here. – Carnix Jan 06 '14 at 20:46

score 8 · Answer 2 · answered Jan 25 '12 at 22:07

8

To explore an object's properties and values in IE you must first:

Have a breakpoint set (or script debugging enabled)
Trigger the breakpoint (or encounter an error)

The locals tab has the properties and details locally available at the time the breakpoint was triggered Adding an object name to the watch tab you can view the properties and details of the named object

Our "friends" at Microsoft have a video describing IE's developer tool. At 3:03 is when they mention this "easy" way to explore objects.

answered Jan 25 '12 at 22:07

RJThompson3rd

81
1
2

2

That's fine if you're debugging page scripts... But if you're running arbitrary code in console and would like to investigate results directly you can't set any breakpoints. Unfortunately Microsoft has a very unreal perspective of what useful developer tools should be... – Robert Koritnik Jul 03 '12 at 09:28

score 6 · Answer 3 · answered Jul 11 '12 at 22:51

6

Try console.dir(/*object*/); This should give you a little more detail in ie.

answered Jul 11 '12 at 22:51

David Herse

471
5
8

2

Is this a joke? `dir` is not supported. But I can use `log` which displays `LOG: [object Object]` instead of `{...}` in IE8 which is much more *helpful* I admit. :) But it's true I don't know what IE9 displays or even IE10. Or their support for `dir` either. I suspect they could be more *smart* otherwise all this just proves one thing: **MS doesn't use IE to debug web applications**. – Robert Koritnik Jul 12 '12 at 08:51
4

No, not a joke. I should clarify that this is supported in ie9 and above only. You could also run ie9 in older browser modes to get an impression of the issues you may be getting. It doesn't replace testing in older browsers, but it can be easier to find bugs with the better developer tools available in IE9. – David Herse Jul 19 '12 at 00:47
Works in IE 9, though it prints all the object structure up front, rather than showing an expandable tree like Chrome for example does with `console.log(object)`. – Jesse Glick Jan 07 '14 at 17:52

score 4 · Accepted Answer · answered Dec 29 '10 at 09:53

4

If the Prototype API is an option, you can debug your objects like so:

var obj = window.JSON.parse('{"d":"2010-01-01T12:34:56Z","i":123}');
alert($H(obj).inspect());

Other than that, I know of no other way to not get the really helpful {...}.

answered Dec 29 '10 at 09:53

Linus Kleen

33,871
11
91
99

@Robert Koritnik: Thanks for accepting. Have you found a way to debug objects using jQuery? – Linus Kleen Dec 29 '10 at 12:55
@goreSplatter: Well your solution with Prototype doesn't work for me... But your answer *...I know of no other way...* is the one I accepted as the right answer. Because there probably really isn't any solution to this. I don't know why doesn't a developer tool provide such basic functionality. – Robert Koritnik Dec 29 '10 at 13:21
3

@goreSplatter: as for similar jQuery functionality I've written this little one liner: `$.extend({inspect:function(obj,n){n=n||"this";for(var p in obj){if($.isPlainObject(obj[p])){$.inspect(obj[p],n+"."+p);return;}console.log(n+"."+p.toString()+" = "+obj[p]);}}});` that can easily be used in any browser (including Firebug) and can be called by `$.inspect(someObject)` – Robert Koritnik Dec 29 '10 at 13:23
@Robert Koritnik Excellent. Since jQuery isn't *my cup of tea* ;-) I failed miserably at trying to produce such a one-liner. – Linus Kleen Dec 29 '10 at 13:24
@goreSplatter: It doesn't traverse arrays though. But could be extended to include those as well. – Robert Koritnik Dec 29 '10 at 13:48
@Robert Koritnik Good luck with that. Sometimes you just have to go an extra mile for IE... See you around! – Linus Kleen Dec 29 '10 at 13:53
2

@goreSplatter: This one-longer-liner traverses arrays as well: `$.extend({inspect:function(obj,n){n=n||"this";if($.isArray(obj)){for(var x=0;x – Robert Koritnik Dec 29 '10 at 14:09
I've struggled with this one for a long time, and thought I'd google and see what I could find. I tried the one-longer-liner and, in IE10 in IE8+IE8 Standards mode (I know. yuck), the calling $.inspect on my jquery object rendered "this = [object Object]" in the console. – Carnix Jan 06 '14 at 20:42
@Carnix `[object Object]` is IE's `toString()` rendition of any object other than strings, numbers or arrays. – Linus Kleen Jan 06 '14 at 23:19

score 3 · Answer 5 · edited Jul 03 '12 at 02:12

3

Try this in the console script window:

for (var a in object) {
    console.log("object["+a+"]="+object[a])
}

For example,

for (var a in document.head){
    console.log("document.head["+a+"]="+document.head[a])
}

edited Jul 03 '12 at 02:12

Rob Kielty

7,958
8
39
51

answered Jul 02 '12 at 23:18

Greg S

31
2

1

That does work for a single level but it doesn't traverse the whole object... You did see [my comment](http://stackoverflow.com/questions/4552944/displaying-objects-in-ie-developer-tools-console/11302451#comment4993853_4553069) in the accepted answer that traverses objects completely, right? – Robert Koritnik Jul 03 '12 at 09:36

score 1 · Answer 6 · answered Jun 06 '14 at 20:48

1

Here's a rather off-the-wall way to do it... run the object through JSON.stringify and display the results of that instead.

answered Jun 06 '14 at 20:48

Michael Cox

49
2

score 0 · Answer 7 · answered Jan 07 '14 at 11:01

0

Add the object to watch and you can see and analyze it completely from watch panel.

answered Jan 07 '14 at 11:01

Prateek Batla

1,972
1
11
8

score 0 · Answer 8 · answered Jun 08 '17 at 16:34

0

What works for me and this may just be something they added recently but after you pull up the console log. Clear the log but leave the console open then refresh the page. As the page loads in, you should then be able to explore the objects. I am not sure why it needs to be done that way but it appears to work.

answered Jun 08 '17 at 16:34

Deathstalker

794
10
8

I expect in 2017 you're not using IE8, which only had rudimentary dev tools. Today's tools have greatly evolved and they do what they're intended to do. – Robert Koritnik Jun 09 '17 at 06:14

Displaying objects in IE Developer Tools console

8 Answers8

Linked