Without these tools, you might hate JavaScript a lot more

Firebug, the popular web development debugging tool, was inspired by these utilities that came before it

firebug-600x450_0.jpgImage credit: flickr/Eran Finkle
An actual firebug won't help you much with web development

JavaScript is everywhere these days, it seems. It’s certainly one of the most widely-used programming languages used today, if not the most widely-used one. It’s also, on the flip side, one of the most unpopular languages, partially because so many people have to work with it. One reason developers have cited for disliking JavaScript is the lack of debugging capabilities. 

At least, that was the case before Firebug came along in 2006. The popular Firefox extension is used by developers to debug HTML, CSS and JavaScript right in the browser when building web applications. It’s gone a long way to making JavaScript (and web) development a lot less painful than it was back in the day.

If you’re a web developer, odds are high that you know Firebug well. But do you much about its history? If not, then I suggest you read Mozilla developer Mike Ratcliffe’s recent write-up for the back-story on this important tool.

Firebug was created by Joe Hewitt, one of the original developers of the Firefox browser, in 2006. Ratcliffe points out that the following extensions and tools helped to inspire, sometimes quite directly, the different components that make up Firebug.

Venkman JavaScript Debugger - This JavaScript debugger for Mozilla-based browsers, created in 2001 (and, yes, named after Bill Murray’s character, Dr. Peter Venkman, in Ghostbusters) inspired Firebug’s own JavaScript debugger.

View Source Chart - Firebug’s HTML panel was based on this Firefox add-on for displaying underlying HTML in a hierarchical way, grouping tags nested at similar levels.

Console² - Console Squared, as it’s also known, was the inspiration for Firebug’s Console Panel. It shows errors filtered by type, language and context, including line numbers where errors occurred and linking directly to the offending line in the source code.

Aardvark - This Firefox extension led to one of the best features of Firebug: allowing developers to see underlying source code, and perform various actions (e.g., change CSS), by hovering over the elements of an HTML page. 

MochiKit JavaScript Interpreter - Firebug’s own JavaScript interpreter was inspired by this lightweight JavaScript library, which allows developers to run JavaScript commands on the fly, with access to the DOM.

Ratcliffe also provides a nice history of the Firebug extension over time. It’s a good read for any developer who depends on this tool to get through the coding day. Give it a look-see.

Read more of Phil Johnson's #Tech blog and follow the latest IT news at ITworld. Follow Phil on Twitter at @itwphiljohnson. 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