Debugging Javascript code using FireBug

During software development we normally use debug pointer to track the code and data flow. However for client side language such as javascript we cannot perform in the same IDE environment where we are writing code for our web project. But now days all advance browsers having plugins support we can debug the javascript code flow using FireBug. In this article we would learn how we can debug javascript code using Firebug. I assume that people already know about Firebug so i am not going into details on firebug.

What is FireBug?
FireBug is an add-ons for Firefox browsers. But all other major browser like Google Chrome, Safari and IE have their own version of FireBug coming inside them. Below is the list of tools available for other browser.

  • Google Chrome – Right Click on document and click on Inspect Element
  • Apple SafariWeb Inspector
  • Microsoft Internet Explorer – F12 Developer Tool

Debugging javascript code with FireBug:
Once you open the firebug tab in bottom of window we see the script tab. This tab is responsible to load all the javascript code that is getting loaded when your document is loaded in browser.

Once we open the script tab, we would see all the javascript code getting loaded as part of your document as shown below.

Select the appropriate javascript file you want to debug and load the file. After loading the file we can go through the javascript code we want to debug by placing the debug pointer.

Once we place the place the debug pointer we can see the code flow inside firebug.

Tagged . Bookmark the permalink.

Leave a Reply