When Joe Hewitt was seven years old his father wanted to become a computer programmer so he bought an IBM PCjr. Joe would often watch his father typing in programs from PC Magazine. He started learning himself and when he got older he just sort of took off on his own.
The first programming project that he remembers working on was when he was in fifth grade (ten – eleven years old). He made an animated ASCII art of a rocket ship blasting off. He also wrote a game show in “Cartridge Basic” (an enhanced version of BASIC for the IBM PCjr).
As far as education goes, he started as a computer science major before deciding that he didn’t like the formal computer science stuff and switched to graphic design. He then realized that he was not an artist and moved back to computer science. Whilst he was still at college he received a ton of job offers in the field, dropped out of college and has been professional ever since.
Around 1999 he was working as a web developer and began to gain an interest in Mozilla. He followed the project mostly from the standpoint of a web developer wanting to see what this new browser was going to turn into. Eventually he learned about XUL, became fascinated with it and started looking for ways to get involved.
After a few years at Netscape Joe, Dave Hyatt, Chanial and Blake Ross started working on a streamlined version of the Mozilla browser that was called Phoenix, Firebird and eventually Firefox.
Because of the structure of Mozilla the developers were free to work on the things that were of interest to them. During his time there he created the DOM Inspector and worked for a few years on the browser side of things.
After his time with Mozilla he started work as a web developer again and soon found that the state of the art tools that he had used as a web developer in the late 90s had not changed. The standard way to debug a web application was using alert dialogs but this was very inefficient and limiting. Joe thought that maybe allowing people to log information to a simple panel could be useful. This is when the birth of modern web developer tools truly began.
Venkman contained a very powerful feature set that made for an excellent debugger. These included:
- Step over
- Step into
- Step out
- Save profile data
- Pretty print
- Save and restore breakpoints and watches
- Break on errors
- Ignore errors
- Break on exceptions
- Ignore exceptions
- Function name guessing
- Call stack
As this is just a quick tour of the extensions that have inspired Web Developer Tools we will not go into any more detail about Venkman here. If you would like to learn more about it then take a look at the Venkman page on MDC.
View Source Chart
This extension shows the browsers interpretation of a web page. It shows the source in a hierarchical view, grouping elements at the same level and graphically displaying HTML tag boundaries.
This was the inspiration for Firebug’s HTML panel … the comparison is clear when both tools are compared, especially in early Firebug versions. The formatting is fairly similar except that Firebug has a number of improvements such as expandable and collapsible HTML nodes, improved indentation and live editing. In its time, view rendered source was a very useful way to view the structure of an HTML page and is still preferred by some developers.
This extension was the inspiration for the error reporting in Firebug’s Console Panel.
Aardvark was another excellent extension and also the inspiration for Firebug’s Inspector. By moving the mouse over elements on the screen you could view simple DOM properties like tag name, class and id.
Sometimes the simplest ideas are the best and the concept of the inspector (highlighter) quickly became one of the core features of Firebug as it made it possible for people to select HTML elements as targets for each of Firebug’s panels.
Of particular note is its ability to load and manipulate JSON-encoded data sets, and MochiKit.DOM, a set of functions to easily create dynamic page components.
MochiKit forms the foundation of the client-side functionality of the TurboGears Python web-application stack. Perhaps as a result of the author’s involvement in the Python community, MochiKit exhibits many idioms familiar to Python programmers, and is commonly used in Python-based web applications.
Firebug Through the Ages
Although all of the applications we have discussed so far in this chapter were inspiration for some of Firebug’s features, this does not mean that they were simply merged together and Firebug was complete. Firebug, like most applications was very simple and has gradually evolved into the fantastic tool that it is now.
The first publicly available release of Firebug was version 0.2. Although this was the first released version of Firebug it contained some very useful features even though there was only a single panel. In this version of Firebug there is only one panel, which is roughly equivalent to the console panel. AJAX logging was present even in this version.
The printfire function was the standard way to output messages. Inspected elements were logged to the panel with four tabs on the right hand side. Clicking these tabs expanded the panel’s representation of the element, which consisted of:
- The XML tab shows the element in HTML view
- The CSS tab shows the elements CSS styles
- The Box tab shows the selected elements classic box model property values
Version 0.3 introduced major changes to the way that Firebug worked, particularly the way that the inspector worked. Firebug now had two main tabs, a console tab to display messages and an inspector tab that allowed you to view the element. There was also a new search box that allowed you to search for tabs in the HTML Tree. The Inspector tab had five other tabs:.
- Source: The HTML tree. This panel has been largely unchanged from this version onwards.
- Style: A few computed styles.
- Layout: Basic layout information.
- Events: Any events raised triggered on the currently selected element.
Version 0.4 was the first version to feature the Debugger tab (figure 18.104.22.168).
- Stack traces were now displayed along with error messages.
- console.log(‘message’), console.warn(‘message’), console.info(‘message’) etc. replaced printfire and were made available to all web pages.
- In the DOM tab arrays were now expandable and functions could be expanded to show their source.
After version 0.4.1 Joe realized that people were depending on Firebug for their jobs and decided to have one person work on it full time. Version 1.0 represented a complete redesign of the Firebug user interface from the ground up. A bunch of new features were also released with this version, Joe lists them as:
- CSS editing
- Network load timing
- Box model visualization
- Command line autocomplete
- HTML change highlighting
- Debugger watchlists
- DOM editing
- Separate window support
- Per-site blacklists
At this point Joe was spending a lot of time on Firebug and was considering making it a paid product ($15 - $25) so that he could employ a couple of full-time engineers. Needless to say, this was a final option and never happened.
Although there has been lots of work done on Firebug since version 1.0 most of it has been bugfixes and minor features. Some major changes have crept in though, including:
- Console tab: Break on all errors.
- HTML tab: Break on HTML mutation.
- DOM tab: Break on property change.
- Net tab: Break on XHR.
- Persist button on all tabs.
- Switch color types.
- Restartless install
- Tabs on the top
- Navigation history
- Break on next
- Cookie tab
- Command line popup
- Command line history
- New side panels (e.g. selectors)
- List of tabs in the toolbar
- Tab options
Joe Hewitt talks about these things in his blog post Firebug: A Love Story.