Skip to main content

Debug JavaScript with Firebug

Firebug is a life saver tool for web developer. It provides the good platform to debug your webpage in different aspect like debugging of HTML , CSS, Javascript and your page request like AJAX request and the on page element like your external image or any media load time. If you would like to learn HTML and CSS debug go to my previous post on Debug HTML and CSS with Firebug. Here in this tutorial I will explain complete steps to debug JavaScript with firebug.

To debug your JavaScript with firebug you at least need Firefox web browser and the firebug add-on install in your firefox browser 🙂

Please open the URL of your web page where you want to debug your javascript. In my case I am opening http://localhost/magento as I am going to debug JavaScript of magento search auto complete. You can debug your own written javascript. I am taking it as example to show debugging of javascript. Once your page is open please open firebug by going to Tool -> Web Developer ->Firebug ->Open Firebug or press F12 button in your firefox browser. Once your firebug is open Please go to the script tab in your firebug. You can get following screen:
Javascript panel firefoxIf your Script Panel is disable please enable it by following the instruction provided in above snapshot. After enabling the script panel do not forget to reload your page. After enabling and reloading your page. If you are getting following screen, you are all set to go with debugging
Firebug Good for Javascript DebuggingNow you are all set to go for for debugging the JavaScript using firebug. Further to continue with your debugging lession I will demonstrate the following point.Adding breakpoint in the javascript

  1. Adding breakpoints in the JavaScript
  2. Moving line by line in JavaScript and going into the function
  3. Inspecting JavaScript variable/object value on run time
  4. Evaluating the JavaScript code on run time by “Watch New expression feature”

Adding Breakpoints in JavaScript to Debug

The primary step of debugging your JavaScript is to adding breakpoints where you can halt your execution. You can add breakpoint in firebug by double clicking in front of any line of JavaScript. After adding breakpoint your javascript execution will be paused at that point and you can either go through line by line or jump to another breakpoint or enter into user defined function called by your script line. Following is the step by step snapshot of moving through the breakpoint.

I am going to debug auto complete of my magento page.

Step 1:- Opening firebug script panel and finding the code from where we want to start debugging or we need to add breakpoint.|
Breakpoint in FirebugStep 2:-  Now execution will be break or paused on the breakpoint. In my case the javascript will be executed when page will be loaded. So I am going to refresh the page after adding the breakpoint. in your case may be possible that execution will occur on certain event like clicking the button or hovering mouse on certain block. So it is not necessary to reload the page in every case. Once execution come to your breakpoints firebug will display the following window:
Breakpoint optionHope now you can add breakpoint and move in the JavaScript.

Moving line by line in JavaScript and going into the function to debug in firebug

As per the above image you can move line by line in the JavaScript  by clicking the button marked in the above image in the firebug. But clicking  button through the mouse is bit difficult while debugging. So you will prefer keyboard shortcut. You can use the following shortcut:

  • F8 : To go on next breakpoint in the javascipt
  • F11: Step Into the function execution.
  • F10: Go to next line of the code.
  • SHIFT + F11 : To ignore all further breakpoint

Inspecting JavaScript variable/object value on run time in Firebug

You can easily inspect the value of the variable on the current state in firebug. While debugging your JavaScript you can inspect the value of the variable or object by following step:

  1. Select the variable.
  2. Right Click on the selected variable and select Add Watch option.
  3. Now on right side in the firebug go to watch panel and you can see the variable has been added.
  4. Click on the plush + button and you can see the variable value on run time. Following is the snapshot.

Inspect javascript variableYou can also quickly inspect the value JavaScript variable by hovering mouse on the variable.

Evaluating the JavaScript code on run time by “Watch New expression feature”

You can also quickly execute JavaScript expression in the firebug and get the output. It can be seen by using firebug Watch New expression feature. You can do this either while you are debugging your JavaScript or any time by opening firebug. Click on the watch new expression(light yellow highlighted area in watch tab) and write your JavaScript expression.

Thank you for reading my post.
Happy Debugging.

Support Me by Sharing This Article

Ankur Kumar Singh

I am a PHP programmer having some knowledge about Linux. I am always interested in web development and knowledge sharing. I am full time tech evangelist part time human being. :-)

Leave a comment/Ask Question

2 thoughts on “Debug JavaScript with Firebug

  1. Good article to show a value javascript on firebug. Could you please provide some firebug debugging for executing variable in javascript

  2. Thank author providing us this great article. It helped me a lot. The content is very clear and concise, which is easy to understand. Would you write something about how to use firePHP if possible?
    Thanks a lot