How do I dump JavaScript vars in IE8?

Question

I have an object I need to examine in IE8. I tried the developer tools and console.log, their Firebug equivalent. However, when I output the object to the log:

console.log("Element: ", element);
console.log(element);

I only get the string

LOG: Element: [object Object]

instead of a clickable, examinable dump.

Is it possible to dump an object to the Log and examine its members, like in Firebug?

I can't use a homemade dump() function because the element I want to examine is so huge the browser will crash on me.

Mariannamarianne

Sadly IE9 does the same. Curse you Microsoft! – Jahvist

Answer 1

Here's one technique that I've found helpful:

• Open the Developer Tool Bar (hit F12)
• Go to the "Script" tab
• Click the "Start Debugging" button
• Next, type "debugger" into the console and hit enter. This should trigger a break point.
• Go to the "Watch" sub-tab
• Click the row that says, "Click to add..." and enter a variable you'd like to examine. Note that the variable must be globally available.
• At this point you should be able to examine your variable with tree-like UI
• Once you're done debugging click Continue button (or hit F5)

Virus

I don't have the time to go into this right now, but I'm pretty sure it's going to help me. Thanks for the step by step directions. – Mariannamarianne

I bet Microsoft Developers hate this. – Caul

you can write debugger; straight into the js code. #1306732 – Obregon

its nto only a good way to expose the objects, its a good way to learn some of the other stuff that i ordinarily otherwise dont use – Korman

@Xavi: Your image URL is broken. – Dannydannye

Answer 2

A bit off topic (as it won't work for DOM elements) but I've found it handy to use the JSON.stringify(object) to get a JSON string for the object which is pretty readable.

Parnas

This solution is a better response to the question. By the way, if your IE does not support JSON object, you can use JSON.org/json2.js which is a nice fallback – Gyron

just to note, if you try to use this technique for very large variables like jquery objects for example you will likely encounter "Error: Out of memory". – Kimon

PROTIP: Use JSON.stringify(obj, null, "\t") to make the output of stringify more readable. – Virus

you can also use console.dir(); to achieve this behaviour in ie. – Rasberry

@Rasberry Wow, great tip! Works great! I had to make others aware of your great tip, so I added an answer with that info. Hope that's okay with you. :-) – Ostracod

If your object is large, IE limits the output. My JSON object just ended in the middle. – Dissipate

Answer 3

@Chris commented @Andy's answer with the simple solution: Use console.dir(myObj) to get all the details printed out in the console in IE. Thanks Chris!

Rotate

Yes that's okay ^^ Stupid enough i didn't post an answer. I thought there were far enough good ones in here. – Rasberry

console.dir is not available in IE8 :( – Riarial

Also.. console.dir does not do deep serialization... JSON.stringify does – Yarvis

Hm... In IE10 console.dir(obj) only outputs "[object Object]". In IE 9 Mode it works. Thanks Microsoft... – Stigma

Answer 4

If you're dealing with nasty code and console.log is not available, try this in the console:

out = []; for (i in your_object) { out.push(i) } out.join("\n")

Darr

Answer 5

One suggestion is to use Firebug-Lite: It wraps console obj and you can see the result in IE like in most of the firebug console. Hope this help.

Countrybred

1) how to install and use firebug-lite on IE and other browsers: makeuseof.com/tag/… 2) video on how to circumvent bookmarking issue for firebug-lite bookmarklet in IE: youtube.com/watch?v=vLJ2RaNZ22E – Overcome

Installed firebug-lite, but 'console is undefined' is the error message I get. Tried googling for answers but no luck yet. If anyone knows how to get rid of this problem please do reply back here. – Overcome

Answer 6

Add this Tag in your page :

<script type="text/javascript" src="https://getfirebug.com/firebug-lite-debug.js"></script>

And the things will work.

Its working on my system.

Note: Do try this solution.

Botanical

Answer 7

A pictorial version of Xavi's excellent answer:

Kayekayla

Answer 8

I know this is a REALLY old question, but I was looking for an answer to this just now. If it's not an absolute requirement to use the IE console (which isn't very good, IMO), then you might consider using Firebug Lite (http://getfirebug.com/firebuglite). It's not a perfect solution, and you may not want to push that script out to your production environment, and it's not as full featured as Firebug, but it's pretty good in a pinch when you have to much around with a low-end browser like IE.

Bevon

if IE was not a requirement, then there would be no problems. The in-built chrome/firefox dev tools does this just fine. – Move

Answer 9

A bit chunky but it works for DOM objects:

 console.log( testNode.outerHTML.replace(testNode.innerHTML,"") ); 

Rhombohedron

Answer 10

Dump it into an existing HMTL-Element

I noticed IE 11 is stripping off console lines after 1027 chars :-/ When I had a large object to dump (12,000 chars) I dumped it into an existing DIV- oder TextArea-Element, from where I could copy the content.

var str = JSON.stringify(myObject);
$('#existing-element').text(str); // jQuery or
document.querySelector("#existing-element").innerHTML = str; // native JavaScript

Lunatic

Answer 11

console.log(element.toString()) might be your friend here...

Connive

I don't think this deserves a downvote - it works perfectly fine, just not the way I need. Downvotes should be reserved for blatantly wrong answers. +1 to even it out. – Mariannamarianne

the .toString() is what the interpreter calls when you try to output an object. So basically console.log(element) is the same as console.log(element.tostring()) – Vashtivashtia

Well, for dates, functions and arrays it works. eg "new Date().toString()" "new Date().toString.toString()" "[0, 1, 2].toString()" (without the .toString() it shows "{...}") (console.log is not necessary) – Jansson