Firebug has become an indispensable tool for doing front-end development of web applications. However, most developers are unaware of some very useful features of this tool, especially when it comes to debugging JavaScript code. I've personally seen many of my colleagues relying on alert() function to reveal the flow of execution of their complex codes. In this article we'll look into some ways that Firebug can help you debug JavaScript and boost your productivity.
Breakpoints
Setting a breakpoint on a line enables you to pause/resume execution of code at your will. When you put a breakpoint on a line, say line 10, the program pauses execution when it reaches line 10. Let's see how we can do that:
Turn Firebug on and enable Console and Script views. Then visit ajaxify.com. In the Script view, choose firebug.js from the dropdown menu at the top left corner. On the sub-view at the right click on Breakpoints pane. On the left margin of Script view, you will see the line numbers appear. Now click on line 10, it will be marked by a red circle. This red circle is the breakpoint, the Breakpoint sub-view will list you have set.
Now refresh and hit the Change the Message! ...
