J.BradfordDillon

This month saw the release of Dragonfly, Opera’s own developer toolset for their super-standards-friendly browser. As soon as I found out about the tool, I downloaded and installed it. I’ve been a huge fan of Firebug for Firefox for over a year now, so I thought I’d try Opera’s feature. This lead me to try out Safari’s development suite. I’m always looking to enhance my toolset. So here’s what I found.

As with anything, my review is going to be somewhat subjective, based on how I use the Firebug and how the newcomers measure up to that. Here are the features I love about Firebug, in brief.

• Inspect: Simple feature. Click the button, then click on any element on the page to see the corresponding markup and styling in Firebug.
• Console: Quick look at Javascript errors and function calls. Also allows the user to enter a JS command for instant DOM manipulation.
• Element Highlighting: The opposite of the Inspect button, as you hover over elements in the markup, Firebug highlights the corresponding element on the page.
• Overridden Styles: Another simple feature I use a lot. Firebug strikes through overridden styles in the style inspector. That’s all. Handy, eh?
• Rule-Stylesheet Linking: In the style window, each rule tells you which stylesheet it is found in, as well as the line number.
• Live CSS Editing: This is by far the best feature of Firebug. Edit the CSS of any page in the style pane, and see the effects instantly.
• Quick Access: Firebug is accessible straight from the status bar, or by hitting F12.

Firebug Vs. Dragonfly

So, the first time I opened Dragonfly I was a bit confused. All of the panes were blank. Apparently the page I was looking at contained no code. No, you have to select which tab you want to inspect, and then reload that page from Dragonfly to see the code. That’s kind of annoying, and it brought to my attention a large difference between Firebug and Dragonfly. The Dragonfly window is meant to be a one-stop-shop for all the pages you have open in Opera, whether they be in separate tabs or different windows. Firebug, on the other hand, runs as separate instances, each attached to a different tab, or window. Neither of these two models is better than the other, it’s just a matter of preference, but it certainly changes the way you use the tools.

Once I had a page loaded up, I was thoroughly impressed with Dragonfly’s layout. The code-coloring is pleasing to the eye, and definitely superior to Firebug’s red/blue combo. The panes on the right are intuitive, and the tabs and view buttons are quickly learned and taken advantage of. I was able to find everything I needed in just a few minutes.

Here’s how it stacks up to my Firebug benchmark:

• Inspect: Yes.
• Console: Yes.
• Element Highlighting: Yes, though the element doesn’t STAY highlighted.
• Overridden Styles: Yes.
• Rule-Stylesheet Linking: Yes, but no line number.
• Live CSS Editing: Nope. Big disappointment.
• Quick Access: No, but I’m sure a shortcut exists or can be setup.

All in all, Dragonfly is extremely useful if you’re an Opera user. The lack of a Firebug-like plugin was exactly what was keeping me from using Opera in the day-to-day, but I don’t think Dragonfly is going to change my mind just yet. There are no particularly cool or useful features in Dragonfly that would make the time and energy of switching browsers and getting used to a new interface worth it. Useful, and a great step in the right direction, but not quite the bargaining chip they had hoped for, methinks.

Firebug Vs. Safari Develop

Safari Develop was, at first, difficult for me to find. It’s a menu that only shows up if you have checked a box in your Safari preferences. That checkbox is the last item on the last tab of the preferences window. Maybe I’m stupid, but I just didn’t find the thing the first time I looked for it a few weeks ago, and it wasn’t until the thought of this post hit me that I really started looking for it again.

Well, at first glance, Develop is nothing like Firebug or Dragonfly… But once you get into the meat of it, you find the common ground. If you open up Develop’s Web Inspector, you will find a similar interface to Firebug, but retouched with that fresh Leopard look and feel. The code highlighting is equally as good as Dragonfly’s on HTML pages, but it does not color CSS or Javascript, which is both odd and disappointing. It does show much more CSS information that Firebug, as it includes both the computed and the user agent styles alongside the stylesheet information on a particular element. The Web Inspector also sports a transfer rate report that shows you how long each file on the webpage took to load. Firebug has this feature, too, though I haven’t had reason to use it much.

Here’s how Safari Develop’s Web Inspector measures up to Firebug:

• Inspect: No.
• Console: Yes.
• Element Highlighting: Yes, though inverted. All elements except the one you have selected are darkened.
• Overridden Styles: Yes. Even more useful, it includes the user agent styles, so you can see the effects of your reset stylesheet, or lack thereof.
• Rule-Stylesheet Linking: Yes, but again, no line number.
• Live CSS Editing: Yes.
• Quick Access: Not as simple as Firebug’s single-click startup, but not bad.

But Safari’s Develop has a lot more to offer than the Web Inspector. That’s just the part that compares with Firebug and Dragonfly. Develop has a couple of other useful features, including the ability to switch user agents, and a quick option to open the current page in any browser you have installed (it even listed IE 5.2.3!). Develop also allows you to disable various pieces of the web: Javascript, CSS, Images, etc.

These extra features definitely give Safari’s Develop an edge over Firebug, but Firefox has other tricks up it’s sleeve that can accomplish the same things, like the Web Developer Toolbar or the User Agent Switcher plugins. It may not be fair to compare Firefox’s two or three plugins to what Safari accomplished in one embedded feature, I’ll admit to that. I only bring it up to show why I won’t be switching to Safari any time soon. It’s simple, it’s beautiful, and it’s definitely comparable, but it doesn’t give me the freedom Firefox does.

Summary

So yeah, that was a relatively lengthy and meandering adventure into the world of browser development plugins. Get a little lost? Fine, I’ll sum up. Opera’s Dragonfly is a great first stab at a web developer companion, but it’s still a few versions behind Firebug. Safari’s Develop menu comes a great deal closer to the mark, but is also missing a few things I use on a daily basis.

However, I will say, after looking at two different perspectives on the same problem, I can now see some of Firebug’s shortcomings. Code highlighting is a huge one. Perhaps a second look at the interface design is in order, as well. But those things are predominantly just window dressing.

To finalize, Firebug, perhaps accompanied by it’s cousin, the Web Developer Toolbar plugin, is still the king as far as I’m concerned.