Javascript: Power tools of Firebug for developers and designers

Every developer now adays use Firebug to tackle the Javascript, which is obviously one of the most powerful innovation in the domain of Web. However, most people don’t know the correct use of this amazing addon of Firefox.

Let’s quickly get to the business, I will let  you know the most useful power tools of Firebug.

Ever you get caught using too many alert messages, eventually I was using this to see the outputs, inserting an


on nearly everyline while debugging to see if my variables are passing fine. In that case, if I have a loop of 100 times and some values is going wrong in it, I would have to hit my enter button for 100 times to get rid of that alert box while trying to debug the code. Don’t do it, if you have Firebug installed, use


and it will nicely print the debug output in Firebug console. No more buggy alert boxes.

Ever wondered how many times your javascript function is getting called, feeling the need to go and declare a global scope variable and then increment it and then print its value to see? Don’t do this if you have Firebug, instead use


at the line of code you want to see the execution count and your Firebug console will let you know how many times this line of code was executed. Handy, eh?

Command Line functions
Those of you who are not familiar with command line of Firebug would say, what? well same was my reaction, however, I found it and it is really very useful. You can inspect a visual object on your page through the use of that little inspect arrow on the top left corner of your Firebug console, however, for example you cant see that element visually and still you want to see it, check bottom right side of your Firebug console, you will see a red square over there, open that and that is your Firebug command line console, type


replace id with the id of the element you want to inspect and it will show you that element in your console. In my case, I wrote this command


and output in the console was

<input id="bew" type="hidden" value="BEEPJScript>
Happy debugging!

Leave a Comment

NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Get Adobe Flash player