Firebug – Essential tool for Web Developers

August 4th, 2008 thiamteck Posted in Firefox, Web Development No Comments »

Firebug is a Firefox plugin that come with many handy tools for web development.

It is not just cover your debugging need for HTML, CSS, and Javascript. It even let you monitor the network activity.

For HTML, it come with a HTML viewer to view HTML source code, and DOM explorer for you to inspect the hierarchy of the HTML. Besides just viewing HTML, it also allowed user to edit the HTML and see the effect on Firefox on the spot!

Same go for CSS. You can view and edit CSS to see the effect on the spot. But sometime it is difficult to identify the right ection of CSS to edit. And that where the inspect mode become useful. (see image below)

For JavaScript, It came with an IDE style debugger where u can toggle break point on JavaScript to pause the execution and find out the internal status of the JavaScript. And you can even profile your JavaScript. (I not yet try out this feature so far :P)

And finally it come to one of my favourite feature, the network activities monitoring. When your page is loading slow, the network monitoring feature can help you to isolate the root cause by slowing you the breakdown of loading time of each element in your page.

Besides that, it also show you the HTTP parameters, headers of each HTTP Request you make. (This is not as accurate as packet sniffing tool, because it only monitor the Firefox traffic, which might be altered by firewall before send to the web server.)

Firebug is free, and open source. Just get it and try out yourself.

AddThis Social Bookmark Button