Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Debugging JavaScript using Firebug
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.
To design static web pages, HTML is widely used. To develop dynamic web-based applications, JavaScript, the scripting language of the web should be used. To make their code bug-free, programmers rely on numerous debugging techniques. It is a great way to keep errors and exceptions at bay. However, JavaScript is not armed with excellent debugging functionalities. Fortunately, debugging the lines of code written in JavaScript by using Firebug, the web browser-based debugger, is easy.
Let me now introduce you to the technical jargon. Here are a few insightful sentences on the components of Firebug debugger:
- JSEditor − JSEditor is nothing but JavaScript Editor. To all intents and purposes, JSEditor allows you to debug JavaScript code by using “Break on All Errors.” What all a user has to do is to check this option to pause script execution.
- Script tab − Console is the first tab present on the pane of Firebug debugger. HTML and CSS are the second and third tabs present on the pane. Script tab is the fourth one. The script panel is divided into two sub-panels-the panel of the left is JavaScript editor. The panel on the right encompasses two sub-panels- Watch and Breakpoint.
- JSFileSelector − JSFileSelector displays the list of all JavaScript files that come under the purview of your page.
- Breakpoint − JavaScript execution will stop at breakpoints. It can be said in all fairness that there are three kinds of breakpoints in Firebug- Static, Conditional and Dynamic. To set static breakpoints, click the desired line of code in the Script panel. As the name suggests, conditional breakpoints should be set based on a condition. To set breakpoints based on function names, you can bank on dynamic breakpoints. There is something endearing to dynamic breakpoints- They can be set from commandline. In addition, they can be set by using two popularly used functions- debug and undebug.
- 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.
How to Debug Javascript Code using FireBug
Here, are a simple 8 step procedure that lets you to debug JavaScript code in Firefox by using FireBug:
- Write your JavaScript code in a notepad file. Save it with .htm extension. Open this .htm file in Firefox browser. With no second thought, launch the console of Firebug debugger.
- 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.
320 Views
