Opera Dragonfly (alpha) Released

Over a year ago, I wrote about the Opera Developer Console. This morning (for me, at any rate), Opera posted Dragonfly, which (two years in the making) offers a completely fresh look at browser-based debugging.

It offers most of the familiar tools for DOM inspection (along with a nice DOM editing capability), error logging (with the same granularity as before wrapped in a more polished UI), a JavaScript debugger that rivals WebKit's Drosera, a JavaScript thread logger, and a lot more that I haven't explored yet.

Time will tell whether Dragonfly can get enough developers to use Opera and keep them there, and how much the developers behind the new developer tools listen to the community in the coming iterations, but so far this looks extremely promising.

Edit: Chris Mills from Opera gave me some additional info:

Part of the reason I haven't found the XMLHttpRequest logger/debugger apparently stems from it not getting exposed yet, though it will appear in an upcoming iteration, along with HTTP header inspection (not just for XMLHttpRequests, of course) and a new "single window mode" which sounds like it will make things much more usable! When using Safari's inspector, I almost always find myself attaching it to the window, and I always had the urge to do the same with Opera's developer console.

Chris also mentioned something which makes me very happy to hear: even though the Developer Tools (loaded via the Tools → Advanced → Developer Tools) download from Opera's server, it only does so the first time, and for each following update of the tools. This ensures that it not only saves Opera's servers when usage takes off, but it also ensures that developers can work offline, and the slow loading of the tools will only happen initially, loading from the local drive after installation.

Written in XML/CSS/JavaScript, Dragonfly will run in all browsers including Opera's Core-2.1 rendering engine (except Opera Mini for some reason), and even supports debugging on mobile devices by way of a proxy setup between the device and the desktop Dragonfly installation! This will prove invaluable for developers of web applications supporting devices, as they will have the ability to use their normal desktop tools to debug on the mobile browser without having to use emulation.

You can find more information in an Introduction to Opera Dragonfly and on the Opera Dragonfly product page (which has a very good start of fleshed-out documentation already, feedback and bugtracking, and of course a blog).

Edited to fix the Introduction to Opera Dragonfly link...

Opera Developer Console

It figures I would find this as I wrap up the initial draft of the chapter on client-side debugging, but it makes me extremely happy to see it: Opera has started work on a Developer Console, which (among many other things) logs XMLHttpRequest calls.

The Opera Developer Community runs through some of the DOM, JavaScript, and CSS tools, and the Opera Desktop team posted about it over a month ago when they initially started putting it into their development builds.

From what I can tell by peaking at the source (since, like most Opera extensions, they wrote it in JavaScript), it looks like they made a simple wrapper object and replaced the native object (after storing a backup reference for when logging gets shut off again) in order to create hooks into each of the events so it can report everything as it happens.

This means that I can now debug XMLHttpRequest usage in more than one browser, which makes life much easier than either guessing how it went or using a standalone traffic sniffer.

Edited two minutes later to add: you can get it from the Opera Developer Tools page.

CSS3

I know we still have quite a bit of lobbying and pestering to go before IE7 version X supports even CSS2 in its entirety. That said, the Opera team has continually updated their progress in support for CSS3. Several browsers, at this point, have adapted rudimentary versions of CSS3 columns support, as well as transparency, shadows, and background manipulation.

The latest post on Opera's CSS3 support has some very promising aspects to it, considering that functionality such as alternating table row styles, special formatting of empty elements, all off the of-type rules, and many more have the potential to reduce the workload of designers and developers by quite a bit. I know that I, for one, have emulated most of those mentioned using extra markup, scripting, or both throughout the last few years...

Inline Image Replacement (warning: hack alert)

In the process of designing the UI for indicating user's progress in a tabbed form, I realized I needed inline image replacement in order to accomplish exactly what I needed. The pure CSS solution works in Mozilla, Safari, and Opera, and should work in IE7 with some tweaking. IE6 will only work with JavaScript in place to convince it of what it should do.

The hack comes in, since I have only tried this with one set of transparent PNGs and this will probably take a fair amount of pounding on before it can stand up to wide usage. It also (for now) requires a solid background color.

Nevertheless, IIR. Suggestions actively encouraged... So far it works transparently (no pun intended) with screen readers, though the replaced text does go missing without the image there.