Getting all info on a Javascript variable

Question

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.

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

T.J. Crowder · Accepted Answer · 2011-03-14 10:54:12Z

6

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

answered Mar 14, 2011 at 10:54

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

bezmax · Accepted Answer · 2011-03-14 10:54:00Z

1

This should help:

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

answered Mar 14, 2011 at 10:54

bezmax

26.3k11 gold badges56 silver badges84 bronze badges

1 Comment

bezmax Over a year ago

@WebDevHobo: Well, I never tested it, but the comment in the source tells this: * Arguments: The data - array,hash(associative array),object

Richard H · Accepted Answer · 2011-03-14 10:54:28Z

1

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.

answered Mar 14, 2011 at 10:54

Richard H

39.3k38 gold badges115 silver badges142 bronze badges

5 Comments

bezmax Over a year ago

I think by "starting debug session" he means activating "Script" tab which is inactive by default and does not track your javascript execution.

KdgDev Over a year ago

and when I refresh the page, all hell breaks loose.

Richard H Over a year ago

@WebDevHobo - for one particular site or all sites? If there's a site online that breaks for you let me know I'll try it.

KdgDev Over a year ago

This happens on all sites, including Localhost pages.

bezmax Over a year ago

@WebDevHobo if I were you, I'd try uninstalling firefox, clearing all temporary directories associated with firefox (like in Documents and Settings if Windows or ~/.firefox if Linux) and then reinstalling it all from zero point. There is a chance it could help. Or, you could even ask about your problem at superuser.com

roryf · Accepted Answer · 2011-03-14 11:03:23Z

0

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.

answered Mar 14, 2011 at 11:03

roryf

30.2k17 gold badges84 silver badges105 bronze badges

2 Comments

KdgDev Over a year ago

"variable console not defined". TBH, I was expecting it work, as I've seen it mentioned before. I'm not sure what I did wrong. I just replaced an alert with console.log

roryf Over a year ago

You need Firebug open and the console enabled.

Collectives™ on Stack Overflow

Getting all info on a Javascript variable

4 Answers 4

Comments

1 Comment

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related