How to debug Javascript


Compiling and running javascript for codes that already works is not a big deal. But in real life, you will come across projects that require codes that run into several pages. It is easy to make mistakes. The mistakes can be a simple typographical error or can be a simple syntax error. If you try to run a code errors it just dont tell you where the potential problem could be. If the code is small, you can check it line by line to see where the problem lies. But if the code runs longer, it will be tough to locate the errors, as, someone puts it - "You are like a blind man looking for a black cat in a dark room that is not there."
The best way to debug your javascript is by using firbug extension in firefox.It is a free tool and is useful for not only javascript but also HTML and CSS.

1. Download and install firebug from http://addons.mozilla.org/firefox/addon/firebug.Click on Add to Firefox. The latest revision does not require restarting firefox.

2. Click the Install Now button.

4. To enable debugging go to Tools-> choose Web Developer?Firebug?Enable Firebug Firefox?Web Developer ( You can also do it with F12). A window appear at the bottom side of the browser. Click on Script -> Enable to starr debugging.

Let us assume that you write the following code and save it as test.html. This code is take from out degree C to degree F code. It has one extra curly bracket.
<html> <body> <script type="text/javascript"> <!-- /* ******************************************************** Example Area of Rectangle - Using functions ******************************************************** */ var F, C; for ( F= 31; F<=40; F++) { { C = 0.56 * (F-32); document.write(F , " deg F is equivalent to ", C, " deg C "," <p>"); } //--> </script> </body> </html>


If run this code with firebug enabled, you will see the following error



You may like to dig more into firebug by installing and playing with it.