1. karl dubost
  2. Opera Dragonfly Manual Karl


Opera Dragonfly Manual Karl / network-inspector.mdown

Network Inspector

The Network Inspector is Opera Dragonfly’s HTTP dashboard. It provides an overview of all HTTP requests such as images, scripts, and style, initiated by the primary webpage (primary HTTP request). The Network Inspector includes a visualization of the time and duration that such resources have been downloaded. This visualization provides a clear map of how to repair or improve script and usability performance.

Network log

The first tab of the Network Inspector is called Network log.

Network Network Log

In the left column, each URI is preceded with an icon. This provides a visual cue about the resource's file type.

<table style="width:15em;"> <caption>Table of file types and related icons</caption> <tr> <td><img src="img/type_audio.png" alt="audio icon"/></td> <td>audio</td> </tr> <tr> <td><img src="img/type_data.png" alt="data icon"/></td> <td>data</td> </tr> <tr> <td><img src="img/type_feed.png" alt="feed icon"/></td> <td>feed</td> </tr> <tr> <td><img src="img/type_flash.png" alt="flash icon"/></td> <td>flash</td> </tr> <tr> <td><img src="img/type_font.png" alt="font icon"/></td> <td>font</td> </tr> <tr> <td><img src="img/type_generic.png" alt="generic icon"/></td> <td>generic</td> </tr> <tr> <td><img src="img/type_markup.png" alt="markup icon"/></td> <td>markup (html, xhtml, …)</td> </tr> <tr> <td><img src="img/type_other.png" alt="other icon"/></td> <td>other, unknown</td> </tr> <tr> <td><img src="img/type_pdf.png" alt="pdf icon"/></td> <td>pdf</td> </tr> <tr> <td><img src="img/type_picture.png" alt="picture icon"/></td> <td>picture (png, webp, jpg, gif, …)</td> </tr> <tr> <td><img src="img/type_plugin.png" alt="plugin icon"/></td> <td>plugin</td> </tr> <tr> <td><img src="img/type_postscript.png" alt="postscript icon"/></td> <td>postscript</td> </tr> <tr> <td><img src="img/type_script.png" alt="script icon"/></td> <td>script (javascript, …)</td> </tr> <tr> <td><img src="img/type_silverlight.png" alt="silverlight icon"/></td> <td>silverlight</td> </tr> <tr> <td><img src="img/type_style.png" alt="style icon"/></td> <td>style (css)</td> </tr> <tr> <td><img src="img/type_text.png" alt="text icon"/></td> <td>text</td> </tr> <tr> <td><img src="img/type_vector.png" alt="vector icon"/></td> <td>vector (svg)</td> </tr> <tr> <td><img src="img/type_video.png" alt="video icon"/></td> <td>video (ogg, …)</td> </tr></table>

Each URI will be followed by the specific HTTP status code associated with it. When hovering the status code, an explanation of the HTTP status code is given.

The right column is a long panel with vertical lines. Each line marks 100 milliseconds. Thicker vertical black lines mark 1 second. For each resource line, a colored horizontal bar is displayed composed of three events:

  • The start time when the URI is loaded,
  • The request time (left end of the colored bar)
  • The end time when the request has been completed. (right end of the colored bar)

Network Network Log Bar

Placing the mouse over the horizontal bar will reveal three values in a box for these events in milliseconds: Total duration, Request time and Response time. When the information has been loaded from the cache, Cached: is displayed with the time in milliseconds.

There are two buttons on the toolbar just under Network log tab label. The first one pauses all subsequent HTTP requests. It becomes handy for a webpage using intensively XMLHttpRequest. The second one fits the network cascade view to the width of the window in order to avoid horizontal scrolling.

Resizing the window

Make Request

The Make Request tab is a tool for creating a custom HTTP request to a specific URI and obtain the HTTP response with or without the payload.

Network Network Log Req

Opera Dragonfly makes it easy to precisely tailor an HTTP request by specifying the individual HTTP headers for each. When entering the URI in the URL box, the HTTP request is being crafted in the Request body box. The default proposed HTTP method is GET (In Opera Dragonfly 1.0, only the HTTP GET method is available). The default Opera HTTP headers are written in the Request body. They can be changed for testing web servers with different type of HTTP requests. For example, it is possible to create an HTTP request that would enforce application/xhtml+xml.

GET / HTTP/1.1
Host: www.opera.com
User-Agent: Opera/9.80 (Macintosh; Intel Mac OS X 10.6.6; U; fr) Presto/2.7.62 Version/11.01
Accept: application/xhtml+xml

When clicking on the Send request button, the HTTP request is sent and in the Response box appears the answer of the server as communicated over the network.

Network Options

The third panel provides options for fine-tuning the browser behavior with regards to HTTP requests.

Network Network Log Opt

Caching behavior

When testing HTTP requests, it is often important to disable all sources of caching. When caching is disabled, the Opera browser will bypass all caching, always doing full reloads from the server.

Content tracking behavior

This setting controls if the bodies of responses will be available to Opera Dragonfly when a page loads. Enabling it will make load operations slower, and use more memory. It will also make network body reporting more accurate

Global header overrides

It is sometimes necessary to impersonate another HTTP client such as a bot, a mobile browser, etc. It is already possible to do that through the Make Request tab, but it might be cumbersome in some circumstances to have to type these manually. Once the Enable global header overrides checkbox is selected, there are two choices:

  • Select a predefined profile.
  • Create a profile and save it.

Both will spoof the HTTP headers sent by the browser to the server. These will last only the Opera Dragonfly session time. The list of preset profiles emulate the most common browsers.

List of Preset Profiles

If a preset profile is not used, headers will be added or overrided. When adding for example X-Foo header, the rest of the headers will be kept. It is practical for overriding the User-Agent header or mocking specific proxies or web clients. It becomes very practical for testing APIs.