m (Added hint for multiple filters (related to issue 4156))
|Line 17:||Line 17:|
| Show Responses || <code>extensions.firebug.netShowBFCacheResponses</code> || Specifies whether HTTP responses coming from the [http://www.softwareishard.com/blog/firebug/firebug-16-tracking-also-bfcache-reads/ BFCache] should be displayed.
Revision as of 09:20, 17 July 2013
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. Its content is composed of a list of entries where each entry represents one request/response round trip made by the page.
This menu is reachable via the little arrow in the panel tab ( ) or by right-clicking on on the panel tab (since Firebug 1.9).
|Enabled/Disabled|| ||Enables the Net Panel|
|Disable Browser Cache|| ||Disables/enables browser HTTP cache.|
|Show Paint Events|| || Specifies whether DOM paint events shall be shown as vertical lines inside the Net Panel|
Note: Due to a security issue these events are not sent to web content anymore by default. You need to set
|Show BFCache Responses|| ||Specifies whether HTTP responses coming from the BFCache should be displayed.|
For more info about tweaks available in Firebug please see the full list of preferences.
Break On XHR
Removes all entries of the list of requests.
When this option is enabled, the entries of the requests list are not deleted when reloading the page. Instead the are grouped by page request, which means, when reloading the page several times you will get several request trees having the page title as root.
There are several buttons for filtering the current list of requests for giving a fast overview over the files you want to see. Following there's a list of the currently implemented filters:
|All||Displays all requests||All|
|HTML||Limits display to markup files||(X)HTML, XML, MathML, RSS, RDF|
|CSS||Limits display to CSS files||CSS|
|XHR||Limits display to XMLHttpRequests||XMLHttpRequests|
|Images||Limits display to image files||JPEG, PNG, GIF, BMP|
|Plugins||Limits display to Flash and Silverlight files||SWF, XAP|
|Media||Limits display to media files||MP3, Ogg, WAV, MIDI, WebM, MPEG, FLV|
|Fonts||Limits display to font files||WOFF, TTF, OTF|
You can also select multiple filters by holding down
⌘ while clicking the filter buttons.
You have the possibility to search inside the different requests. Thereby besides the general options for case sensitivity and regular expression search you can optionally also search inside the request bodies.
The main part of the Net Panel is the Request List. When the Net Panel is activated and a page is loaded it starts filling with all HTTP requests made by a page. Each entry displays basic info about the request and a graphical Timeline that depicts load phases in time. The following is a list of information, that is displayed for each request:
- HTTP request method
- HTTP response code and description
- Requested file name (shortened; hovering it shows the entire URL)
- Domain name from where the response came from
- Size of the response (compressed size in case of compressed responses)
- Graphical Timeline and load time info
Depending on their loading status and source the requests are displayed differently:
|Normal finished requests||Requests fetched from the server|
|Loading requests||Requests currently being fetched from the server|
|Cached requests||Requests with response coming from the browser cache (HTTP status code 304)|
|BFCached requests||Requests with response coming from the BFCache|
|Erroneous requests||Requests, which returned an HTTP error (HTTP status code 4xx or 5xx)|
|Aborted requests||Requests, which were aborted|
Besides that there is a summary at the bottom of the Request List. This summary contains info about the total number of requests, the total file size and the total page load time.
Request & Response Details
Every request entry can be expanded by clicking on the left hand twisty 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. There are several tabs shown for each request. Depending on the request method and requested file type there are additional tabs with further information. Here's a list of the tabs shown for the different requests:
|Headers||-||Lists the request and response headers of the current request|
|Response||-||Displays the contents of the response unformatted (as they came from the server)|
|Params||GET request||Displays the URL parameters|
|Post||POST request|| Displays the POST parameters in a formatted way (depending on the |
|HTML||HTML files||Displays the rendered HTML output|
|JSON||JSON files||Displays the JSON data in a formatted tree structure similar to the DOM Panel|
|XML||XML files||Displays the XML data in a formatted tree structure similar to the HTML Panel|
|Cache||Cached files||Lists cache information to the current request|
There can be also other tabs coming from Firebug extensions. An example is a Cookies tab that shows all sent and received cookies for a request. This tab comes from the Firecookie extension.
Some files are fetched from the browse cache. They can be recognised by the response status "304 Not Modified". The Cache Tab includes the following information:
|Last Modified||Last time the cache entry was modified|
|Last Fetched||Last time the cache entry was accessed|
|Expires||Expiration time of the cache entry|
|Data Size||Cache entry data size|
|Fetch Count||Number of times the cache entry has been accessed|
|Device||ID for the device that stores this cache entry|
One of the most useful features for debugging page load performance is a request Timeline. The Net Panel uses this graphical representation to show request load in time together with timing data.
Every request-response round trip is shown as horizontal bar in the Timeline and is composed of several phases, represented by different colors. Hovering a Request Timeline offers more detailed information about the timings of the different phases.
|Blocking|| Time spent in a browser queue waiting for a network connection (formerly called Queueing)|
For SSL connections this includes the SSL Handshake and the OCSP validation step.
|DNS Lookup||DNS resolution time|
|Connecting||Elapsed time required to create a TCP connection|
|Sending||Sending request headers|
|Waiting||Waiting for a response from the server|
|Time required to read the entire response from the server (and/or time required to read from cache)|
|'DOMContentLoaded' (event)||(blue line)||Point in time when DOMContentLoaded event was fired (since the beginning of the request, can be negative if the request has been started after the event)|
|'load' (event)||(red line)||Point in time when the page load event was fired (since the beginning of the request, can be negative if the request has been started after the event)|
|'MozAfterPaint' (event)||(green line)||Point in time when a MozAfterPaint event was fired (since the beginning of the request, can be negative if the request has been started after the event)|
|Time stamp||(olive line)|| Time stamp created via |
Waterfall Graph Time Extent
In order to keep the X axis (time) in sensible extent, the waterfall graph breaks the time and starts displaying new requests that start later (in the page life) again from the beginning. In other words, a request, that starts after a predefined period of time (1s by default) since the previous request finished, starts from 0 time of the graph again. This avoids endless extension of the X axis, which would make the graph less readable. There is a preference extensions.firebug.netPhaseInterval allowing you to set the gap in milliseconds, after which the time break should happen. If set to 0, breaking doesn't happen at all.
The Breakpoint Column allows you to set breakpoints for XMLHttpRequests. By clicking on it a breakpoint is set for the request. Clicking it again removes the breakpoint again.
You can create a conditional breakpoint by right-clicking a breakpoint. Doing so opens the Breakpoint Condition Editor:
There are variables available, which can be used within the expression:
| ||Response content of the POST request|
|<parameter name>||Parameters used within the POST request|
If you right-click on a request, the context menu offers you several options to copy data to the clipboard including the location, the request headers, the response headers and the response body (except for binary files). Furthermore you can open the request in a new tab (which keeps the request method) or open the response in a new tab. For CSS files you even have the possibility to open the file in the CSS Panel or inspect it inside the DOM Panel.