Net Panel

From FirebugWiki

(Difference between revisions)
Jump to: navigation, search
m (Added timeline waiting illustration)
(Added the info about the Cookies tab to the Request & Response details table)
 
(29 intermediate revisions not shown)
Line 3: Line 3:
== Options Menu ==
== Options Menu ==
-
This menu is reachable via the little arrow in the panel tab ( [[Image:optionsMenuArrow.png]] ) or by right-clicking on on the panel tab (since [[Firebug Release Notes#Firebug 1.9|Firebug 1.9]]).
+
This menu is reachable via the little arrow in the panel tab ( [[File:NetPanelOptionsMenuArrow.png]] ) or by right-clicking on on the panel tab (since [[Firebug 1.9 Release Notes|Firebug 1.9]]).
{| class="wikitable" style="width:100%; vertical-align:top;"
{| class="wikitable" style="width:100%; vertical-align:top;"
Line 17: Line 17:
|-  
|-  
-
| Show BF Cache 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.
+
| Show BFCache 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.
|}
|}
Line 24: Line 24:
== Panel Toolbar ==
== Panel Toolbar ==
=== Break On XHR ===
=== Break On XHR ===
-
Clicking the "Break On XHR" button enables a listener for XMLHttpRequests. If an XHR is made then, the debugger stops the script execution immediately and jumps to the Script Panel.
+
Clicking the "Break On XHR" button ( [[File:Break_On_XHR_Button.png]] ) enables a listener for XMLHttpRequests. If an XHR is made then, the debugger stops the script execution immediately and jumps to the Script Panel.
=== Clear ===
=== Clear ===
Line 36: Line 36:
{| class="wikitable" style="vertical-align:top;"
{| class="wikitable" style="vertical-align:top;"
|- bgcolor=lightgrey
|- bgcolor=lightgrey
-
! style="width:60px" |Filter || Description
+
! style="width:60px" | Filter || Description || file types
|-  
|-  
-
| All || Displays all requests
+
| All || Displays all requests || All
|-  
|-  
-
| HTML || Limits display to HTML files
+
| HTML || Limits display to markup files || (X)HTML, XML, MathML, RSS, RDF
|-
|-
-
| CSS || Limits display to CSS files
+
| CSS || Limits display to CSS files || CSS
|-
|-
-
| JS || Limits display to JavaScript files
+
| JavaScript || Limits display to JavaScript files || JS
|-
|-
-
| XHR || Limits display to XMLHttpRequests
+
| XHR || Limits display to XMLHttpRequests || XMLHttpRequests
|-
|-
-
| Images || Limits display to image files
+
| Images || Limits display to image files || JPEG, PNG, GIF, BMP
|-
|-
-
| Flash || Limits display to Flash files
+
| Plugins || Limits display to Flash and Silverlight files || SWF, XAP
|-
|-
-
| Media || Limits display to Media files (*.ogg, *.mpeg, ...)
+
| 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 <code class="key">Ctrl</code> / <code class="key">&#8984;</code> while clicking the filter buttons. This feature was added in [[Firebug Release Notes#Firebug 1.12|Firebug 1.12]].
== Search ==
== Search ==
Line 69: Line 73:
* Graphical Timeline and load time info
* Graphical Timeline and load time info
-
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.
+
Depending on their loading status and source the requests are displayed differently:
 +
{| class="wikitable" style="vertical-align:top;"
 +
|- bgcolor=lightgrey
 +
! style="width:120px" | Filter || Description || Example
 +
|-
 +
| Normal finished requests || Requests fetched from the server || [[Image:netRequestFinished.png]]
 +
|-
 +
| Loading requests || Requests currently being fetched from the server || [[Image:netRequestLoading.png]]
 +
|-
 +
| Cached requests || Requests with response coming from the browser cache (HTTP status code 304) || [[Image:netRequestCached.png]]
 +
|-
 +
| BFCached requests || Requests with response coming from the [http://www.softwareishard.com/blog/firebug/firebug-16-tracking-also-bfcache-reads/ BFCache] || [[Image:netRequestBFCached.png]]
 +
|-
 +
| Erroneous requests || Requests, which returned an HTTP error (HTTP status code 4xx or 5xx) || [[Image:netRequestError.png]]
 +
|-
 +
| Aborted requests || Requests, which were aborted by the client || [[Image:netRequestAborted.png]]
 +
|}
 +
 
 +
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 incl. the time when the [https://developer.mozilla.org/en-US/docs/Web/Reference/Events/load <code>load</code> event] was fired.
-
== Request & Response Details ==
+
=== 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.
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:
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:
Line 84: Line 106:
| Params || GET request || Displays the URL parameters
| Params || GET request || Displays the URL parameters
|-
|-
-
| Post || POST request || Displays the POST parameters incl. the source
+
| Post || POST request || Displays the POST parameters in a formatted way (depending on the <code>Content-Type</code> of the request) and the raw data inside the ''Source'' section
|-
|-
| HTML || HTML files || Displays the rendered HTML output
| HTML || HTML files || Displays the rendered HTML output
Line 93: Line 115:
|-
|-
| Cache || Cached files || Lists cache information to the current request
| Cache || Cached files || Lists cache information to the current request
 +
|-
 +
| Cookies || Requests with cookies || Lists the cookie information sent together with the 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.
 
-
== Cache Info ==
+
There can be also other tabs coming from Firebug extensions.
 +
 
 +
=== Cache Info ===
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:
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:
{| class="wikitable" style="vertical-align:top;"
{| class="wikitable" style="vertical-align:top;"
Line 115: Line 140:
|}
|}
-
== Timeline ==
+
=== Timeline ===
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.
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.
-
=== Request Timeline ===
+
==== Request Timeline ====
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.
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.
{| class="wikitable" style="vertical-align:top;"
{| class="wikitable" style="vertical-align:top;"
|- bgcolor=lightgrey
|- bgcolor=lightgrey
-
! Value || Display || Description
+
! Value || style="width:130px;" | Display || Description
|-
|-
-
| Blocking || [[File:timelineBlocking.png]] || Time spent in a browser queue waiting for a network connection ''(formerly called '''Queueing''')''<br />For SSL connections this includes the SSL Handshake and the [http://en.wikipedia.org/wiki/Online_Certificate_Status_Protocol OCSP] validation step.
+
| Blocking || <div style="width:17px;height:17px;background:#EBE1D2 -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.2));"></div> || Time spent in a browser queue waiting for a network connection ''(formerly called '''Queueing''')''<br />For SSL connections this includes the SSL Handshake and the [http://en.wikipedia.org/wiki/Online_Certificate_Status_Protocol OCSP] validation step.
|-  
|-  
-
| DNS Lookup || [[File:timelineDNSLookup.png]] || DNS resolution time
+
| DNS Lookup || <div style="width:17px;height:17px;background:#91D2DC -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.2));"></div> || DNS resolution time
|-  
|-  
-
| Connecting || [[File:timelineConnecting.png]] || Elapsed time required to create a TCP connection
+
| Connecting || <div style="width:17px;height:17px;background:#B9E164 -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.2));"></div> || Elapsed time required to create a TCP connection
|-
|-
-
| Sending || [[File:timelineSending.png]] || Sending request headers
+
| Sending || <div style="width:17px;height:17px;background:#E1826E -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.2));"></div> || Sending request headers
|-
|-
-
| Waiting || [[File:timelineWaiting.png]] || Waiting for a response from the server
+
| Waiting || <div style="width:17px;height:17px;background:#B4A5D2 -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.2));"></div> || Waiting for a response from the server
|-
|-
-
| Receiving || [[File:timelineReceiving.png]] || Time required to read the entire response from the server (and/or time required to read from cache)
+
| Receiving || <div style="width:17px;height:17px;background:#D7D7D7 -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.2));float:left;"></div><div style="float:left;">&nbsp;/&nbsp;</div><div style="width:17px;height:17px;background:#FAFAFA -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.2));float:left;"></div>&nbsp;(from cache) || 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)
+
| 'DOMContentLoaded' (event) || <div style="width:1px;height:17px;margin-right:10px;background-color:blue;float:left;"></div> (blue line) || Point in time when the [https://developer.mozilla.org/en-US/docs/Web/Reference/Events/DOMContentLoaded <code>DOMContentLoaded</code> 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)
+
| 'load' (event) || <div style="width:1px;height:17px;margin-right:10px;background-color:red;float:left;"></div> (red line) || Point in time when the page [https://developer.mozilla.org/en-US/docs/Web/Reference/Events/load <code>load</code> 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 [https://developer.mozilla.org/en/Gecko-Specific_DOM_Events#MozAfterPaint MozAfterPaint] event was fired (since the beginning of the request, can be negative if the request has been started after the event)
+
| 'MozAfterPaint' (event) || <div style="width:1px;height:17px;margin-right:10px;background-color:green;float:left;"></div> (green line) || Point in time when a [https://developer.mozilla.org/en/Gecko-Specific_DOM_Events#MozAfterPaint MozAfterPaint] event was fired (since the beginning of the request, can be negative if the request has been started after the event)
 +
|-
 +
| Time stamp || <div style="width:1px;height:17px;margin-right:10px;background-color:olive;float:left;"></div> (olive line) || Time stamp created via [[Console API#console.timeStamp.28name.29|<code>console.timeStamp()</code>]]
|}
|}
-
=== Waterfall Graph Time Extent ===
+
==== 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 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.
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.
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.
-
== Context options ==
+
=== Breakpoint Column ===
-
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.
+
==== Setting breakpoints ====
 +
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.
 +
 
 +
==== Breakpoint conditions ====
 +
You can create a conditional breakpoint by right-clicking a breakpoint. Doing so opens the Breakpoint Condition Editor:
 +
 
 +
[[File:XHRBreakpointConditionEditor.png]]
 +
 
 +
There are variables available, which can be used within the expression:
 +
 
 +
{| class="wikitable" style="vertical-align:top;"
 +
|- bgcolor=lightgrey
 +
! Variable || Description
 +
|-
 +
| <code>$postBody</code> || Response content of the POST request
 +
|-
 +
| style="font-style: italic;" | &lt;parameter name&gt; || Parameters used within the POST request
 +
|}
 +
 
 +
== Context Menu ==
 +
=== Request list header ===
 +
{| class="wikitable" style="width:100%; vertical-align:top;"
 +
! style="width:180px;" | Option || Description
 +
|-
 +
| URL || Toggles the display of the column for the URL of the requests
 +
|-
 +
| Status || Toggles the display of the column for the HTTP status of the requests
 +
|-
 +
| Protocol || Toggles the display of the column for the protocol of the requests
 +
|-
 +
| Domain || Toggles the display of the column for the domain of the requests
 +
|-
 +
| Size || Toggles the display of the column for the size of the responses
 +
|-
 +
| Local IP || Toggles the display of the column for the client's IP of the request
 +
|-
 +
| Remote IP || Toggles the display of the column for the server IP of the request
 +
|-
 +
| Timeline || Toggles the display of the column for the [[#Timeline|Timeline]] of the request
 +
|-
 +
| Reset Header || Resets the column display to the default
 +
|}
 +
 
 +
=== Requests ===
 +
{| class="wikitable" style="width:100%; vertical-align:top;"
 +
! style="width:180px;" | Option || Context || Description
 +
|-
 +
| Copy Location || all requests || Copies the URL of the request to the clipboard
 +
|-
 +
| Copy URL Parameters || requests with URL parameters || Copies the URL parameters of the request to the clipboard
 +
|-
 +
| Copy Location with Parameters || POST requests || Copies the URL including the parameters to the clipboard
 +
|-
 +
| Copy POST Parameters || POST requests || Copies the POST parameters to the clipboard
 +
|-
 +
| Copy Request Headers || all requests || Copies the headers of the request to the clipboard
 +
|-
 +
| Copy Response Headers || all requests || Copies the headers of the response to the clipboard
 +
|-
 +
| Copy Resonse Body || text file requests || Copies the response body to the system clipboard
 +
|-
 +
| Copy as cURL || all requests || Copies the request as a [[#Copying request as a cURL command|cURL command]] to the clipboard {{addedTag|version=1.12}}
 +
|-
 +
| Open in New Tab || all requests || Opens the resource in a new browser tab (uses the same HTTP method as the original request)
 +
|-
 +
| Open Response in New Tab || text file requests || Opens the response in a new browser tab
 +
|-
 +
| Stop Loading || loading requests || Stops loading the request
 +
|-
 +
| Resend || all requests || Sends the request again
 +
|-
 +
| Use in Command Line || all requests || Focuses the [[Command Line]] and makes the request available as <code>[[$p]]</code>.
 +
|-
 +
| Inspect in Script Panel || JavaScript requests || Allows to inspect the requested JavaScript inside the [[DOM Panel]]
 +
|-
 +
| Inspect in CSS Panel || CSS requests || Allows to inspect the requested style sheet definition inside the [[DOM Panel]]
 +
|-
 +
| Inspect in DOM Panel || all requests || Allows to inspect the request inside the [[DOM Panel]]
 +
|-
 +
| Break on XHR || XMLHttpRequests || Toggles the breakpoint for the request
 +
|-
 +
| Edit Breakpoint Condition... || XMLHttpRequests with set breakpoint || Opens the dialog for setting a [[#Breakpoint Column|conditional breakpoint]]
 +
|}
 +
 
 +
==== Copying a request as a cURL command ====
 +
cURL is a command line tool for transferring data with URL syntax. Firebug's Copy As cURL command recreates the HTTP request (including HTTP headers and query string parameters) and copies it as a cURL command string to the clipboard.<br/>
 +
The string can be pasted into a terminal window to execute the same request or for example pasted to a client that supports cURL.<br/>
 +
In cases where the server serves [http://en.wikipedia.org/wiki/HTTP_compression compressed responses] the preference [[Firebug_Preferences|net.curlAddCompressedArgument]] can be set to true and Firebug will add the <code>--compressed</code> argument to the generated command string.
 +
 
 +
* [http://curl.haxx.se/ cURL's homepage]
== See also ==
== See also ==
* [[Net Panel Architecture Review|Internal architecture of the Net panel]]
* [[Net Panel Architecture Review|Internal architecture of the Net panel]]
 +
 +
[[Category:Firebug]]
 +
[[Category:UI]]
 +
[[Category:Panels]]

Latest revision as of 05:58, 27 May 2014

Net Panel

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.

Contents

[edit] Options Menu

This menu is reachable via the little arrow in the panel tab ( NetPanelOptionsMenuArrow.png ) or by right-clicking on on the panel tab (since Firebug 1.9).

Option Preference Description
Enabled/Disabled extensions.firebug.net.enableSites Enables the Net Panel
Disable Browser Cache browser.cache.disk.enable
browser.cache.memory.enable
Disables/enables browser HTTP cache.
Show Paint Events extensions.firebug.netShowPaintEvents 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 dom.send_after_paint_to_content to true in order to see them.

Show BFCache Responses extensions.firebug.netShowBFCacheResponses 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.

[edit] Panel Toolbar

[edit] Break On XHR

Clicking the "Break On XHR" button ( Break On XHR Button.png ) enables a listener for XMLHttpRequests. If an XHR is made then, the debugger stops the script execution immediately and jumps to the Script Panel.

[edit] Clear

Removes all entries of the list of requests.

[edit] Persist

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.

[edit] Filters

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:

Filter Description file types
All Displays all requests All
HTML Limits display to markup files (X)HTML, XML, MathML, RSS, RDF
CSS Limits display to CSS files CSS
JavaScript Limits display to JavaScript files JS
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 Ctrl / while clicking the filter buttons. This feature was added in Firebug 1.12.

[edit] Search

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.

[edit] Request List

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:

Filter Description Example
Normal finished requests Requests fetched from the server NetRequestFinished.png
Loading requests Requests currently being fetched from the server NetRequestLoading.png
Cached requests Requests with response coming from the browser cache (HTTP status code 304) NetRequestCached.png
BFCached requests Requests with response coming from the BFCache NetRequestBFCached.png
Erroneous requests Requests, which returned an HTTP error (HTTP status code 4xx or 5xx) NetRequestError.png
Aborted requests Requests, which were aborted by the client NetRequestAborted.png

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 incl. the time when the load event was fired.

[edit] 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:

Tab Restriction Description
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 Content-Type of the request) and the raw data inside the Source section
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
Cookies Requests with cookies Lists the cookie information sent together with the request

There can be also other tabs coming from Firebug extensions.

[edit] Cache Info

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:

Info Description
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

[edit] Timeline

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.

[edit] Request Timeline

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.

Value Display Description
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
Receiving
 / 
 (from cache)
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 the 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 console.timeStamp()

[edit] 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.

[edit] Breakpoint Column

[edit] Setting breakpoints

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.

[edit] Breakpoint conditions

You can create a conditional breakpoint by right-clicking a breakpoint. Doing so opens the Breakpoint Condition Editor:

XHRBreakpointConditionEditor.png

There are variables available, which can be used within the expression:

Variable Description
$postBody Response content of the POST request
<parameter name> Parameters used within the POST request

[edit] Context Menu

[edit] Request list header

Option Description
URL Toggles the display of the column for the URL of the requests
Status Toggles the display of the column for the HTTP status of the requests
Protocol Toggles the display of the column for the protocol of the requests
Domain Toggles the display of the column for the domain of the requests
Size Toggles the display of the column for the size of the responses
Local IP Toggles the display of the column for the client's IP of the request
Remote IP Toggles the display of the column for the server IP of the request
Timeline Toggles the display of the column for the Timeline of the request
Reset Header Resets the column display to the default

[edit] Requests

Option Context Description
Copy Location all requests Copies the URL of the request to the clipboard
Copy URL Parameters requests with URL parameters Copies the URL parameters of the request to the clipboard
Copy Location with Parameters POST requests Copies the URL including the parameters to the clipboard
Copy POST Parameters POST requests Copies the POST parameters to the clipboard
Copy Request Headers all requests Copies the headers of the request to the clipboard
Copy Response Headers all requests Copies the headers of the response to the clipboard
Copy Resonse Body text file requests Copies the response body to the system clipboard
Copy as cURL all requests Copies the request as a cURL command to the clipboard Firebug 1.12
Open in New Tab all requests Opens the resource in a new browser tab (uses the same HTTP method as the original request)
Open Response in New Tab text file requests Opens the response in a new browser tab
Stop Loading loading requests Stops loading the request
Resend all requests Sends the request again
Use in Command Line all requests Focuses the Command Line and makes the request available as $p.
Inspect in Script Panel JavaScript requests Allows to inspect the requested JavaScript inside the DOM Panel
Inspect in CSS Panel CSS requests Allows to inspect the requested style sheet definition inside the DOM Panel
Inspect in DOM Panel all requests Allows to inspect the request inside the DOM Panel
Break on XHR XMLHttpRequests Toggles the breakpoint for the request
Edit Breakpoint Condition... XMLHttpRequests with set breakpoint Opens the dialog for setting a conditional breakpoint

[edit] Copying a request as a cURL command

cURL is a command line tool for transferring data with URL syntax. Firebug's Copy As cURL command recreates the HTTP request (including HTTP headers and query string parameters) and copies it as a cURL command string to the clipboard.
The string can be pasted into a terminal window to execute the same request or for example pasted to a client that supports cURL.
In cases where the server serves compressed responses the preference net.curlAddCompressedArgument can be set to true and Firebug will add the --compressed argument to the generated command string.

[edit] See also

Personal tools