How to debug javascript?

[dukevn]

Hi folks,

In my opinion after some little learn in javascript, the editors are not important, but the debugger is. I always have difficulties in debugging myself why my code does not run. Firebug (that I just heard of few days ago) is one option, but a lot of cases, firebug does not show any error but the code still does not show any output (still has problems).

Anybody has advice or experience about javascript debugging, especially integrated in editors? I use jselipse now, but it just helps me checking syntax errors.

Thanks,

D.

[molendijk]

Firebug?

[jscheuer1]

Firebug?

dukevn just said that firebug doesn't always give an error, even when the code doesn't do anything.

I haven't tried firebug yet, though I make extensive use of the FF developer extension, which I believe probably at least comes close to, if not equal to what firebug can provide.

The sad truth though is that code which does nothing, or that doesn't do what's expected can still be valid code. In those cases, no debugging tool that shows only errors will help.

A tool such as exists for some of the machine code languages that will show you what a value is in mid code might help in such cases, but clever use of alerts and try/catch will do the same in javascript if you are both clever and persistent. My apologies to devotees of firebug if it can do this sort of thing. As I say, never used it.

Over time one does develop instincts, while at the same time picking up good coding practices and an awareness of what constitutes valid code both in javascript and in HTML.

Once you have that under your belt, errors in what you write are less likely. And, when confronted by other's code that isn't performing, you will have a tendency to see likely areas in that code that could be problems.

To sum up, tools can help a tremendous amount, but there is no substitute for experience and for learning the rules involved in the coding language(s) you are using.

I have been fortunate in that folks around here, much more knowledgeable than I, have been willing to share that knowledge with me pretty much on a case by case basis. However, most of those folks are now infrequent participants in these forums. If I can help out with something you are stuck on, I will be happy to since I now stand on the shoulders of those who came before.

[rangana]

Great response John.

There might be some members who are knowledgeable than you (as you said), but they don't have the wisdom that you possess.

[dukevn]

dukevn just said that firebug doesn't always give an error, even when the code doesn't do anything.

I haven't tried firebug yet, though I make extensive use of the FF developer extension, which I believe probably at least comes close to, if not equal to what firebug can provide.

I agree. There are also some other mistakes (especially novice like me), for example a forever loop (because condition is always correct, it keeps running over and over again): there is no error at all, but the code gets stuck at the loop and might show nothing

The sad truth though is that code which does nothing, or that doesn't do what's expected can still be valid code. In those cases, no debugging tool that shows only errors will help.

A tool such as exists for some of the machine code languages that will show you what a value is in mid code might help in such cases, but clever use of alerts and try/catch will do the same in javascript if you are both clever and persistent. My apologies to devotees of firebug if it can do this sort of thing. As I say, never used it.

That is why when trying to understand a script, I usually want to put a sign or an alert (as you said) in the middle of the code, or in a loop, to see what the output is. Unfortunately, I do not have much experience of that technique in javascript. For example, in php, most of the time I can add 'echo "show here";' anywhere to check the php code, but it is not always true to add 'document.write' anywhere in javascript code to see output, especially in functions. Putting document.write in somewhere even stops the code without showing anything output.

Can you guys suggest me a "safe" alert - similar to 'echo' in php - that I can add amost everywhere in the code and it will at least show some output?

Over time one does develop instincts, while at the same time picking up good coding practices and an awareness of what constitutes valid code both in javascript and in HTML.

Once you have that under your belt, errors in what you write are less likely. And, when confronted by other's code that isn't performing, you will have a tendency to see likely areas in that code that could be problems.

To sum up, tools can help a tremendous amount, but there is no substitute for experience and for learning the rules involved in the coding language(s) you are using.

That is true not only for learning programming language but also for learning anything in life. Practicing, or even making errors, always give you a lot

I have been fortunate in that folks around here, much more knowledgeable than I, have been willing to share that knowledge with me pretty much on a case by case basis. However, most of those folks are now infrequent participants in these forums. If I can help out with something you are stuck on, I will be happy to since I now stand on the shoulders of those who came before.

I used to try solving problems myself, either based on my basic knowledge, or on searching on internet for related information, and try NOT to ask, especially problems in my fields (math - physics). But sometimes it takes too long or even forever to solve problems yourself.

Since I got acquainted with Unix two years ago, and then some programming languages, I have found that there are a lot of kind people (like you, John ) willing to share knowledge and help people to solve problems, and that asking helps me a lot in solving problems.

Thanks all of you guys who have been helping me . I have learned a lot from you.

D.

[jscheuer1]

Can you guys suggest me a "safe" alert - similar to 'echo' in php - that I can add amost everywhere in the code and it will at least show some output?

There is the alert:

alert('here');

or:

alert(some_variable);

both of which can be really useful, but if used carelessly (like in the middle of a loop) can virtually lock up the browser.

I like alert for some things though, just to see if I got somewhere in the code, ex:

if(typeof whatever == 'string'){
alert(whatever);
other code;
};

I'll just throw it in there to see two things:

1 ) Did the code branch execute?
2 ) If so, what was the value of whatever?

But, as I say, it can lock up the browser if its in a loop, even one that just repeats 100 times can get tiresome, it doesn't have to be endless to be a pain.

So for situations like that, or that I think might be like that, I'll sometimes set up an element to receive the value:

<input type="text" id="test">

Then in my code that I'm testing:

if(typeof whatever == 'string'){
document.getElementById('test').value = whatever;
other code;
};

That way, even if my code is in a loop, it won't lock up, and I'll get to see the value(s) of whatever, or if there are none.

[blm126]

I know you said you already tried firebug, but it is the best javascript debugger I know of. If you have it installed, all you need to do is set some breakpoints. To do this, go to firebug's Script tab. Then, look at your script in the left pane. Find the line you think is the problem(or the very first line if you have no clue), and click the line number next to it. Now, start the script, you might need to do this by reloading the page. Firebug will pause the script when it reaches the breakpoint. It will move through the script one line at a time, when you press the "Step Into" button(above the right pane, icon is an arrow pointing down). When you are debugging a script like this, you can see the value of all variables in the "Watch" tab(right pane of script tab).

To your other question, if you are using firebug, the best alternative to alert() is console.log(). This function will print whatever you hand it to the Console tab of firebug. If you give an object type other than string, it will print it in a way that allows you to inspect the object.

There are some other alternatives to Firebug. The most well known one is Venkman. Trust me, though, when I say that Firebug is the best Javascript debugger you will find. Search Google for a good tutorial and you will see how powerful it really is.

[jscheuer1]

I know you said you already tried firebug, but it is the best javascript debugger I know of. If you have it installed, all you need to do is set some breakpoints. To do this, go to firebug's Script tab. Then, look at your script in the left pane. Find the line you think is the problem(or the very first line if you have no clue), and click the line number next to it. Now, start the script, you might need to do this by reloading the page. Firebug will pause the script when it reaches the breakpoint. It will move through the script one line at a time, when you press the "Step Into" button(above the right pane, icon is an arrow pointing down). When you are debugging a script like this, you can see the value of all variables in the "Watch" tab(right pane of script tab).

That's what I was talking about when I said:

A tool such as exists for some of the machine code languages that will show you what a value is in mid code might help in such cases, but clever use of alerts and try/catch will do the same in javascript if you are both clever and persistent. My apologies to devotees of firebug if it can do this sort of thing. As I say, never used it.

It would have been a little more helpful had you said that the first time though. In any case, sounds like a great feature!

[dukevn]

I know you said you already tried firebug, but it is the best javascript debugger I know of. If you have it installed, all you need to do is set some breakpoints. To do this, go to firebug's Script tab. Then, look at your script in the left pane. Find the line you think is the problem(or the very first line if you have no clue), and click the line number next to it. Now, start the script, you might need to do this by reloading the page. Firebug will pause the script when it reaches the breakpoint. It will move through the script one line at a time, when you press the "Step Into" button(above the right pane, icon is an arrow pointing down). When you are debugging a script like this, you can see the value of all variables in the "Watch" tab(right pane of script tab).

As I said before, I just heard about Firebug few days ago, and I did not enough time to carefully learn it. Thanks for pointing out this very interesting debugging feature using breakpoints.

To your other question, if you are using firebug, the best alternative to alert() is console.log(). This function will print whatever you hand it to the Console tab of firebug. If you give an object type other than string, it will print it in a way that allows you to inspect the object.

Ah, this is the first time I heard about console.log(). Thanks for your suggestion.

There are some other alternatives to Firebug. The most well known one is Venkman. Trust me, though, when I say that Firebug is the best Javascript debugger you will find. Search Google for a good tutorial and you will see how powerful it really is.

Besides Firebug, and Venkman that you concerned about, I just found out the plugin for Eclipse, in case anybody needs: the AJAX Toolkit Framework (ATF - http://www.eclipse.org/atf/) - in some opinion, very powerful in debugging javascript also.

D.