{"id":427,"date":"2011-03-17T22:52:09","date_gmt":"2011-03-17T21:52:09","guid":{"rendered":"http:\/\/trigonakis.com\/blog\/?p=427"},"modified":"2011-03-18T16:53:46","modified_gmt":"2011-03-18T15:53:46","slug":"opera-dragonfly-operas-web-development-tool","status":"publish","type":"post","link":"http:\/\/trigonakis.com\/blog\/2011\/03\/17\/opera-dragonfly-operas-web-development-tool\/","title":{"rendered":"Opera Dragonfly : Opera’s Web Development Tool"},"content":{"rendered":"

Some time ago Opera Software announced that they would open-source<\/strong> their web development tool, called Dragonly<\/i>. On the 14th of March Opera Software announced<\/a> the first beta version of Dragonly after it became open-source. This release came few days before the Opera 11.10 Beta Browser release. Dragonfly is a Firebug-like tool that aims to aid the web developer and designer on the development and debugging process.<\/p>\n

Technologies<\/h3>\n

Dragonly provides support for the latest web technologies, such as HTML5 APIs<\/code> and SVG<\/code> files. I will present you the Dragonfly capabilities later on the screenshot tour.<\/p>\n

Installation<\/h3>\n

Opera comes with Dragonly pre-installed. In order to use the beta version do the following:<\/p>\n

    \n
  1. In the Opera’s address bar type opera:config#DeveloperTools|DeveloperToolsURL<\/code>, or else type opera:config<\/code> and search for the keyword “develop<\/i>“.<\/li>\n
  2. Replace the “Developer Tools URL<\/i>” with https:\/\/dragonfly.opera.com\/app\/cutting-edge\/<\/code> (it was https:\/\/dragonfly.opera.com\/app\/<\/code>).<\/li>\n
  3. Use Ctrl+Shift+I<\/code> to start Dragonfly. You can alternatively started by right click -> Inspect Element<\/code> on a page.\n<\/li>\n<\/ol>\n

    Screenshot Tour<\/h3>\n

    <\/p>\n

    Documents Tab<\/h4>\n

    On an item, press right click -> Inspect Element<\/code> and the Dragonly will open, focused on this element.
    \n    \"\"<\/a>
    \n    \"\"<\/a>
    \nYou can see and change the HTML (DOM) Tree and the CSS properties on the left. On the bottom, there is a tab that show the whole “parent structure” of the selected element. Unfortunately, Dragonfly does not provide auto-completion for the CSS properties, as Firebug does.
    \n    \"\"<\/a><\/p>\n

    Scripts Tab<\/h4>\n

    You can see the Javascript code, place breakpoints, and generally debug your code. The console provides you the ability to write and test Javascript code. It supports auto-completion and completion-suggestion. A usefull shortcut: with Dragonfly open, you can show\/hide the Javascript console by pressing the Esc<\/code> key.
    \n    \"\"<\/a><\/p>\n

    Network Tab<\/h4>\n

    The network tab gives you the ability to see how the load time of a page is “broken” into different elements. This can be very useful to discover some elements that take a lot of time when loading. The “Make request” tab of Network, allow you to send a “custom” HTTP request<\/code> to a URL and can be very useful for debugging services (for example, that will be fetched through AJAX<\/code>).
    \n    \"\"<\/a><\/p>\n

    Resources Tab<\/h4>\n

    The Resources tab shows you the different elements that the site consists of.
    \n    \"\"<\/a><\/p>\n

    Storage Tab<\/h4>\n

    The Storage tab provide you the information for any kind of storage that a site can keep at your browser (cookies, sessions, HTML5 Web Storage, etc).
    \n    \"\"<\/a><\/p>\n

    Errors Tab<\/h4>\n

    The Errors tab present you any possible CSS and Javascript errors detected.
    \n    \"\"<\/a><\/p>\n

    Utilities Tab<\/h4>\n

    The Color picker in the Utilities tab is a very usefull tool, since it allows you to “reverse-engineer” and get the color code from a design.
    \n    \"\"<\/a><\/p>\n

    Settings Button<\/h4>\n

    Finally, several settings options were added to this Dragonfly release, making it highly customizable.
    \n    \"\"<\/a><\/p>\n

    Impressions<\/h3>\n

    Overall, I could not find any major functionality additions to the Dragonfly on this beta release. Though, the user interface redesign is very nice (to my taste at least) and some minor annoying details existing in the past were fixed. For example, the mouse’s right click was not handled in the past. Now, a right click provides you with a Dragonfly menu (and not the browser’s one).<\/p>\n","protected":false},"excerpt":{"rendered":"

    Some time ago Opera Software announced that they would open-source their web development tool, called Dragonly. On the 14th of March Opera Software announced the first beta version of Dragonly after it became open-source. This release came few days before the Opera 11.10 Beta Browser release. Dragonfly is a Firebug-like tool that aims to aid […]<\/p>\n","protected":false},"author":1,"featured_media":428,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[4],"tags":[19,59,18],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"http:\/\/trigonakis.com\/blog\/wp-content\/uploads\/2011\/03\/operadragonfly-wallpaper-post.jpg","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p1ouW6-6T","_links":{"self":[{"href":"http:\/\/trigonakis.com\/blog\/wp-json\/wp\/v2\/posts\/427"}],"collection":[{"href":"http:\/\/trigonakis.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/trigonakis.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/trigonakis.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/trigonakis.com\/blog\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":7,"href":"http:\/\/trigonakis.com\/blog\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":448,"href":"http:\/\/trigonakis.com\/blog\/wp-json\/wp\/v2\/posts\/427\/revisions\/448"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/trigonakis.com\/blog\/wp-json\/wp\/v2\/media\/428"}],"wp:attachment":[{"href":"http:\/\/trigonakis.com\/blog\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/trigonakis.com\/blog\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/trigonakis.com\/blog\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}