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?

Solution 1

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 {...}.

Solution 2

I use the built in JSON object.

JSON.stringify(my_object)

Solution 3

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.

Solution 4

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

Solution 5

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])
}

View more solutions

Comments

[Robert Koritnik]

@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.

[Linus Kleen]

@Robert Koritnik: Thanks for accepting. Have you found a way to debug objects using jQuery?

[Robert Koritnik]

@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]

@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);r‌​eturn;}console.log(n‌​+"."+p.toString()+" = "+obj[p]);}}}); that can easily be used in any browser (including Firebug) and can be called by $.inspect(someObject)

[Linus Kleen]

@Robert Koritnik Excellent. Since jQuery isn't my cup of tea ;-) I failed miserably at trying to produce such a one-liner.

[Robert Koritnik]

@goreSplatter: It doesn't traverse arrays though. But could be extended to include those as well.

[Linus Kleen]

@Robert Koritnik Good luck with that. Sometimes you just have to go an extra mile for IE... See you around!

[Robert Koritnik]

@goreSplatter: This one-longer-liner traverses arrays as well: $.extend({inspect:function(obj,n){n=n||"this";if($.isArray(o‌​bj)){for(var x=0;x<obj.length;x++){$.inspect(obj[x],n+"["+x+"]");}return;‌​}if($.isPlainObject(‌​obj)){for(var p in obj){$.inspect(obj[p],n+"."+p);}return;}console.log(n+" = "+obj.toString());}}); Use at your own risk. ;)

[Robert Koritnik]

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]

That does work for a single level but it doesn't traverse the whole object... You did see my comment in the accepted answer that traverses objects completely, right?

[Robert Koritnik]

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.

[David Herse]

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.

[Topher Fangio]

Assuming this is available (which for me it was), this is a much nicer solution :-)

[Carnix]

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]

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.

[Linus Kleen]

@Carnix [object Object] is IE's toString() rendition of any object other than strings, numbers or arrays.

[Jesse Glick]

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).

[Robert Koritnik]

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.