Debugging is the systematic method of removing defects. It all starts with execution of test cases. Whenever test cases are executed, the actual results are compared with expected results. If there is any lack of correspondence between the actual results and expected results, root cause analysis is done and additional tests such as regression tests are performed so as to ensure that the results are along the expected lines.
Let me now introduce you to the technical jargon. Here are a few insightful sentences on the components of Firebug debugger:
- List of breakpoints − All the breakpoints will be displayed in the panel. You can remove the unnecessary breakpoints.
- Watch Window − ‘Watch Window’ is a familiar word to all who are well versed with the nitty-gritty of Microsoft Visual Studio. However, comprehending the finer lines of difference that exist between the Watch Window of Firebug and that of Microsoft Visual Studio will do a world of good. Watch Window of Firebug will display all the values of available variables as a list. Woe-betide! Values of variables that are within the scope are only displayed. On the contrary, Watch Window of Microsoft Visual Studio will display the values of selected variables.
How to Install Firebug Add-on
- Open the Mozilla Firefox browser. At the top right hand corner of the window, you can find Open Menu
- Click Open Menu and click Add-ons. A new window appears.
- In the search box, type Firebug and press the Enter key of the keyboard.
- Firebug add-on appears. Click Install.
Firebug is now added to your Firefox browser.
- Set a static breakpoint on the desired line of code. On the right panel of the script tab, you can view the line of code to which the static breakpoint has been assigned.
- Execute the code line by line by using clicking “Step Over” button. This button is present on the Firebug toolbar. Apart from Step Over button, you can see three other buttons- Continue, Step Into and Step Out. To resume the execution of script once a breakpoint has been encountered, click Continue. As an alternative action, you can press F8 button. To step over a particular function call, click Step Over. As an alternative action, you can press F10 button. To step into the body of a particular function, click Step Into. As an alternative action, you can press F11 button. To resume the execution of script and stop at the next breakpoint, click Step Out.
- Have a careful look at the values that are being displayed on the Watch Window.
- Do the needful. Identify the bug and fix the bug.
- Reload the page. To do so, click Firefox’s reload button. As an alternative action, you can press the combination of keys- Ctrl+R.
- Values of most of the variables will be displayed on the Watch Window. However, values of one or two variables may be missing. In that case, prudent debuggers vouch for the efficiency of CommandLine API. To add a breakpoint on the first line of a particular function, use debug (fn). To remove a breakpoint that is present on the first line of a particular function, use undebug(fu).
- After fixing the bug, execute the code once again. If it has any bugs, debug the code by following the above 7 steps. Save the file and preview the same in Firefox.
Programmers can do away with their worst nightmare-bug fixing by banking on the efficiency of Firebug. With Firebug at your disposal, debugging becomes easy.
Published on 20-Jan-2020 12:44:23