RT @zdnetasia: Gartner: Mobile CRM gives better ROI than social. http://t.co/nTgj44H8
29 minutes ago by Oystor_Tweets on twitter
Breaking News: Yahoo announces Alibaba stake sale
ZDNet / Techguide / Web Development
Debug and interact with Web apps via Opera Dragonfly
Summary
Tony Patton provides an overview of Opera Dragonfly’s features and explains why it replaced Firebug as his Web development tool of choice.
Topics
technology, software engineering, software development, software, science and technology, computer technology, dom inspector, javascript, programming languages, internet
Events
IBM Technology Conference & Expo 2012
May 22, 2012
One World Hotel, First Avenue, Bandar Utama City Centre, 47800 Petaling Jaya, Selangor
Echelon 2012
June 11 and 12, 2012
University Cultural Centre, National University of Singapore
Startup Asia Jakarta 2012
June 7 and 8, 2012
12th Floor, Annex Building, Wisma Nusantara Complex, Jl. M.H. Thamrin No. 59 Jakarta 10350, Indonesia
MMA Forum Singapore
April 23-25, 2012
Grand Hyatt Singapore
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.
Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a production environment on a daily basis.
Resource Centre Useful content from our premier sponsors
Web Development TechGuides
Creating a liquid layout for an Agile Platform theme
Working with Visual Studio 2010 from command line
Key to making applications discoverable
Easily connect to RavenDB data via C#
Use qTrace to replicate errors for QA testing
Tips on making sure your apps work for mobile users
RavenDB, a database alternative for .NET developers
Importing existing database schemas as Agile Platform entities
5 persistent Web application myths
Improve page performance with Microsoft Ajax Minifier
ZDNet Asia Live
China hits back at Pentagon report on spy claims. http://t.co/CccR4SBM
29 minutes ago by zdnetasia on twitter
China hits back at Pentagon report on spy claims http://t.co/YP380BYQ http://t.co/erFX4aVv #arcavir
29 minutes ago by V_RaV on twitter
http://t.co/VNaZtseV China hits back at Pentagon report on spy claims: Annual report by Pent... http://t.co/TvgCi5RE http://t.co/wiqY9ktt
29 minutes ago by RavtachSolution on twitter
#AntiVirus News: Mac users' indifference toward security 'worrying' http://t.co/spWS0CpU #AdAware
29 minutes ago by AdAwareFree on twitter
Mac users' indifference toward security 'worrying' http://t.co/BtVn1BAk
> expected! They still remember Mac vs PC ads
#infosec #news #apple
Pentagon report says China exploit US tech, conduct cyberespionage, China says it has been "unjustly criticized" http://t.co/P5wgqy6I #in
44 minutes ago by EllyZDNetAsia on twitter
Mac users' indifference toward security 'worrying': 59 Jakarta 10350, Indonesia In light of the recent spate of ... http://t.co/Lxgnc1wM
59 minutes ago by GoodCodeBadCode on twitter
Pakistan lifts block on Twitter - ZDNet Asia: Pakistan lifts block on TwitterZDNet Asia59 Jakarta 10350, Indones... http://t.co/61n85ajh
1 hour ago by semarang_photo on twitter
Pakistan lifts block on Twitter http://t.co/WHqoJOqm http://t.co/erFX4aVv #arcavir
1 hour ago by V_RaV on twitter
http://t.co/VNaZtseV Pakistan lifts block on Twitter: Country restores access after briefly ... http://t.co/5gqegFWK http://t.co/wiqY9ktt
1 hour ago by RavtachSolution on twitter
Mac users' indifference toward security 'worrying'. http://t.co/i7gZ8WVn
1 hour ago by zdnetasia on twitter
Mac users' indifference toward security 'worrying' - ZDNet Asia: Mac users' indifference toward security 'worryi... http://t.co/CD9pvW08
1 hour ago by win7antivirus on twitter
RT @zdnetasia: Mac users' indifference toward security 'worrying'. http://t.co/i7gZ8WVn
1 hour ago by t_phuck on twitterI reckon your view: "CRM is strategy, not software", if a company replicating the approach uses in ERP implementation into CRM, what they...
3 hours ago by wykoong on Gartner: Mobile CRM gives better ROI than socialThis video will teach you about the Excel fill handle but also provide you with a workook to download... http://www.youtube.com/watch?v=...
20 hours ago by TradeBrother on A quick fill handle trick for Microsoft Excelwaiting...
2 days ago by eapete on What should count in a company's market value?Boy, you've opened a can of worms now.
Wait for the rants & raves.
I was puzzling before this whether to replicate the success formula we executed for a financial institute, and come out with a standard s...
3 days ago by wykoong on Drop the egos, copy ideas, then innovateKeep up with ZDNet Asia
Facebook 
RSS Feeds 
Newsletters 
Twitter Whitepapers
Downloads
Web Development News
Inside ZDNet Asia
Sponsored
Echelon 2012 - The Awesomer Tech Event in Asia
Echelon 2012 – SEA’s longest running tech startup event goes Awesomer. Catch 50 of Asia’s most promising startups & over 40 international speakers on June 11-12.
Startup Asia Jakarta showcases new product-ready tech startups. Plus: hackathon, exhibition, and speakers. Use promo code CBSi50 for 50% discount.
ZDNet Asia Intelligent Singapore video series
Featuring inteviews with CXOs who define "intelligence" in their markets and reveal how their companies drive business efficiencies through ICT.
