Displaying objects in IE Developer Tools console

19,042

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])
}
Share:
19,042

Related videos on Youtube

Robert Koritnik
Author by

Robert Koritnik

Remote web developer, consultant, enthusiast, geek.

Updated on May 13, 2022

Comments

  • Robert Koritnik
    Robert Koritnik 16 days

    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?

    • Robert Koritnik
      Robert Koritnik over 11 years
      @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
    Linus Kleen over 11 years
    @Robert Koritnik: Thanks for accepting. Have you found a way to debug objects using jQuery?
  • Robert Koritnik
    Robert Koritnik over 11 years
    @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
    Robert Koritnik over 11 years
    @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
    Linus Kleen over 11 years
    @Robert Koritnik Excellent. Since jQuery isn't my cup of tea ;-) I failed miserably at trying to produce such a one-liner.
  • Robert Koritnik
    Robert Koritnik over 11 years
    @goreSplatter: It doesn't traverse arrays though. But could be extended to include those as well.
  • Linus Kleen
    Linus Kleen over 11 years
    @Robert Koritnik Good luck with that. Sometimes you just have to go an extra mile for IE... See you around!
  • Robert Koritnik
    Robert Koritnik over 11 years
    @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
    Robert Koritnik almost 10 years
    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
    Robert Koritnik almost 10 years
    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
    Robert Koritnik almost 10 years
    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
    David Herse almost 10 years
    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
    Topher Fangio almost 9 years
    Assuming this is available (which for me it was), this is a much nicer solution :-)
  • Carnix
    Carnix over 8 years
    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
    Carnix over 8 years
    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
    Linus Kleen over 8 years
    @Carnix [object Object] is IE's toString() rendition of any object other than strings, numbers or arrays.
  • Jesse Glick
    Jesse Glick over 8 years
    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
    Robert Koritnik almost 5 years
    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.