Firebug:net Panel Use detailed

Introduction to Firebug:net Panel

Since There is isn't much user documentation related to Firebug features (and there are a lot what to know about) I had deci Ded to put together several posts about existing features.

This was intended as a detailed explanation of the Net panel from the user perspective. This was not a developing a extension for this panel or Firebug itself. Also Notice that all features described below is available (some of them introduced) in Firebug 1.4.

You'll be surprised how many features is there!

Net Panel Overview

The main purpose of the Net panel is to monitor HTTP traffic initiated by a Web page and simply present all Colle CTED and computed information to the user. It ' s content is composed from list of entries where each entry represents one request/response round trips made by the page .

Click the image to get full size.

The image above shows the result from a page this sent the network requests to the server in order to load. The first request is to the top testpage1.htm document (the page itself) and the second for embedded TESTSCR Ipt1.js script file.

If you had Firebug installed enable Net panel and click here to see the example live.

Each entry displays basic info is about the request and a graphical Timeline , depicts load phases in time. For now it's enough to say so it took 80ms to load the page testpage.htm and after it is loaded the S Cript file testscript.js started to load, which took another 25ms (see more info about the timeline< /c5> below).

Following info is displayed:

• HTTP Request Method (GET).
• Response Status and description (kOK).
• Requested file name (testpage1.htm) and if the mouse cursor moves over it, entire URL is Displa Yed.
• Domain name from where the response came from (softwareishard.com).
• Size of the response (171 B).
• graphical timeline and load time info (80ms).

There is also a summary info at the bottom of the request list.

This summary simply says:

• The page initiated the requests.
• The size of the requested data is 222 B.
• The total page load time is 108 milliseconds (since the beginning of the first request to the end of the last re Quest).

Not to forget, there are a message at the top of the list explaining that if the panel isn ' t enabled are monitored. This is important since if the user isn ' t interested in HTTP tracking, there be no performance penalties if the panel is Disabled.

This message was appended into the list of request every time the panel was disabled and enabled again so, it's obvious that Some requests doesn ' t has to be displayed.

Net Request & Response Details

Every request entry can be expanded by clicking on the left hand plus button in order to see additional info. It's important to note, the entry actually represents both:the request sent to the server and also the R Esponse coming back. No matter if it comes from the server or the browser cache, one request-response round-trip are represented by one entry in The list.

Click on the following screenshot to see all headers.

The expanded body has following tabs:

• Headers -Request and response HTTP Headers
• Response -data returned from the server.
• HTML -Preview of an HTML response (available only if the response are an HTML).

The other tabs look like as follows:

URL Parameters

If a network request uses a query string (URL parameters), another Params tab is available providing tabular info about all specified parameters.

The example above shows parameters for the following URL:
http://www.softwareishard.com/firebug/introduction/net-panel/testPage1.htm?param1=value1&param2=value2

Clik here for live example.

POST & PUT Requests

If the requests is sending any data using a POST or PUT HTTP method, there is another tab with sent data.

Click here for a live example.

JSON Responses

In case of a JSON response, there are yet another tab that uses expandable hierarchical tree to display all RECEIV Ed data.

A Live example is available.

Browser Cache

If A network response comes from the browser cache, there are a cache tab, showing an info that's related to the Appropriate cache-entry.

The image above shows a case when both requests came from the browser cache- response status was 304 not Modi Fied. Also, the summary row shows amount of data coming from the cache.

Further, there is following info:

• Last Modified -last time the cache entry was Modified
• Last fetched -last time the cache entry was opened
• Expires -Expiration time of the cache entry
• Data Size -cache entry data size
• Fetch Count -Number of times the cache entry has been opened
• device -ID for the device, stores this cache entry

Cookies

There can also other tabs coming from Firebug extensions. A example is a cookie tab that shows all send and received cookie for a request. This tab comes the from a firecookie extension.

An example page was here.

Forget, in order to has this tab, you need the Firecookie extension installed.

Timeline

One of the most useful features for debugging page load performance is a request Timeline. Net Panel uses this graphical representation to show request load in time together with timing data.

If you move mouse over the graph there is a detailed tooltip info. See the following screenshot:

Every request-response round trip was composed from a several phases, represented by different color in the graph:

• DNS Lookup -DNS resolution time
• Connection -Elapsed time required To create a TCP connection
• Queuing -elapsed time spent in a browser queue waiting for a networ K Connection
• waiting for Response -waiting for a Response from the server
• Re ceiving Data -elapsed time required to read entire response from the server (and/
  or time required to read FR Om cache).
• domcontentloaded Event -time time domcontentload event was fired (since the Begin Ning of the request, can be negative if the request had been started after the event)
• load Event - time when page load event is fired (since the beginning of the request, can be negative if the requ EST have been started after the event)

See also a post dedicated to HTTP timings in Firebug 1.5.

Search

The net panel also uses Firebug's search Box that can is used to Search panel's content and also response bodies.

Click the image to enlarge.

As you type into the Firebug search box, an option menu automatically pops up allowing to set a Response bodies O Ption So, the panel looks for the searched text even within returned responses. Entries automatically expand if the text is found inside and the occurrence are also selected in the UI. The search is automatically case sensitive if the searched text contains any capital letters.

Toolbar

Let's also quickly explain all the available toolbar buttons.

• Clear -Removes all entries.
• export* -Exports all HTTP tracing data into a HTTP Archive file (*.har)
• All (filter)-all requests is displayed.
• HTML (filter)-only HTML requests is displayed
• CSS (filter)-only CSS requests is displayed
• JS (filter)-only Javascript requests is displayed
• XHR (filter)-only dynamic requests (using XMLHttpRequest ) is displayed
• Images (filter)-only image requests is displayed
• Flash (filter)-only flash Requests is displayed

* This action comes from a netexport extension. All collected and computed data presented within the Net panel can is exported in HTTP Archive format (b ased on JSON). There is also a viewer the can be used to preview existing *.har files.

Context Menu

There is also several useful the actions available in a request context menu. If you right click on a request entry you should see something like as follows (the list of actions depends on the type of Clicked request):

• Copy location-copy request URL into the Clipboard
• Copy Request Headers -Copy all Request Headers into the Clipboard
• copy Response Headers -Copy all Response Headers into the Clipboard
• copy Response body -copy Response body into the clipboard
• Open in New tab -open response in a new browser tab (the request can is sent to the server again)
• open Response in new tab -open Response body in a new tab (cached Response are always used)

Firebug:net Panel Use detailed