Opera Dragonfly - Web developer tools

11 May 2008, 11:06

Hello guys!

Opera Software has finally released some serious Web developer tools: Dragonfly. Unlike their first attempt, the bookmarklets, which disappointed, this time around Dragonfly tries to make up for the time lost. Even if the developer tools should've come earlier, it's better we get them latter than never.

Firebug is currently the king of Web developer tools. It certainly is the best and most complete one I've used: good DOM Inspector, good debugger, good console and a nice API, all with a good looking GUI. The position of "king" is now challenged by Dragonfly which has some very important ideas.

Packaging and architecture

You can install Firebug as a Firefox extension. Firebug is practically a Web application with additional privileges, accessing more of the internal API of Firefox.

Dragonfly is similar, but it's not an extension for Opera. It comes as an external Web application for Opera - it's not native. Yet, like Firebug, it has access to the internal Scope API. The Scope API is a specification written and implemented by Opera 9.5 beta 2. As such, Dragonfly is not limited in purpose and possibilities.

Perhaps the most important part of this alpha release of Dragonfly is the Scope API specification which will be publicly available soon. People will be able to build their own set of developer tools for Opera and other UAs implementing the Scope API. You will be able to build integrated developer tools into your favorite editors and IDEs. Going even further, you can implement this into Firefox or other browsers. The possibilities are quite great: you can end-up debugging multiple instances of Opera's, or you can debug Opera with Firefox and vice-versa, etc. Once you have a Scope server in Opera and Firefox, as well as a Scope client for each browser, you can pick and choose at any moment the one you like more.

The Scope API and Dragonfly also work over the network. There you go: you can debug Opera Mobile 9.5 from your Opera desktop. You can also debug Opera instances running on your friend's computer, via Internet. If someone implements the Scope API for Firefox, you can debug Firefox from Opera over the Internet.

That's the smart move made by Opera: now Firebug needs to play the catch-up game. Firebug will have to implement this kind of functionality: we will need ways to debug Firefox running on mobiles, remote Gecko applications. We will also want integration from the IDE into a running Firefox instance. Unfortunately, I'm not sure if they will simply do it: or they will come up with yet-another protocol. That would kinda suck. If I am not mistaken some of the advanced IDEs today already provide JS debugging, but, as far as I know, they don't directly inspect a live instance of your browser.

Features

In Opera 9.5 beta 2 you can start Dragonfly from Tools > Advanced > Developer Tools. Opera then quickly loads Dragonfly and caches it. Subsequent loads are from the cache - for now there's a bug which prevents proper caching, but oh well it's alpha.

The entire Dragonfly Web application is very small given it's power and it loads really fast - they've optimized the code as much as possible. Probably they have further performance improvements coming. On my Athlon XP 1800+, Dragonfly doesn't feel slower than Firebug - which is very good.

You have the following tools to play with:

• Script viewer. You can view all the scripts with syntax highlighting. Firebug doesn't have syntax highlighting.
• Script debugger. You can set breakpoints and set into/over/out of each line of code. You can inspect the global scope and the local execution scope. At the moment, you don't have breakpoint condition, like Firebug does.
• Command line. You can execute any code you want in the global scope, and, while debugging, in the selected scope from the call stack. This is really useful in many cases.
• DOM Inspector. Here you can view the entire structure of your document as-is, live. You can inspect the properties of each node, the computed styles, the matched style rules from your CSS files, You can also get a nice "layout" view - based on the computed style.
• Style sheets. Obviously, you can view each of the style files in your document, as they are available via DOM 2 Styles. Unfortunately, just like Firebug, Dragonfly doesn't show your exact CSS file. Still, in Firebug you can see your CSS file if you choose to edit it.
• Console. This is supposed to be an improved console messages viewer in Dragonfly. Currently, it's still too simplistic for my taste.

Usage tip: Even if officially you can only use Dragonfly as an external window, you can use it inside Opera as well. Just start Dragonfly, enable the Windows panel, and then drag the Dragonfly window inside the main Opera window. You'll make Dragonfly usable as any ordinary tab. Go to Tools > Preferences > Advanced > Tabs > Additional options > there disable "Show close button on each tab" - to enable the MDI mode. Once you do this, you can drag and resize the Dragonfly tab inside Opera.

The bad, for now

Dragonfly is only the first alpha release - I even got Opera to crash once. The problems, sorted by importance:

• You can't edit anything: node attributes, properties, debug variables, style sheet properties, nothing. You are stuck. I can't complain: this is coming very soon in subsequent releases of Dragonfly.
• Search is quite buggy in Script view and it's especially unusable in the DOM inspector.
• We don't have any HTTP headers inspection tool, no way to play with the header requests, no XmlHttpRequest logger, no DOM Events monitor. These are promised to come soon, as well.
• No JavaScript performance profiler tool.
• No console object for use inside our Web applications.
• The command line does not yet implement automatic complete.

Given Firebug is a much more mature Web application, when compared to Dragonfly, I can't blame Opera. Most of the issues will be soon fixed. By then, Dragonfly will be better than the current version of Firebug.

Go ahead and try Opera 9.5 beta 2 and Dragonfly. Make sure you report all the bugs you find.

Published in: dragonfly, firebug, opera, reviews.

Opera 9.5 Kestrel alpha

4 September 2007, 11:13

Opera 9.5 Alpha 1 (code named Kestrel) has been released today.

For all web developers who haven't yet checked Kestrel, go ahead and do it. There are many improvements, and lots of new stuff.

I personally like the performance improvements - see some benchmarks done by NonTroppo.

One of the new features I am looking forward to use daily is history search. I had this in my wishlist for Opera 10. :)

Opera Mail has been improved very much, but lots of work is only under the hood - not many visible changes. Nonetheless, these are very interesting changes, since I use the Opera Mail client from Merlin. Anyone who uses Opera Mail long enough knows the famous freezes.

New features for web developers range from fixes to Web Forms 2 support, to new HTML 5-related work, new CSS 3 selectors and properties.

The completely revamped keyboard shortcuts will annoy many Opera users, but it's all for the better, in my opinion. New users who will try Kestrel, will like it more now, will find it more comfortable in general usage.

Check out the change logs, and backup your Opera profile - it's best you pick a separate installation folder.

Related to my site, the current Opera Kestrel build works quite well - dare I say better than Merlin. The Windows build has some issues with redrawing the menus, and with the generated content text color. Besides that, no access keys are recognized (try Shift-Esc).

I recommend you to try the site with Kestrel. You can play with the Web Forms 2 auto-complete in the search fields with no JavaScript enabled. Also, you'll see lots of fancy text shadows. If you have a slow computer, you'll notice Kestrel is much faster than Merlin when you use the search fields (with JavaScript enabled). The new ECMAScript engine is really faster. However, I still find hovering the menus slow on Kestrel. :(

Something less obvious to average users is the improved spatial navigation. There's something I am particularly impressed: try Shift+Arrow keys to navigate this web site. You'll immediately notice you can navigate the sub menus, which normally you cannot do (not in older Opera versions, nor in Firefox). Kestrel actually sends the mouse events to the elements, as if you use the mouse to hover the elements. This opens up a whole "new world" to those who use the keyboard very much. Say "bye bye" to the supposed inaccessibility of my site navigation (haha). :)

All in all, Kestrel is going to be a great release. I am looking forward to switch to the new version, when the stable one is released.

Published in: kestrel, opera, reviews.

Joost - first impressions

23 February 2007, 03:22

Yesterday I was able to test Joost - the interactive TV application, also known as The Venice Project. Someone from #joost invited me.

The project is still currently in beta-testing, and the offered content is somewhat limited for the moment.

I initially expected the application takes way too much bandwidth for my Internet connection to handle. This was because I read some article about it (I don't consider I have "a really fat pipe"). However, reading about Venice's Bandwidth Usage my fear was dismissed. I can download about 550 MB per hour (I have a 1.5 mbps connection).

The installation was quick and easy.

The application itself does not feature too much bling-bling as I expected.

The graphics are mostly made with SVG (Gecko-based application). I believe the design needs further improvements - more bling-bling and not only: it has to be more beautiful.

The application doesn't seem slow, but... I can't tell this for sure. I tested it on Intel Core 2 Duo E6700 - even slow applications are fast on this computer. :)

I am looking forward for the Linux version. This way I will be able to test Joost on a much slower computer: AMD Athlon XP 1800+.

Very quickly I had the following feature requests:

• Video controls for hue, saturation, brightness and contrast.
• For fancy people: video effects. It would be nice for us to be able to control the sharpness of the image. Image color invert would also be good.
• Video subtitles.
• Localisation: I want Joost in French.
• Audio equalizer.

Video quality is "good", but not "awesome" or "great". I think Joost should offer the ability of selecting the quality. Instead of downloading just 320 MB an hour, why not download 450 MB an hour? Allow us to select the quality, then most users will be happy. Those who have slower connections would be happy to see videos. Those who have "fat pipes" would be happy to see awesome video quality.

On my connection playback went smooth, without any hiccups.

For now, the available content is not "great" for me. This is perfectly acceptable, since it's still in beta-testing. A lot more content is promised to come. What I saw and I liked were a few National Geographic documentaries. :)

The fact Joost is a stand-alone application, not a web application, creates expectations (at least for me). I expect to see something jaw dropping. Joost is not jaw dropping, it's just nice and very promising. Being Gecko based, this application could have been done as a Firefox-only web application, with an installable extension.

What contributed to the succes of YouTube is also it's only a simple web site where you can quickly search and play what you want, when you want. For now, I could easily say "eh, I am not going to download Joost just to watch some advertising and some videos. I am not a TV addict!". Thus, Joost must offer something soo great that makes people download and install an application just to watch a video.

What I also like about YouTube: no advertising in the videos. All the advertising in the web page can be removed with simple URL filtering. If Joost will have too much advertising, users will be driven away.

Personally, I don't watch TV - on a regular basis - I don't like it due to tons of advertising. Sometimes, when I am bored, I like to watch whatever I find on YouTube.

I told some of the developers in the channel that the available content is what "makes or breaks" Joost. However, I think it's worth noting that even if you have the greatest content EVER, within a buggy, ugly, useless application, you'll quickly loose all the popularity. Gladly, as I see Joost for Windows is already past this technological burden. This is the simple reason why I consider Joost promising: they made a good application. Yes, Joost still needs improvements (the graphics and some features), but it's mostly OK.

What I did not like is that video seek has some problems. It didn't work properly for me...

I did suggest that Joost provides/includes all the content on YouTube and Brightcove - based on some deals. This would be a big boost to the application itself, users probably discovering YouTube via Joost, or simply liking to use Joost instead of the YouTube site. This is of course a rather "hard" deal, because Joost is practically a competitor to YouTube and Brightcove.

Currently I see YouTube as a site where one can find home made videos, amateur videos, a site for hosting videos made even by professional digital artists (seen some demo reels there) - generally it's all user content ("broadcast yourself"). Brightcove has videos by "the industry", music videos, and other commercial content. Joost focuses on TV-like content: 1-2 hours of documentaries, live concerts and movies. I would better like if Joost could unify all of them: provide us with TV content (full length movies), music videos and user contributed videos.

After all, maybe not allowing user content is what will make Joost successful.

That's about all for now.

Published in: joost, reviews, videos, youtube.