Step 1. You should have firefox browser handy. If not, you could download one from :

        http://www.mozilla.org/products/download.html?product=firefox-11.0&os=win&lang=en-US

Step 2. Once you get your firefox browser, you could then download firebug within the browser.

       Open Firefox browser and go to Tools-> Options

      

 

       Go to General and then click Manage Add-ons

    

      Look for firebug in the search criteria. And then click Install besides the plugin.

   Step 3.  Now you have firebug installed, you could start using firebug to debug the Javascript. You could find a small icon aside on the right corner of the browser and once you click that button, the firebug is invoked . However you could only debug one Javascript a time for one session.

       

   Normally firebug would show up at the bottom. When you choose Script, you have to click the blue link : Enable

 

    Now click Reload

   

 

     Say I navigate to the Javascript for senstive area that I would assume where a problem would be. And put the breakpoints on the left like below: You now see the buttons on the upper right corner are still greyed out because you have not invoke anything on the current web page.

  And when you invoke the corresponding fields on the webpage. It dynamically breaks to the line you set the breakpointes. Now you are ready to debug the Javascript step by step by clicking on the buttons on upper right corner.

      Like most of the debug tools. You could do mouse over to a perticular variable and you could validate from there and on the right panel. You could add or remove breakpoints and  watch the values of different variables. It is super useful for Javascript coders.

     Have fun and this is end of Instructions.Yay!!