Introduction to Firebug: Net Panel
by Honza- Published:May 7th, 2009
- Comments:37 Comments
- Category:Firebug, Planet Mozilla
Since there is not much user documentation related to Firebug features (and there is a lot what to know about) I have decided to put together several posts about existing features.
This post is intended as a detailed explanation of the Net panel from the user perspective. This post is not about developing an extension for this panel or Firebug itself. Also notice that all features described below are 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 collected and computed information to the user. It's content is composed from list of entries where each entry represents one request/response round trip made by the page.
Click the image to get full size.
The image above shows the result from a page that sent two network requests to the server in order to load. The first request is for the top testPage1.htm document (the page itself) and the second for embedded testScript1.js script file.
If you have Firebug installed enable Net panel and click here to see the example live.
Each entry displays basic info about the request and a graphical Timeline that depicts load phases in time. For now it's enough to say that it took 80ms to load the page testPage.htm and after it was loaded the script file testScript.js started to load, which took another 25ms (see more info about the Timeline below).
Following info is displayed:
- HTTP request method (GET).
- Response status and description (200 OK).
- Requested file name (testPage1.htm) And if the mouse cursor moves over it, entire URL is displayed.
- 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 two requests.
- The size of the requested data is 222 B.
- The total page load time was 108 milliseconds (since the beginning of the first request to the end of the last request).
Not to forget, there is a message at the top of the list explaining that if the panel isn't enabled nothing is monitored. This is important since if the user isn't interested in HTTP tracking, there are no performance penalties if the panel is disabled.
This message is appended into the list of request every time the panel is disabled and enabled again so, it's obvious that some requests doesn't have 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 that the entry actually represents both: the request sent to the server and also the response coming back. No matter if it comes from the server or the browser cache, one request-response round-trip is 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 is 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¶m2=value2
Clik here for live example.
POST & PUT Requests
If the requests is sending any data using 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 is yet another tab that uses expandable hierarchical tree to display all received data.
A live example is available.
Browser Cache
If a network response comes from the browser cache, there is a Cache tab, showing an info that is related to the appropriate cache-entry.
The image above shows a case when both requests came from the browser cache - response status is 304 Not Modified. 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 that stores this cache entry
Cookies
There can be also other tabs coming from Firebug extensions. An example is a Cookies tab that shows all send and received cookies for a request. This tab comes from a Firecookie extension.
An example page is here.
Not to forget, in order to have 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 is 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 network connection
- Waiting For Response - waiting for a response from the server
- Receiving Data - elapsed time required to read entire response from the server (and/
or time required to read from cache). - DomContentLoaded event - time when DomContentLoad event was fired (since the beginning of the request, can be negative if the request has been started after the event)
- load event - time when page load event was fired (since the beginning of the request, can be negative if the request has 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 be used to search panel's content and also response bodies.
As you type into the Firebug search box, an option menu automatically pops up allowing to set a Response Bodies option so, the panel looks for the searched text even within returned responses. Entries automatically expand if the text is found inside and the occurrence is 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 are displayed.
- HTML (filter) - only HTML requests are displayed
- CSS (filter) - only CSS requests are displayed
- JS (filter) - only Javascript requests are displayed
- XHR (filter) - only dynamic requests (using XMLHttpRequest) are displayed
- Images (filter) - only image requests are displayed
- Flash (filter) - only Flash requests are displayed
* This action comes from a NetExport extension. All collected and computed data presented within the Net panel can be exported in HTTP Archive format (based on JSON). There is also a viewer that can be used to preview existing *.har files.
Context Menu
There is also several useful 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 be sent to the server again)
- Open Response in New Tab - open response body in a new tab (cached response is always used)
37 Comments
[...] Net Panel. by admin. Published:May 7th, 2009; Comments:No Comment; Category:Firebug, Planet Mozilla [...]TDC Software<4687.T>-2008/09 parent results May 8 (Reuters) - TDC SOFTWARE ENGINEERING INC [...]
[...] Net Panel. by admin. Published:May 7th, 2009; Comments:No Comment; Category:Firebug, Planet Mozilla [...]TDC Software<4687.T>-2008/09 parent results May 8 (Reuters) - TDC SOFTWARE ENGINEERING INC [...]
[...] Net Panel. by admin. Published:May 7th, 2009; Comments:No Comment; Category:Firebug, Planet Mozilla [...]TDC Software<4687.T>-2008/09 parent results May 8 (Reuters) - TDC SOFTWARE ENGINEERING INC [...]
[...] Net Panel. by admin. Published:May 7th, 2009; Comments:No Comment; Category:Firebug, Planet Mozilla [...] TDC Software<4687.T>-2008/09 parent results May 8 (Reuters) - TDC SOFTWARE ENGINEERING INC [...]
[...] Software is hard | Introduction to Firebug: Net Panel [...]
Awesome! One little addition might be to recognize JSONP and enable the JSON tab with its data.
[...] http://www.softwareishard.com/blog/firebug/introduction-to-firebug-net-panel/ : une explication très détaillée sur l’onglet Net de Firebug [...]
@Steven: Yes, this is good idea! I'll take a look at this.
[...] I found a very useful post on the softwareishard blog. It’s about the best firefox development add-on ever, Firebug. The post describes detailed [...]
Good Job
just installed 1.4.0a29
where's the freakin' Net tab gone?
@pd: patch committed, should be fixed in a30.
@Honza: Swt!
[...] 4. 介绍还是alpha版本的Firebug1.4的Net面板 http://www.softwareishard.com/blog/firebug/introduction-to-firebug-net-panel/ 5. Nicholas Zakas的文章 - “Cookie和安全” [...]
Sorry for the newbie question... but since this is a post for newbies:
My "Images" button never seems to show any images; "HTML" and "JS" work fine. ("CSS" is also empty...).
This is with FireBug 1.3.3. Any ideas?
Thanks,
/v
I am wondering whether it is possible to block or modify some of the HTTP requests that are sent out.
@Yan: no, but it's a nice feature and it could be perhaps implemented as a new Firebug extension.
[...] Jan ‘Honza’ Odvarko’s continually amazing Net panel. [...]
[...] repeat. Beauty! Here are a couple quick overviews on the Net panel: Firebug and Network Monitoring Software is hard | Introduction to Firebug: Net Panel That second one is pretty in depth. But if there's anyone here that needs more extensive info, let [...]
[...] Software is hard | Introduction to Firebug: Net Panel Learned about the request Timeline feature. (categories: firefox performance debugging speed net firebug tools debug ) [...]
Hi,
I have a simple question related to the total page load time.
I ran the first test page available at:
http://www.softwareishard.com/firebug/introduction/net-panel/testPage1.htm
Summing up each load time (171ms + 9ms = 180ms) does not equal the value (265ms) presented by the total page load time. In addition, YSlow gives me the following value: 366ms.
What is the difference between these different outputs? Where is the time (265ms - 180ms = 85ms) spent? This is very confusing. After all, by summing up each size of the response equals the value (171bytes + 51bytes = 222bytes) presented by the total size of the response.
Thanks for your help in advance!
@Markku: The total page load time is the time between the first request start till the last request end. It isn't equal to the summing up each load time since some requests can overlap in time. But, yes, the total size should be equal to the sum of all request sizes.
I have an issue where I am submitting a form through an AJAX request. Instead of seeing the normal POST or GET preceeding the action page url, I see OPTIONS. The data is successfully posted, but there is no response from the action page. What does OPTIONS indicate?
the slowest part of my website is the main load. and net panel says that it's waiting on the response for over 6 seconds. How do I reduce that time? I'm using wordpress hosted on a linux server at go daddy. also I cant get gzip to work.
@walt: I would recommend to read High Performance Web Sites blog written by Steve Souders, http://www.stevesouders.com/blog/
credit repair company...
That\'s a point of view I had not considered before - thanks for sharing...
Appreciate the post, good info on this topic.
[...] Software is hard | Introduction to Firebug: Net Panel [...]
[...] Software is hard | Introduction to Firebug: Net Panel [...]
As Honza just explained to me on the Firebug chat, the 2 time measures have the following meaning:
- the first one: page load, page rendering incl. XHRs
- the second one (onload: xxx): page load and page rendering w/o XHRs.
@Honza: Correct?
Thanks again!
in some case, the request does not have the time information abouth DOMcontentloaded and load. The red and blue lines do not cover its row. Why is that?
for example, if some requests sent by Flex from an flash object, they will not have comparison between red and blue lines.
Thanks.
I am wondering whether it is possible to block or modify some of the HTTP requests that are sent out.
@Form Creator: yes, this would be great feature, I recall some activity in this area, but it never happened. This could be perhaps part of NetExport extension (http://www.softwareishard.com/blog/netexport/)
[...] Introduction to Firebug: Net Panel (May 2009) [...]
[...] http://www.softwareishard.com/blog/firebug/introduction-to-firebug-net-panel/ [...]
[...] http://www.softwareishard.com/blog/firebug/introduction-to-firebug-net-panel/ [...]
[...] http://www.softwareishard.com/blog/firebug/introduction-to-firebug-net-panel/ [...]