Conditional Breakpoints, HTTP header profiles and more

We have another build for you on the experimental branch of Opera Dragonfly. This build contains all of the features we are targeting for the Opera Dragonfly 1.0 release. We now move to the polishing and bug fixing phase. Critical bugs will be fixed, and the UI and features will be polished to look and feel consistently across the application. Extra features will only be considered if they are critical to improve the usability, or we magically find time before the final release date (i.e. don’t count on it). New feature development will start up again once Opera Dragonfly 1.0 is released.

It is also worth pointing out that this build is buggy, but we wanted to release it to show the progress and let you try out the new features.

Conditional Breakpoints and the Breakpoints panel

We’ve implemented a breakpoint management panel next to the state panel in the JavaScript Debugger. This replaces and integrates the previous Event Breakpoints panel. When adding a breakpoint (such as a line breakpoint by clicking in the gutter of the source view or by adding an event breakpoint), it will be added to the Breakpoints panel. For line breakpoints this will list the JS file name, line number and the contents of the line. For event breakpoints it will list the event name. A checkbox next to the entry allows you to enable or disable the breakpoint. It is possible to delete and disable all breakpoints using the buttons on the Breakpoints toolbar.

It is now possible to add a break condition to the breakpoints. For example you could set a condition so it only breaks at a line if foo > bar, or add a condition to an event breakpoint to break if the event fires on an element with a certain ID, such as == "foo". If the condition matches it will break otherwise it will skip the breakpoint and continue. You can add a condition by right clicking on the breakpoint and selecting Add condition from the context menu. You can edit it using the Edit breakpoint context menu option. As you can imagine, this gives you a lot more power and efficiency when debugging your site or application.

Additional methods to add watches

In the previous build you had to type the expression to be watched manually. It is now possible to highlight the code you want to watch in the JavaScript source and select add "foo to watches. It is also possible to add a watch for a property directly from the Inspection section of the State panel, or in the Properties panel in the DOM Inspector in the same way.

Preset HTTP header profiles

We've expanded the HTTP header override feature to add support for presets. The current build just contains dummy data, but it will be possible to select a user agent from the dropdown list. This will set the HTTP header overrides in the Network Options to use the default headers used by that user agent. We will add a number of options such as various desktop, mobile and device browsers, and perhaps search engine bots. This makes the process of spoofing as a different browser or user agent much easier. It will give you an idea if the code you send to Firefox 4 for example will work fine in Opera, or check what code you send to a mobile browser. Let us know in the comments if there are any specific user agents you would find useful for debugging your pages.

Breadcrumb trail toolbar position, and other UI adjustments

We have had requests to give the option to allow the breadcrumb trail to be positioned at the bottom of the window, like the previous version of Opera Dragonfly. There have also been reports that Opera Dragonfly now takes up more space than the previous version. The number of pixels taken up by the chrome is actually less than the previous version, but as it is stacked at the top of the window it can visually look bigger. We’re experimenting in this build with moving the breadcrumbs toolbar to the bottom of the window. We request your feedback on this to see which you prefer.

We’ve also made some other UI adjustments which are in progress, such as moving the badges on the main panel selector buttons to the top right, and other small details.

We hope you find the new features useful, and we look forward to polishing them up to a shine and shipping the first major release of Opera Dragonfly. Let us know what you think in the comments.