Enhanced Network Logger

As announced recently for the experimental path, we are now releasing an all new Network Logger on our stable path. Here is a summary of what's changed:

The URLs on the left-hand side are shortened. This should make it easy to spot the one you're looking for. The full URL is shown in a tooltip, which also provides you with a handy list of GET parameters.

The Network panel, showing a shortened URL being hovered, resulting in a large tooltip with the full URL and associated GET parameters

The request waterfall has also been given a new color scheme. As before, you get color-coded icons for different resource types in the URL list, but in the timeline we now indicate how the time was spent fetching the URL. What happens once the browser asks for a URL is shown as a sequence of phases. They fall into categories like scheduling (grey), sending (red), waiting (blue), receiving (green) and processing (grey). Occasionally requests have to be retried or they are aborted – these actions, and the related phases, are mostly show in yellow. We tried to follow existing UI conventions a bit, so you don't need to learn the color-coding idiosyncrasies for each developer tool you might be using.

In the example below, you can see that to complete the request for photos_upload.php the browser took some time to write the actual request (red), waited for the request to be sent over the network and processed on the server side (blue), and then spent a little time to receive the response (green).

Visualising the request for photo_upload.php in the Network Logger, with the various phases present in the color-coded graph

For an even more detailed view, there's a tooltip on the loading graphs, which provides you with a detailed, high-res timing breakdown for each step of the various phases.

The tooltip for a single network request, showing detailed sequence and timing information for a completed request

If you don't particularly care much about the specific timing and sequence of your requests, you can now also switch to a Data view, which presents all Methods, Statuses, MIME type etc. in tabular form. This table can be sorted by clicking the various column headers, and you can filter the table to only show particular types of resources (such as Scripts, Images or XMLHttpRequests). You can select multiple types of resources by using +click / Ctrl+click. Opera Dragonfly will remember your choice of sorting and filtering next time you access the Network panel.

The Network panel's tabular data view

Clicking on a particular request will bring up an overlay with all the details associated with that request. This data view can be resized and you can quickly move to the detailed view of another request by using the and cursor keys.

The detailed data view for a single network request, showing all the Request and Response headers that were exchanged between the browser and the server

In addition, this latest release has now been localized in 33 languages – if you used a localized version before, and parts of the UI were still in English, this should now be fixed.

Experimental build with integrated style profiler previewFull of resources

Comments

RobMintsoft Saturday, June 2, 2012 8:37:19 AM

Awesome! Been waiting for this in stable for months! smilesmile

Constantine Vesnac69 Thursday, June 7, 2012 8:09:55 PM

what is network profiler doing ? (new icon in experimental)

Daniel Herzogdanfoooo Monday, June 11, 2012 8:46:40 AM

That is a mode that will give you more exact timing information. Especially when you're debugging remotely you'll see that websites actually load slower with Dragonfly on - when you switch network profiling on this effect will be minimized.

Unregistered user Friday, June 15, 2012 12:54:07 PM

Roman Di writes: Great feature, been using it for couple months in experimental build. The biggest problem is when I switch debugging context, all data is reset :(

Unregistered user Friday, June 15, 2012 2:02:23 PM

Anonymous writes: I'm using Opera 12 (release) and using network tab with hardware acceleration on is REALLY slow. A site loads in 20 seconds instead of 2 thanks to it. Is this a known problem? Or is it just my machine? Win 7 x64 Opera 12 x64

Constantine Vesnac69 Saturday, June 16, 2012 6:56:59 AM

@anonymous most probably - that's the bug of HWA

Originally posted by danfoooo:

That is a mode that will give you more exact timing information. Especially when you're debugging remotely you'll see that websites actually load slower with Dragonfly on - when you switch network profiling on this effect will be minimized.


O, that's quite good.

Daniel Herzogdanfoooo Tuesday, June 26, 2012 12:51:58 PM

Originally posted by anonymous:

Anonymous writes:

I'm using Opera 12 (release) and using network tab with hardware acceleration on is REALLY slow. A site loads in 20 seconds instead of 2 thanks to it.

Is this a known problem? Or is it just my machine? Win 7 x64 Opera 12 x64

Do you use remote debugging? Have you tried the new button (rightmost) in the Network inspector to improve timing information? Pages should load in normal speed when you turn that on.

Daniel Herzogdanfoooo Tuesday, June 26, 2012 12:55:15 PM

Originally posted by anonymous:

Roman Di writes:

Great feature, been using it for couple months in experimental build.
The biggest problem is when I switch debugging context, all data is reset sad

We are working on a feature to let you compare probes.

Write a comment

New comments have been disabled for this post.