Debugging a simple JavaScript code

Question

Started learning Javascript and I wrote something like this in FireBug of FireFox:

var myObject = {
"first_name" : "Rick",
"last_name" : "Hummer"
};
var name;
for (name in myObject) {
if(typeof myObject[name] != 'function') {
 (name + ' : ' + myObject[name])
}
}

When I run it, it only shows the last name, shouldn't it also list first name ?

Plus how can I put break points and debug this anyway?

enter image description here

• hop: Ypu can add breakpoints and see each line of execution getfirebug.com/javascript

Answer 1

You didn't tell the browser to output the values.

By default it writes out the result of the last executed line which is (name + ' : ' + myObject[name])

To solve this simply add console.log:

var myObject = {
"first_name" : "Rick",
"last_name" : "Hummer"
};
var name;
for (name in myObject) {
 if(typeof myObject[name] != 'function') {
 console.log(name + ' : ' + myObject[name]);
 }
}

Works for Firefox 19: Demo

• user1899082: ah I see... console.log ... BUT it is very weird, now it does not even show anything.. Try it yourself :)
• jantimon: It works for me (FF 19.0.2) - see the screenshot in my answer
• user1899082: Yes sorry, I should have moved back to the "ALL" tab in FireFox, I was in Errors tab

Answer 2

You have a statement that doesn't do anything, it builds a string but doesn't use it. The debugger is probably just showing you the last statement that was executed.

Change

(name + ' : ' + myObject[name])

To:

console.log(name + ' : ' + myObject[name])

and you should see both keys appear in the log.

Answer 3

Also, for debugging, you should simply write 'debugger' (without any quotes) at the line you want to put a breakpoint. As I know all browsers support that statement.