Will this release out of the way, full Opera Dragonfly resources can be spent working towards the first stable release in the new year. We have pushed the current state of this work to the /experimental/ path (check the previous blog post for details on how to enable this) for you to try out. As well as work in progress, it includes a couple of experiments to try to gauge what the correct behaviour should be.
New features in progress: Network and Resources
The first thing you may notice is the new resource inspector mode in the top level toolbar. We’ve decided to split the resource inspector from the network inspector, as the use case and quite possibly even the target use is different. The network inspector will be optimised towards monitoring Network/HTTP traffic, while the resource inspector will collate and present all the resources used in the current page/app, including the original HTML and CSS files (the Documents mode on the other hand shows the documents after they've been parsed by Opera and the DOM has been manipulated). In the resource inspector for example, you will be able to see all the images or fonts used on the page. This work is heavily in progress and has yet to be styled, as you can probably tell. It will be much more refined, with more features once it is in beta or final quality. The good news is that it now provides access to the request bodies, which is something that has been requested for quite a while. This should make debugging XHR much easier than before. This is the key feature we want to have finished before we can call Opera Dragonfly a beta quality product, along with the polishing of the new UI.
Network Inspector updates
- Improved data accuracy due to getting more data directly from Scope
- Displays HTTP request and response bodies (not visible yet in the current build)
- Options to clear cache, disable cache and override HTTP headers
- Craft new raw requests
- List of all resources that make up the page or application being debugged
- Detail view for each resource, with custom view for each known resource type (image preview or code view for example)
As mentioned these are at an early stage and are a work in progress so they may break or fail to work entirely.
We have made some experimental changes to gauge your feedback. Comments are most welcome on this changes:
Tabs Vs. Extenders
Opera Dragonfly currently uses tabs to separate each panel in the UI. In the Documents side panel for example there are three tabs: Styles, Properties and Layout. The advantage is that each can be accessed easily without scrolling,and there is a constant hit target to access the features. The disadvantage is it adds a while extra toolbar row to the UI. The Command Line and Style Sheets panels will be removed, so both the Documents and Scripts modes will only have one tab for the main panel. This wastes a lot of space and adds visual clutter. We are experimenting here to see what works best, or could go with a different approach entirely.
Smart printing of Objects Vs. Interface name
When detaching Opera Dragonfly in the previous experimental version, the right side of the top toolbar would become its own toolbar, to give more space for the document selector, and make it more obvious where to change the document (although this was never fully implemented). In the latest build, we've reverted the behaviour to act like the attached mode. This gives more room for the code views and keeps the UI consistent, but still keeps the document selector somewhat hidden. We do however have some plans to make this more prominent when the page being debugged isn't the active tab or window.
Let us know your comments and feedback in the comments or on Twitter (tag with #operadfl).