For web developers, and especially front-end coders, the Firefox extension Firebug by Facebook’s Joe Hewitt is a killer app and major time saver. It lets you deconstruct the webpage currently loaded into Firefox to get a better idea of how HTML, CSS, and JavaScript needs to be modified to work properly (and it can even make changes to CSS on the fly).
Opera has just released a competing set of developer tools called Dragonfly. They will be automatically included in Opera 9.5 beta 2 and newer versions of the browser, and you will be able to enable them by going to “Tools > Advanced > Developer Tools”.
The Norwegian software maker is highlighting several innovative features of Dragonfly that could give it a leg up on Firebug, all depending on how well they work.
Dragonfly will make it possible to debug webpages whether they’re on your desktop computer or any remote device, like a cellphone, that runs the Opera browser. This has the potential to make development for mobile devices much easier.
To JavaScript programmers’ delight, Dragonfly will also show the most up-to-date document object model (DOM) of a page, not just its initial construction. This means the effects of dynamic changes to a webpage, whether Ajax-driven or not, will now be much more transparent and traceable.
Dragonfly is also said to have a sophisticated JavaScript debugger that lets you diagnose errors on a line-by-line basis. JavaScript notoriously lacks any real debugging capabilities so this feature holds a lot of promise for developers tired of inserting alert functions throughout their code to see where it breaks.
A couple downsides: it will only be available for Opera, certainly not one of the most widespread browsers, and it won’t initially support in-browser edits to CSS styles. This latter shortcoming is a big one since CSS editing constitutes perhaps the most useful feature of Firebug.
Dragonfly will be released as open source under the BSD license. Microsoft announced at MIX that it has also worked on a set of developer tools for Internet Explorer 8, still in early beta.
See all
Post
Looks like someone at Opera is asleep at the wheel; the Dragonfly link still goes to a landing page even though the countdown has finished.
Yay, finally something that competes–hopefully no memory leaks =(
I think they put the cart before the horse on this one. Users need a reason to USE Opera first, THEN developers need tools for Opera. As long as there are no major problems with a page in Opera, developers tend to be satisfied that it works and move on.
Landing page gone, Dragonfly site up now.
You make it seem like FireBug lacks up-to-date DOM and JavaScript debugging support, both of which exist in FireBug.
@John S - good point, I didn’t mean to suggest that Firebug didn’t have these. I think Dragonfly’s challenge to Firebug will depend on how well they work.
“A couple downsides: it will only be available for Opera”
This is not the case you need to edit your post.
Dragonfly can be ported to other browsers,but it requires some scope module or API,This APi is going to be released soon as well.
It says CSS editing is coming,its alpha build what do u expect,Firebug wasn’t like it is today when it got out on its first day.
@Chris
I dont think its a cart before the horse situation. A lot of web developers use firefox because of the extension support. Something like dragonfly could attract a lot of web developers to start using Opera, and this might create a new set of users for opera.
Moreover users like web developers tend to be very staunch about their likings towards things like browsers, which potentially gives opera free word of mouth marketing.
@Dooomkultus - Right now and for the foreseeable future it will only be available for Opera. Just because it *can* be ported doesn’t mean it has or will be.
Fair enough,but the post gives out the tone that it doesnt and never will.
Opera wouldn’t post such information on their dragonfly page otherwise.
You should have atleast mentioned this,rather than saying it might never do that.Anyways,i don’t mind it ,just mentioning it, thats it.
I use Firebug all the time, it is an amazing tool. Just have to remember to disable it when I’m done with it, otherwise FF explodes
Good to hear Opera is trying to cater to developers. I like Opera but without support for extensions I can’t use it as my main browser.
Only Firebug…
I’d love to see something like this for mobile websites
Good to see more advanced debug/inspector tools for Opera, it’s something that’s been needed for some time. (Safari’s “Web Inspector” is also a step in the right direction as well.) Firebug is an awesome tool which makes my job a lot easier, so it’s nice to see comparable stuff coming out for other browsers.
Soon IE will release only fly, because IE will soon no body use it and they need to prepare a fly hitter by now on.
It should be pointed out that Safari 3.1 now comes with a similar tool. If you go into the Safari Preferences -> Advanced and then check off the “Show Develop Menu in menu bar” you’ll have access to the new and improved Web Inspector and Network Timeline, among other things.
The Web Inspector lacks some features that Firebug has, but it also has some impressive features of its own. Worth a look.
Very surprised to see geek stuff covered like this
BTW a very interesting video about this is here:
video.yahoo.com/watch/1040890
more great stuff
developer.yahoo.com/yui/theater/
while your covering geeky stuff, check out YC startup now in full swing Virtualmin offering the only free version of a control panel for hosting.
wow! Just for the sake of dragonfly, I will install opera
. Actually , firebug just works great even with flock, and thats pretty much enough to develop even completely ajax / js driven stuff like opensocial apps. Thanks for sharing Mark.
Firebug is the only thing keeping me with Firefox . Opera here we come!
Damn html stripping removed my humor - let me try that again.
Firebug *crash* is *crash* the *crash* *crash* only thing *crash* keep*crash*ing me with *crash* firefox. Opera here we come!
One major issue…Who uses Opera?
Opera has turned out to be a good browser, the only downside is it
cant’ select words from the address bar when you double click it.
And a javascript debugger is always welcomed. Saves a ton of times.
Firebug, Web Dev. toolbar and iMacros are the extensions that keep me with Firefox. And until Opera includes real extension support, i am sure there will be no iMacros for Opera
@Puneet People aren’t going to start using Opera just because developers have tools for it. The browser needs to find a segment of users to appeal to first then worry about getting development tools to developers.
It’s like Songbird… they made a browser for people to find music and download it. That’s called meeting a need. There’s nothing special about Opera that compells a real user to start using it. By real user I mean, non-technical person that uses the internet.
I’m not saying it isn’t fine and dandy to have a way to test and make CSS changes within any browser. That’s great.
It’s alpha, but for now, it doesn’t look like anything special compared to Firebug, even if you consider the things that are planned.
Firebug is open source, Firebug has the features Dragonfly has, Firebug has a JavaScript-console for other browsers, etc.
It’s nice to see Opera catching up on this one, but what’s clearly visible is the advantage of Firefox’ extension-system - no matter how good Opera’s default distribution is. If Firefox was a closed system, Joe Hewitt wouldn’t have developed Firebug (because it wouldn’t have been possible) and neither Microsoft nor Opera would have played catch-up.
This would have been worth mentioning in the article.
nice article thx
>but what’s clearly visible is the advantage of Firefox’ extension-system
Exactly!
As the marine in the Starcraft 2 trailer:
IT’S ABOUT TIME
@Markus
It is also their main reason for multiple crashes. So two thumbs up - half thumb down
opera works well on a mac, but many sites suck on it in xp on a pc
firefox is still under 30% of the market (firebug is a godsend though)
So IE still rules the browser world @aLien. Their stranglehold is diminishing, but slowly. Many consumer facing customers still have 80-90% users on IE (some still on netscape even!).
Does anyone else having issues with scrollbar (when chosing tabs)? It doesn’t work, can’t scroll. When I try, it comes back to top.
@Andy
I guess it really depends on the extensions. I agree that there should be a better quality control.
But the extension system itself is very reliable. We run automated performance tests in Firefox with the iMacros extension. So iMacros is the only extension installed. This setup runs without crashes for months
nice post. mozilla is the best.
@alien - Never comment again.
Opera is a fast, safe, lightweight and innovative browser. It’s not as functional as Firefox, with all its extensions, but still it is a great browser. A new feature like Dragonfly could be good for the browser and for the Internet.
Finally the landing page has disappeared and the site is up
The more developer tools for browsers the better. I have to check my sites across all of them so the more they can help me out, the happier I will be. Since Opera and Firefox generally get things right, there is very little need to spend much time in Opera.
IE on the other hand is a time sink bt atleast there is the IE DOM Explorer toolbar -> http://www.microsoft.com/downl.....laylang=en
Firebug sets the standard.
Dragonfly will be a good tool even if you don’t use Opera regularly, and it’s useful for testing pages regardless of the browsers market share.
Opera has had the ability to edit html and css on the fly for a long time so I’m sure this will be enabled in Dragonfly before release.
I miss the closeness to the webpage you get with Firebug, on the other hand it was nicer to debug multiple sites at the same time with Dragonfly.
The javascript debugger looks ace, and remote debugging will be a killer feature for handheld devices where some statistics suggest a 50% market share to Opera.
All in all great and on time; I’m sure many devs will split their time between Firebug and Dragonfly hereafter.
@Chris
Looks like you are missing the point.
Devtools make it easier to support Opera, which makes more sites work with it, which makes for fewer problems for users, which leads to more users.
Site problems is probably the main thing keeping Opera back.
The article should mention much more prominently that the current release is an alpha version; the lack of CSS editing in an alpha version is more understandable that way.
It is not ‘Site Problems’ holding Opera back, it’s sloppy developers!
Nice post
Thank you for the info
Having tried both, I prefer Dragonfly, it’s got a hell of a lot of potential, and it’s intial beta release almost completely eclipses what Firebug does.