Debugging JavaScript
Firebug can also be used to debug JavaScript in a browser. You can place breakpoints and debug the code line by line. In addition to it you can also watch variables and DOM elements changing in real time.
How to do it...
To put breakpoints in your JavaScript code, open Firebug either by clicking the icon in the status bar or by pressing F12.
Then click on the Script button in the Firebug toolbar. This will show a list of all the available scripts for that page.
Select a script among these and that file will be displayed in the Firebug content panel.
After a file has been selected you can put breakpoints on a line by clicking just before the line number. A breakpoint is indicated by a dark brown colour circle.
Now you are ready for debugging. In the example seen in the next screenshot—the tic-tac-toe game—place a breakpoint on line 18. It will execute whenever a column of the game is clicked upon.
Click on a column and you will see that the execution has halted on that line.
Now you can watch the code execution line by line. To go to the next line press F10 on your keyboard. If you encounter a function, you can press F11 and control step into it.
You can also watch variables. In the right panel there is a line called New Watch Expression. You can write a variable name or an expression here and Firebug will evaluate its value.
Pressing F8 will continue the code execution till another breakpoint is encountered.
There's more...
Debugging in a nutshell
F8: Continue.
F10: Step Over. It takes control to next line.
F11: Step Into. If you press F11 on a line where a function is defined, control will go inside the defined function.
F12: Open or close Firebug on a web page.
Inspecting AJAX requests
The console of Firebug logs all the AJAX requests sent from the browser. It also shows the response code for each request. For each request, the parameters sent, request and response headers, and server response can be seen.
Web developer toolbar
The Web developer toolbar is another handy tool, through which you can control behaviour of various elements on the page. It also provides a large set of tools that operate on web pages.
You can disable or enable JavaScript, images, view page structure, form info, and so on. It can be obtained from https://addons.mozilla.org/firefox/addon/60.
