The Firebug Web development tool shows just how much worldwide influence you can have if you are smart, talented, and willing to work for free on an open source project. (It also helps to be at the right place at the right time.) The creation of Joe Hewitt, who began his work in early 2006, Firebug has gotten enough attention that the Yahoo Interface Group is funding a full-time developer for the project. At a Yahoo lecture, one developer in the audience told Hewitt that “you could sell this for $1000 and I’d send you a check.”
Writing in last January’s Dr. Dobb’s Journal, Hewitt described a decade of website development that has moved from simple HTML to a suite of technologies, including CSS, JavaScript and the DOM. “Then a couple of years ago, AJAX came along and every Web development tool on the market became obsolete overnight. Today you can no longer rely strictly on tools that were designed for the creation of static pages. This is where Firebug comes in.” Hewitt says that Firebug exists for two reasons: to show you what’s going on with your page when it loads, and how things change once the page has loaded.
Firebug is currently in version 1.
Firefox integration is Firebug’s signature virtue, placing the tools just a tab-click away so that you can examine the inner-workings of any page you happen to be looking at.
Hewitt points to the Dr. Dobbs article as best the synopsis of Firebug features?so in summarizing the toolset, I am borrowing freely from his description. Components include:
HTML inspector: A mouse-driven way to check out the HTML structure of any page?yours, or anyone else’s. In a page created with the AJAX suite, HTML views are refreshed to reflect updates from the server, with changes highlighted in yellow. A second strip of tabs in the HTML view give other options for inspecting the HTML structure, including a CSS view that helps make visible the otherwise opaque workings of this standard. (An API, not yet documented, allows developers to specify permanent tabs.)
CSS box model visualization: designed to help developers “view” the perplexing CSS box model, which specifies the size and placement of Web content. “The box model can be hard to pick up with the naked eye because of the transparency of margins and padding,” Hewitt writes. With Firebug, HTML elements are highlighted, with margin, border, padding, and content each shaded a different color. Firebug also assists with positioning elements. A Layout tab view displays a set of rulers that mark out the container, along with guidelines, tangent to the element’s container, that show where the edges intersect.
Inline and command line editing: The built-in inline editor can be used on virtually every Firebug object, with changes applied immediately. Firebug supports auto-complete in all modes: including CSS and DOM. The command line editor, found at the bottom of the Console tab, works similarly to those found in OS environments, but this one accepts JavaScript commands. Enter a command, and it is executed, with the results displayed on the live page. If the results include hyperlinks, a click will bring you to the HTML tab, where you’ll find the element selected. The command line editor also works in conjunction with an external, full-screen editor. Write a line of code there, and you can easily paste it into the command line and see how it affects the live page.
Network activity monitoring: This is the feature that put Firebug on the AJAX development map. The idea is that as chunks of data are fetched from the server via XMLHttpRequest, you can monitor the traffic and inspect the send/
Log debugging: Allows you to send messages from the page to the Firebug console, via a console.
Performance profiling: for eliminating performance bottlenecks. In addition to the usual method of recording the performance time for a given slice of code, Firebug includes a JavaScript profiler that reports on the performance of every function called during a given time interval.
From Netscape to Firefox to Firebug
Hewitt, who grew up in New Jersey, started taking on small programming jobs after high school and, in 2000, dropped out of college to work for Netscape as part of the browser development team. He arrived two years after the company had been acquired by AOL, and just Netscape was about to ship version 6. The new release had been long-delayed and would prove unpopular, but the underlying Mozilla code would find new life in Firefox. “Netscape was starting to rapidly decline right when I got there,” Hewitt recalls. “It was a great place to learn how not to do things. But I did work on some interesting products that ultimately led to Firefox.”
Hewitt joined his friends Blake Ross and Dave Hyatt in the early days of Firefox, which began as a lighter-weight fork off the Mozilla code. Meanwhile, Netscape was disbanded, and Hewitt moved on to AOL. “They bought Netscape and pretty much neglected it, and after a few years terminated everyone who worked there.” Some of Hewitt’s colleagues left for the Mozilla Foundation, but Hewitt stayed on until 2004, when he quit to start a new company with Ross called Parakey. The company is currently operating in stealth mode; a statement on Parakey’s spare website hints at a computer search product like Google Desktop.
I spoke with Hewitt by phone from his office in Los Gatos, California.
- Why did you decide to develop Firebug?
- Back in the late 1990s, before I worked at Netscape, I did a lot of Web content development. The tools back then worked well, enough?but once I got to Netscape and started working on the browser itself in languages like C++ and Python, I got used to more advanced software development environments. Last year, when I got back into content development, I really missed those tools. I started Firebug in January 2006 to try to recreate that kind of environment.
- You’
ve written that AJAX in changed the whole nature of what is required in a Web development environment. - Yes?because you are constantly talking to servers, grabbing data, and updating the page. There’s a lot going on, and you need to know what’s happening at all times. But when I started out, I just wanted an easy way to see the errors that I was getting on my page. Then I wanted to have a command line so I could type in JavaScript commands and manipulate a page, just as I had been doing for years in Python?which has an interactive command line. Once I got all that started, I had a place to add new tools to produce new kinds of information for the development process. I began adding these tools one by one.
- Is every line of code yours?
- Firebug 1.
0 is all my code. The first few versions came out in early 2006 and were much less than what is there now ? just a command line and an error console. Later on, I added an HTML view. What really made Firebug take off was AJAX network monitoring, which a lot of people really needed. This gets at the core idea of AJAX?that a small amount of data is fetched via a channel from the server, which is then used to update the page. Prior to Firebug, you had no visual tools to see what that data was. You had to manually put some extra code in to try to get the data out. It was very awkward. With Firebug, you can observe the progress of each request in XMLHttpRequest, as well request and inspect the sent/ received text. - What language did you use to design these tools?
- Firebug is written in JavaScript. It’s actually written using the same stack of tools that is used to build a Web page.
- Was the idea of making this a Firefox plug-in a no brainer, or were there other possibilities?
- The reason I made it a Firefox extension is that I was so familiar with the inner workings of Firefox. I had worked on it for so many years that this was the easiest way for me to go. If I wanted to appeal to the most people, I would have learned how to do Internet Explorer control development and made it a plug-in for Internet Explorer. But that’s not my expertise.
- And there were no tabs at that point on Internet Explorer.
- Yes. And why would I want to help Microsoft for free? [Hewitt did produce a “half-day” hack called Firebug Lite that simulates the Firebug console in non-FireFox browsers?but it is anything but a full port, which require considerably more work. “It’s open source,” Hewitt told the Yahoo developer group, with a grin. “I’m waiting.”
] - Did the tabs suggest to you a metaphor in the sense that each could be a view?
- Yes, although the first versions of Firebug were not like that; the tabs came later on. In the summer of 2006, I took a break from working on Firebug. When I came back to it, there was a lot of user feedback, which I used to create a long list of things to add. Of course, I had this dilemma?my main job was working on the Parakey project, but I said: “what the hell.” Firebug looks like such a polished product because for about two or three months, I put everything I had into it full time.
- What were you doing for money?
- Nothing. I wasn’t making any money. I was living off savings during the period I was working on Firebug.
- So the rewards were elsewhere?in contributing a piece of open source with a wide following?
- Yes. That’s priceless. I get this empty feeling when I think about working just to sell something. It’s not that I don’t think people shouldn’t pay for software, but that this is the way to reach a wider audience. I think that’s what drove a lot of people to open source ? you’re not getting any money but you’re definitely getting that gratification.
- Does it also look good on your resume?
- I’m trying to avoid having to work at corporate jobs, so I’m not too worried about my resume. A lot of the reason I put so much time into Firebug is that I knew that, eventually, somebody was going to make a tool like this. It was inevitable. So I wanted that “somebody” to be me?so that the tool would work the way I think they should work. Once a tool gets out there that is good enough, people adapt it and get used to it. And if something else comes out, even if it is arguably better, people still may not switch. So I figured I had that opportunity to get people hooked on a tool that was built my way.
- Has it worked out that way? Has Firebug ended competition before it began?
- Not quite, but Firebug has influenced the competition. Just yesterday Apple came out with an upgraded version of Web Inspector, which will be a part of the next version of Safari. They have added a lot of things that Firebug has, so they are catching up. I should add that they are also an open source project.
- There’
s speculation that this is part of Apple’ s way to get third-party apps on the iPhone. - That could be part of it, but you never really know what Apple’s corporate strategy is. I suspect that some developers on that team just wanted to do this.
- One of the big advantages of Firebug is the ability quickly move between multiple views of the project.
- That’s something that’s frustrating about a lot of other Web development tools. Even the one that Apple just released ? they don’t connect different views. Different Web developers focus on different aspects of the process and different layers of the stack. A lot of developers do nothing but CSS, so they are going to think they only want a tool that does CSS. Or maybe they only write in JavaScript. And as a result, too many tools are built to address just one specialized area. I’m one of the developers that works on the entire page, from floor to ceiling, so I want all the tools to show how all the pieces connect to each other.
- You also seem helping people visualize the end result?as with CSS.
- When I use that feature, it still makes me happy because for years, I would look at the page and try to guess why things looked the way they looked. Now it’s so much easier.
- But the big thing about Firebug is that it’s just there. That’s what people like about it. There have been other tools that do the things that Firebug does, but they are in a separate window. You have to dig for it, start it up, initialize it, and click a few things first. With Firebug, you hit one key and you have all this information right there.
- Was that the advantage of making it a plug-in in the first place?
- Yes. And even other plug-ins before Firebug were not quite as integrated into the browser. Sometimes you’re browsing someone else’s page and want to figure out how it works. With Firebug, the “cost” of doing that is very low.
- If you develop under Firebug, will you be compatible with Internet Explorer?
- If you know what you’re doing, it will be. Firebug doesn’t help you in any particular way regarding Internet Explorer?but you’ll be compatible to the extent that you are working on things the two browsers have in common. There’s about an 85 percent overlap.
- Are there any AJAX websites that you can point to where people say they couldn’
t have done this without Firebug? - People write me almost every day. I can tell you about larger companies, like Yahoo!, which has rolled out Firebug across their whole Web development effort. They’ve almost made it mandatory. They’ve invited me there to give talks about it. I’ve also heard from The New York Times and Google.
- Speaking of Google, you put the Firebug source code on Google Code. Why did you pick them?
- It came down to using Google Code or SourceForge, or host it myself. Running a server and maintaining it is a pain. I tried to do it for a while but I didn’t want to deal with it. Google code is free and easy, and their site is a lot simpler to use than SourceForge.
- The Yahoo User Interface group wants to hire a full-time engineer to work on Firebug. Have they found anyone?
- They are still looking [as of June 2007]. They’ve had a few candidates but it’s hard to find someone with the right qualifications. Maybe one of your readers.