The Network Monitor shows you all the network requests Firefox makes (for example, when it loads a page, or due to XMLHttpRequests), how long each request takes, along with other details. To open the monitor select "Network" from the "Web Developer" menu (which is a submenu in the "Tools" menu on the Mac), or open the Developer Toolbox and switch to the "Network" tab.
The DevTools Window will appear at the bottom of the browser window by default, with the Network Monitor activated. Reload the page to see the requests:
Network request list
By default, the Network Monitor shows a list of all the network requests made in the course of loading the page. Each request is displayed in its own row:
Network request fields
Each row displays:
- √: the HTTP status code returned. This is displayed as a color-coded icon: green for success (2XX codes), orange for redirection (3XX), or red for errors (4XX and 5XX). To see the exact code, hover over the icon.
- Method: the HTTP request method
- File: basename of the file requested
- Domain: domain of the path requested
- Type:
Content-typeof the response - Size: size of the response
The toolbar at the top labels these columns, and clicking the label sorts all the requests by that column.
Timeline
The request list also displays a timeline for the different parts of each request:
Each timeline is given a horizontal position in its row relative to the other network requests, so you can see the total time taken to load the page.
Filtering by content type
At the bottom of the window a row of buttons enables you to filter requests by the content type of the response:
Clearing the network request list is new in Firefox 28.
From Firefox 28 onwards, at the far right of this row is a button labeled "Clear": as you might guess, this enables you to clear the network request list.
Network request details
Clicking on the row displays a new pane in the right-hand side of the network monitor, which provides more detailed information about the request.
The tabs at the top of this pane enable you to switch between five different pages:
- Headers
- Cookies
- Params
- Response
- Timings
Clicking the icon to the left of the tabs closes the pane and returns you to the list view.
Headers
This tab lists basic information about the request including URL and status code, as well as the HTTP request and response headers that were sent:
You can filter the headers that are displayed:
Cookies
This tab lists full details of any cookies sent with the request or response:
As with headers, you can filter the list of cookies displayed.
Params
This tab displays the GET parameters and POST data of a request:
Response
The complete content of the response. If the response is HTML, JS, or CSS, it will be shown as text:
If the response is JSON, it will be shown as an inspectable object:
If the response is an image, the tab displays a preview:
Timings
The Timings tab has a more detailed, annotated, view of the timeline bar for that request showing how the total wait time is split into the various stages:
Performance analysis
The performance analysis tool is new in Firefox 29.
From Firefox 29 onwards, the Network Monitor includes a performance analysis tool, to help show you how long the browser takes to download the different parts of your site.
To run the performance analysis tool click the stopwatch icon in the toolbar at the bottom of the Network Monitor:
(Alternatively, if you have only just opened the Network Monitor, so it's not yet populated with the list of requests, you'll get a stopwatch icon in the main window.)
The Network Monitor then loads the site twice: once with an empty browser cache, and once with a primed browser cache. This simulates the first time a user visits your site, and subsequent visits. It displays the results for each run side by side, or vertically if the browser window is narrow:
The results for each run are summarised in a table and a pie chart. The tables group resources by type, and show the total size of each resource and the total time it took to load them. The accompanying pie chart shows the relative size of each resource type.
To get back to the Network Monitor's list of network requests click the "Back" button on the left.
Clicking on a slice of the pie takes you to the Network Monitor for that run, with a filter automatically applied to see only that resource type.