Network Monitor - Firefox 开发者工具 编辑

网络监视器显示所有火狐浏览器发送的网络请求（例如：加载网页或者XMLHttpRequests请求），每个请求耗费的时间，和每个请求的详细信息。在"Web Developer"菜单选择"Network"选项，打开网络监视器(对于MAC的火狐浏览器来说, 在"Tools"的子菜单),或者打开开发工具盒子,点击"Network"标签。

网络监视器显示在浏览器的底部。重新加载页面查看发送的请求信息：

UI overview

UI分成了四个主要部分:

• 主屏幕包含 工具栏, 网络请求列表, 网络请求面板:

Network request list 网络请求列表

默认地，网络监视器显示一个页面加载过程中发送的所有网络请求。每个网络请求单独一行显示。

默认地，当跳转到其他页面或者刷新当前页面， 当前的网络监视器信息会被清除。从Firefox31版本开始，在开发工具的Settings设置中勾上"Enable persistent logs"就可以修改网络监视器的上述默认行为。

Network request fields 网络请求显示属性

每行显示：

• √: 响应结果的状态码。被显示为一个颜色图标：绿色表示成功(2xx的状态码)，橙色表示重定向(3XX),红色表示错误(4XX和5XX).从Firefox 30开始,在图标的后面显示状态码。
• Method: HTTP请求方法
• File: 请求的URL
• Domain: 请求的域名
• Type: 响应体的类型
• Size: 响应报文体的大小

The toolbar at the top labels these columns, and clicking the label sorts all the requests by that column.

From Firefox 30 onwards, if the file is an image, the row includes a thumbnail of the image, and hovering over the filename shows a preview in a tooltip:

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. For more details on the color-coding used here, see the section on the Timings 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:

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.

Context menu 上下文菜单

Context-clicking on a row in the list displays a context menu with the following options:

• Open in New Tab浏览器新打开一个窗口
• Copy URL拷贝URL
• Copy as cURL (only from Firefox 31 onwards)
• Copy Image as Data URI (only for images)
• Edit and Resend 编辑和重发
• Start Performance Analysis for the page 开始对当前页面进行性能分析

Edit and Resend 编辑和重发

This option opens an editor enabling you to edit the request's method, URL, parameters, and headers, and resend the request.

Copy as cURL

This feature is new in Firefox 31.

This option copies the network request to the clipboard as a cURL command, so you can execute it from a command line. The command may include the following options:

Network request details 网络请求细节

Clicking on a 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

From Firefox 30 onwards, there's a sixth page that appears only if the content type is HTML, the Preview page.

Clicking the icon to the left of the tabs closes the pane and returns you to the list view.

Headers 消息头标签

消息头标签显示请求的基本信息，包括URL和状态码。显示的是请求头和响应头的信息。

可以过滤显示的消息头：

Cookies标签

这个标签显示了所有请求和响应发送的全部cookies。

和消息头一样，可以过滤cookies。

Params 请求参数标签

该标签显示GET方法和POST方法发送的请求参数。

Response 响应标签

显示完整的响应信息。如果响应结果是HTML，JS或者CSS文件，响应结果被当做文本显示：

如果响应类型是JSON，那么该标签显示一个JSON对象：

如果响应结果是图片，那么该标签显示的是图片的预览图：

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:

Preview 预览

Firefox 30新增加的功能

From Firefox 30 onwards, if the file type is HTML a sixth tab appears labeled "Preview". This renders just that HTML:

Performance analysis 性能分析

Firefox 29新加入性能分析工具。

从Firefox 29版本开始，网络监视器包含了一个性能分析工具。性能分析工具显示浏览器加载网页各个部分所花费的时间。
点击网络监视器底部的秒表图标，就可以打开性能分析工具。

(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.