I have been a big fan of Firebug for quite some time, but I have quickly fallen in love with the Opera alternative Dragonfly. The comprehensive set of Web development tools are finally out of beta and ready for prime time. This article provides an introduction and overview of the tool with a focus on specific features in future articles.

Let’s go to the Opera

I liked Opera, but I stopped using the browser when they started charging for it. That strategy was quickly dropped, and the free Opera browser currently sits at version 11.51 and is available for Windows, Mac, and Linux, as well as mobile and tablet platforms.

While it only commands a small percentage of the browser market, Opera offers a lightweight browser with a slick user interface. In addition to the developer toolset, it provides hardware acceleration, stacked tabs, and mouse gestures; it also works great on mobile platforms and claims the fastest JavaScript engine called Carakan. The latest version is now my preferred browser on both my Windows and Mac laptops.

What more do you need?

Opera Dragonfly is installed with the browser; it is available from the Tools | Advanced dropdown menu, a keyboard shortcut (on Windows, it’s [Ctrl][Shift][I]), or by right-clicking an element within a Web page and selecting Inspect Element from the popup menu.

Figure A

The Opera Dragonfly toolset is accessible via the Opera Tools dropdown menu. (Click the image to enlarge.)

A quick survey of Opera Dragonfly’s features makes you wonder what else a Web developer could possibly need to thoroughly develop, test, and debug Web applications. The following list provides a sampling of these features, which are accessible via the main toolbar in the Opera Dragonfly interface (Figure B).
Figure B

The Opera Dragonfly main toolbar provides access to the main features. (Click the image to enlarge.)

You see all of the features discussed below in Figure C.

  • DOM Inspector: The feature is available via the Documents panel in the toolbar. DOM Inspector displays the DOM tree for the current document as interpreted by the Opera browser. The Opera site has a great description of this feature, which they call “View Source on steroids.” The option’s Style Inspector feature, which is displayed in the lower right window, shows the corresponding style for an element selected in the left window (DOM Inspector).
  • JavaScript Debugger: The full-featured debugger is available via the Scripts panel. It provides access to JavaScript for the current Web page and allows you to control flow via breakpoints and so forth. The source code is displayed in the left portion of the window; the right side provides features such as breakpoints, state (watches, call stack, etc.) and allows you to easily search the code.
  • Network Inspector: The Network panel opens this feature, which is described as an HTTP dashboard. Network Inspector allows you to view and inspect all HTTP requests associated with the page, as well as a visualization of download times/duration for all resources used by the page; you can view all of this via the Network Log tab. A neat feature is the ability to send your own HTTP requests via the Make Request tab.
  • Resources Inspector: The Resources panel selection provides access to this feature. Resources Inspector displays all resource requests initiated by the Web page. It displays the host for the resource and full URI along with type and size. This can be used along with the Network Inspector to see the large resources and their associated download times, allowing you to pinpoint issues.
  • Storage Inspector: This feature provides an overview of the client-side storage utilized by the page. This includes cookies and HTML 5 Web storage.
  • Error Log: The Errors panel provides access to the Error Log, which is one of the more important features for working with your own Web applications. The panel header includes a number of the total number of errors returned. It displays the error and its source. You can configure the Error Log via Settings to not display certain CSS errors, and the Filter box can be used to refine the error list.
  • Console: The console allows you to evaluate JavaScript statements on the fly and inspect objects and properties.
  • Remote Debugging: This cool feature allows you to debug separate instances of Opera on the same or other computer, mobile devices, or a television. When used, Remote Debugging listens for connections to a specified IP address and port and connects and passes debugging information across the connection. It debugs remotely just like a local instance.

Figure C

The DOM Inspector opened for the TechRepublic home page. (Click the image to enlarge.)

This list just scratches the surface at what is included in the Opera Dragonfly toolset. Each feature has its own set of functionality. Opera Dragonfly is completely open source, and there is a lot of good documentation for the tools available online.

Feature overload

Opera Dragonfly seems to offer all of the tools necessary to properly debug and interact with Web applications. It follows the path blazed by Firebug and offers even more features, which is why Opera Dragonfly has become my preferred tool. In future posts, I’ll cover specific features of Opera Dragonfly in more detail. In the meantime, if you haven’t already, I encourage you to install Opera and try Dragonfly.

What Web development tools do you use everyday? What tools do you consider indispensable? Do you currently use Opera Dragonfly or Firebug? Share your thoughts and experiences with the community.