I'm not a JavaScript Wizard by a long shot. But I am a web-developer and so I need to know my way around it at least a bit.

Something I'll often do is simply alert a variable to see what it is.

However, the problem is that I'll often get a result like: "object HTMLInputElement". To me this means little to nothing. Sure I can look it up, but I need to alert children() of children() of children(), etc...

I've tried walking through the JavaScript with Firebug, but for some reason this is very slow. Firefox hangs when I start a debug session, for every single debug session and I don't know why.

So, I want to inform if there is a way to get detailed info on variables some other way. Or a system I can use to work with to make things easier.

I'm not a JavaScript Wizard by a long shot. But I am a web-developer and so I need to know my way around it at least a bit.

Something I'll often do is simply alert a variable to see what it is.

However, the problem is that I'll often get a result like: "object HTMLInputElement". To me this means little to nothing. Sure I can look it up, but I need to alert children() of children() of children(), etc...

I've tried walking through the JavaScript with Firebug, but for some reason this is very slow. Firefox hangs when I start a debug session, for every single debug session and I don't know why.

So, I want to inform if there is a way to get detailed info on variables some other way. Or a system I can use to work with to make things easier.

• javascript
• debugging

• You can use the txt = ""; for (i in obj) txt += i + ": " + obj[i]; logic. – vbence Commented Mar 14, 2011 at 10:58

4 Answers 4

I find the developer tools in Chrome work quite well, giving a good amount of detail on demand (usually just hovering the mouse over the variable in the script tab; if that variable is a structured object, a little tree control appears and you can drill down). But then, I don't have your Firebug issue either (or at least, not often anymore).

Debugging with alert is very time-wasteful and, as you've found, frustrating; if at all possible I'd look at using a real debugger (like Chrome's Dev Tools; I've also heard good things about Opera's).

This should help:

http://www.openjs./scripts/others/dump_function_php_print_r.php

The easiest way to inspect a javascript variable is with a debugger. If Firebug is not working out for you try using Google Chrome, it has an inspector built in.

Btw - not sure what you mean by "start a debug session". If you have firebug installed, you should simply be able to click on the firebug icon on the bottom right of your browser. Go to the script tab, and select from the drop down whatever js file you want, stick in a break point (just left-click on the margin) and refresh the page. I've never had a problem with Firebug, it's always worked extremely well. I strongly advise figuring out whatever your issue with it is, it will make your life a million times easier.

Using any of the browser dev tools, including IE9, you can use console.log to get the variable output on the console. What information this gives you will vary by browser, but with Firebug it allows you to explore the variable in the DOM inspector tab, with full access to all properties and functions (you can even copy the content of a function to paste elsewhere).

For instance:

var foo = {};

// Do lots of stuff with foo

if (typeof(console) !== "undefined" && console.log) { // prevent errors when console not open, ideally all console calls should be removed before going into production
    console.log(foo);
}

This has the advantage that it doesn't require any break points, so no slow step-debugging. It won't solve everything though, you'll often still need the debugger.