Tools we love: Firebug

Powerful, real-time web development and JavaScript debugging

Probably the most well known and powerful real-time web development tool out there, Firebug is something most programmers cannot live without.

Since Firebug is so ubiquitous, this is more of an ode to the software than it is an attempt at making people aware of it. It is the standard by which all other in browser development tools are measured. It is also the inspiration for the vast majority of native in browser development tools (Chrome Developer Tools for instance).


Firebug is a web development tool that lets you inspect the HTML, CSS, and Javascript on any web page. You can modify the source code, update the layout, and see your changes in real-time. It also helps you visualize CSS layouts with auto calculated measurements, box model shading, and rulers & guides. The impact of these capabilities is massive for web development. Debugging layout problems and CSS style issues can be done on the fly allowing you to rapidly correct issues largely by trial and error. If you break everything, no problem, just refresh the page to get the original source back. If you find the solutions, apply them to your source code and you’re all fixed up.


It’s also so much more.

Firebug is the best JavaScript debugger and analyzer you can get in a browser. Complex JavaScript applications are notoriously difficult to debug due to the client side nature of the language. Firebug gives you extensive Javascript capabilities to make your life easier. You can set breakpoints in scripts, inspect requests and responses, execute JavaScript code from the console, get detailed error information, and more.


Firebug is also a first rate network analyzer. Using the net tab, you can get metrics on every session your browser has initiated for a page. Graphs for load time, stats for request and response sizes, breakdowns for resource types, caching and header information, and more.


Firebug is extensible. If you want it to do something more, go ahead and add it on. There are a pile of extensions to help you even further with functionality like ColdFusion and Python debuggers, performance analyzers, remote file saving, and CSS updating.

Firebug is an open source extension for Firefox. The fact that it has remained a Firefox extension is the reason why so many developers stick to Firefox as their primary browser to this date. While Firebug Lite editions exist which support the other browsers, they pale in comparison to the real deal on Firefox.

Development tools built directly into the browser are getting better and better. Firefox, Safari, IE (kind of), and Chrome all have respectable tools built in. They still can’t hold a candle to Firebug on Firefox but it’s nice that they exist when you don’t have Firebug available.

Aside from Notepad++, a previous entry in the “Tools we love” series, Firebug is the most used web development tool I have. I don’t think a day has passed in the last 5 years where I haven’t opened it.

Read more of Matthew Mombrea's ByteStream blog and follow Matt on Twitter (@mombrea) and Google+. For the latest IT news, analysis and how-tos, follow ITworld on Twitter and Facebook.

ITWorld DealPost: The best in tech deals and discounts.
Shop Tech Products at Amazon