We have updated the drop-down select in the Scripts panel in our latest cutting-edge and experimental builds. It now has a filter, to make it easier to find a script file, and an improved keyboard interaction.

When you open the drop-down the filter gets focus automatically. ↑ and ↓ cursor keys will move the selection, and with ENTER you select the file to be displayed. When you type a part of the script file path, the amount of selectable options will get reduced accordingly. When you select a file with ENTER, the current search token gets stored, allowing you to quickly perform a previous search: when you open the drop-down, you can go through your previous searches with SHIFT+↑/↓. A summary of the available shortcuts:

• ↑ and ↓ cursor keys: navigate the options
• ENTER: select the script
• SHIFT+↑/↓: navigate the filter history
• CTRL+F3: open the drop-down, also from any other view.

The build is available on experimental and cutting-edge. Try it out and tell us what you think!

Lots of changes in the Network inspector have now made it into an experimental build. The main purpose of the makeover is to give more insight on what happens on the Network side of Opera, with powerful new filtering and search functionality.

The type filter now lets you narrow down the view to certain types of Resources. In addition, you can also look only at the Resources that were requested via XMLHttpRequest. Also you can use CTRL/CMD + click, to combine multiple filters.

We have added an inline search, which works consistently over the URL list, table view, and in the details.

The graph view now uses specific colors to represents the different phases of resource retrieval as segments within each row. A new tooltip lets you see a sequence of internal events in Opera that occur during the retrieval and how much time was spent on each. Note that the values represent the time elapsed between two events.

Although the standard graph view is useful for visualizing the loading flow, sometimes developers may be more interested in picking out specific data about their requests. You can now switch from flow view to a table view, which can be sorted and further customized via the context menu.

Selecting each line will provide the specifics of each request in the Details view, which shows the actual request and response of each network activity, including headers and body. This view has been streamlined: headers are split into key/value pairs, and the response body is shown inline.

Most of these UI changes are still work in progress, but they should give you an indication of where we're heading. A few known issues:

• The line-height of tables can get out of sync with the list of URLs on the left-hand side
• Content tracking is not enabled by default, but available as a toggle in the Network options tab. Without tracking, the response body will sometimes not be shown in the Details view
• The search may sometimes match parts of the UI itself
• The layout in the details view sometimes breaks due to long headers or body
• Timing information in the Network view is not accurate, as it can be affected by other debugging activities in Opera. In general, the loading flow will be slower when Opera Dragonfly is running. We plan to address this issue with a special network-profiler mode, which is on the roadmap for later this year.

But wait, there's more! As a bonus, this build also includes some new features in our Style inspector. We now show color swatches next to all color values. And – as hotly requested by many of our users – it's now possible to use your preferred color format: Hex, RGB or HSL (which can be changed in Settings → Documents → Styles). Other changes include clickable links (which open in the Resources tab) and a streamlined view in the Computed Style panel.

In our latest experimental build we have improved the tooltips in the JavaScript source view. Normally, inspecting a value should not change the current state in any way. For that reason, we never included parentheses in the automatic detection and selection of a value to prevent function calls. Now you can control this behaviour: if you hold the shift key while hovering over the JavaScript source, parentheses will be included.

For example, for a code fragment of ele.getElementsByTagName('ul')[0], you normally get a generic tooltip for the [0] array when hovering over the square bracket.

With shift, the automatic selection will also include the parentheses and you will now get a tooltip relating to the evaluated selection — in this case, the first ul element in the ele object.

Additionally you can select any text, hold down the shift key, and get a tooltip with the according evaluated value.


Selection now also works over several lines.

We have also added a new tooltip for all JavaScript inspections. For properties of type object we show the according class. If you now hover over the class name of any Element, Function, Date, RegExp, Error and Exception, you will get a tooltip with a pretty-printed representation. This also works on top of an other tooltip:

If you hover the pretty-printed tooltip of an element, the according node in the document gets scrolled into view and highlighted.

This is all available on experimental now. Take a look and tell us what you think!