Debugging javascript with firebug
Debugging is one of the major pain in the neck if you happen to be writing javascript/html/css. If you are writing jsp pages, you may need to redeploy your application each time you change your code. Firebug is an plugin available to firefox which helps you ease web based application development. I have tried to explain some of the features that i use in this blog.
Debugging Javascript
Similar to the way you debug java code in your netbeans IDE using breakpoints, you can apply breakpoints to your javascript code and check where the error in your javascript actually happens. You can also hover over each variable that you have in your javascript code to check the value of the variable. Similarly, you can also "go in" to functions or "go over" function calls similar to the way you do in your netbeans debugger. Also, note that the function call "stack" is displayed with the help of "<" marks. Clicking on one of them would take you to that particular function in that particular file and you can check the state of variables over there too.
Here is a snapshot of debugging javascript:
Great!!
Suppose if you want to see how much time the javascript files took to load. Here is how firebug shows it.
Note that you could also see how long it takes for a round trip ajax request/response to happen by clicking in the "XHR" tab above. The "All" tab shows the time taken to load all the elements in the web page. The example i showed above simply shows the time taken for the javascript files to load. If i were to click on the "images" tab, then the time taken for the images to be loaded would be shown.
Debugging HTML and CSS
Using firebug debugger, you can also debug html/css. You can change/add the value of the css or attributes of a particular html dom element and see how it looks like on the browser.
Here is a snapshot of how it looks like for me.
As you can see, with all these features, you should be able to get your web application up and running in your mozilla firefox browser pretty easily. Of course the biggest question mark i can see over here is.. what do i do if my code doesnt work in IE?


Posted by Srini on July 30, 2007 at 02:02 PM IST #
Posted by Venky on July 30, 2007 at 08:06 PM IST #
Posted by Raghavan alias Saravanan M on July 31, 2007 at 02:39 PM IST #