1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
|
---
title: Network Monitor
slug: Tools/Network_Monitor
translation_of: Tools/Network_Monitor
---
<div>{{ToolsSidebar}}</div><p>网络监视器显示所有火狐浏览器发送的网络请求（例如：加载网页或者<a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequests</a>请求），每个请求耗费的时间，和每个请求的详细信息。在"Web Developer"菜单选择"Network"选项，打开网络监视器(对于MAC的火狐浏览器来说, 在"Tools"的子菜单),或者打开开发工具盒子,点击"Network"标签。</p>
<p>网络监视器显示在浏览器的底部。重新加载页面查看发送的请求信息：</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/13535/1-new-overview-small.png" style="display: block; height: 831px; margin-left: auto; margin-right: auto; width: 1100px;"></p>
<h2 id="UI_overview">UI overview</h2>
<p>UI分成了四个主要部分:</p>
<ul>
<li>主屏幕包含 <a href="/en-US/docs/Tools/Network_Monitor#Toolbar">工具栏</a>, <a href="/en-US/docs/Tools/Network_Monitor#Network_request_list">网络请求列表</a>, <a href="/en-US/docs/Tools/Network_Monitor#Network_request_details">网络请求面板</a>:</li>
</ul>
<p><img alt="" src="https://mdn.mozillademos.org/files/13266/nm-pieces.png" style="display: block; height: 850px; margin-left: auto; margin-right: auto; width: 962px;"></p>
<h2 id="Network_request_list_网络请求列表">Network request list 网络请求列表</h2>
<p>默认地，网络监视器显示一个页面加载过程中发送的所有网络请求。每个网络请求单独一行显示。<br>
<img alt="" src="https://mdn.mozillademos.org/files/13537/5-new-request-list-new.png" style="display: block; height: 257px; margin-left: auto; margin-right: auto; width: 900px;"></p>
<p>默认地，当跳转到其他页面或者刷新当前页面， 当前的网络监视器信息会被清除。从Firefox31版本开始，在开发工具的<a href="https://developer.mozilla.org/en-US/docs/Tools_Toolbox#Common_preferences">Settings</a>设置中勾上"Enable persistent logs"就可以修改网络监视器的上述默认行为。</p>
<h3 id="Network_request_fields_网络请求显示属性">Network request fields 网络请求显示属性</h3>
<p>每行显示：</p>
<ul>
<li><strong>√</strong>: 响应结果的状态码。被显示为一个颜色图标：绿色表示成功(2xx的状态码)，橙色表示重定向(3XX),红色表示错误(4XX和5XX).从Firefox 30开始,在图标的后面显示状态码。</li>
<li><strong>Method</strong>: HTTP请求方法</li>
<li><strong>File</strong>: 请求的URL</li>
<li><strong>Domain</strong>: 请求的域名</li>
<li><strong>Type</strong>: 响应体的类型</li>
<li><strong>Size</strong>: 响应报文体的大小</li>
</ul>
<p>The toolbar at the top labels these columns, and clicking the label sorts all the requests by that column.</p>
<p>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:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7403/nm-image-preview.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<h3 id="Timeline">Timeline</h3>
<p>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 <a href="/en-US/docs/Tools/Network_Monitor#Timings">Timings</a> page.</p>
<h3 id="Filtering_by_content_type">Filtering by content type</h3>
<p>At the bottom of the window a row of buttons enables you to filter requests by the content type of the response:<img alt="" src="https://mdn.mozillademos.org/files/7395/nm-filter-by-type.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<p>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.</p>
<h3 id="Context_menu_上下文菜单">Context menu 上下文菜单</h3>
<p>Context-clicking on a row in the list displays a context menu with the following options:</p>
<ul>
<li>Open in New Tab浏览器新打开一个窗口</li>
<li>Copy URL拷贝URL</li>
<li>Copy as cURL (only from Firefox 31 onwards)</li>
<li>Copy Image as Data URI (only for images)</li>
<li>Edit and Resend 编辑和重发</li>
<li>Start <a href="/en-US/docs/Tools/Network_Monitor#Performance_analysis">Performance Analysis</a> for the page 开始对当前页面进行性能分析</li>
</ul>
<h4 id="Edit_and_Resend_编辑和重发">Edit and Resend 编辑和重发</h4>
<p>This option opens an editor enabling you to edit the request's method, URL, parameters, and headers, and resend the request.</p>
<h4 id="Copy_as_cURL">Copy as cURL</h4>
<div class="geckoVersionNote">
<p>This feature is new in Firefox 31.</p>
</div>
<p>This option copies the network request to the clipboard as a <a href="http://curl.haxx.se/">cURL</a> command, so you can execute it from a command line. The command may include the following options:</p>
<table class="standard-table">
<tbody>
<tr>
<td><code>-X [METHOD]</code></td>
<td>If the method is not GET or POST</td>
</tr>
<tr>
<td><code>--data</code></td>
<td>For URL encoded request parameters</td>
</tr>
<tr>
<td><code>--data-binary</code></td>
<td>For multipart request parameters</td>
</tr>
<tr>
<td><code>--http/VERSION</code></td>
<td>If the HTTP version is not 1.1</td>
</tr>
<tr>
<td><code>-I</code></td>
<td>If the method is HEAD</td>
</tr>
<tr>
<td><code>-H</code></td>
<td>One for each request parameter</td>
</tr>
</tbody>
</table>
<h2 id="Network_request_details_网络请求细节">Network request details 网络请求细节</h2>
<p>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.、</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/13274/nm-headers-annotated.png" style="display: block; height: 872px; margin-left: auto; margin-right: auto; width: 1870px;">The tabs at the top of this pane enable you to switch between five different pages:</p>
<ul>
<li><strong>Headers 消息头</strong></li>
<li><strong>Cookies</strong></li>
<li><strong>Params 请求参数</strong></li>
<li><strong>Response 响应结果</strong></li>
<li><strong>Timings</strong></li>
</ul>
<p>From Firefox 30 onwards, there's a sixth page that appears only if the content type is HTML, the <strong>Preview</strong> page.</p>
<p>Clicking the icon to the left of the tabs closes the pane and returns you to the list view.</p>
<h3 id="Headers_消息头标签">Headers 消息头标签</h3>
<p>消息头标签显示请求的基本信息，包括URL和状态码。显示的是请求头和响应头的信息。</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7397/nm-headers.png" style="display: block; margin-left: auto; margin-right: auto;">可以过滤显示的消息头：</p>
<h3 id="Cookies标签"><img alt="" src="https://mdn.mozillademos.org/files/7399/nm-headers-filtered.png" style="display: block; margin-left: auto; margin-right: auto;">Cookies标签</h3>
<p>这个标签显示了所有请求和响应发送的全部cookies。</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7391/nm-cookies.png" style="display: block; margin-left: auto; margin-right: auto;">和消息头一样，可以过滤cookies。</p>
<h3 id="Params_请求参数标签">Params 请求参数标签</h3>
<p>该标签显示GET方法和POST方法发送的请求参数。</p>
<h3 id="Response_响应标签"><img alt="" src="https://mdn.mozillademos.org/files/7407/nm-params.png" style="display: block; margin-left: auto; margin-right: auto;">Response 响应标签</h3>
<p>显示完整的响应信息。如果响应结果是HTML，JS或者CSS文件，响应结果被当做文本显示：</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7413/nm-response-html.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<p>如果响应类型是JSON，那么该标签显示一个JSON对象：</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7421/nm-response-json.png" style="display: block; margin-left: auto; margin-right: auto;">如果响应结果是图片，那么该标签显示的是图片的预览图：</p>
<h3 id="Timings"><img alt="" src="https://mdn.mozillademos.org/files/7415/nm-response-image.png" style="display: block; margin-left: auto; margin-right: auto;">Timings</h3>
<p>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:<img alt="" src="https://mdn.mozillademos.org/files/7417/nm-timings.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<h3 id="Preview_预览">Preview 预览</h3>
<div class="geckoVersionNote">
<p>Firefox 30新增加的功能</p>
</div>
<p>From Firefox 30 onwards, if the file type is HTML a sixth tab appears labeled "Preview". This renders just that HTML:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7401/nm-html-preview.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<h2 id="Performance_analysis_性能分析">Performance analysis 性能分析</h2>
<div class="geckoVersionNote">
<p>Firefox 29新加入性能分析工具。</p>
</div>
<p>从Firefox 29版本开始，网络监视器包含了一个性能分析工具。性能分析工具显示浏览器加载网页各个部分所花费的时间。<br>
点击网络监视器底部的秒表图标，就可以打开性能分析工具。</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7411/nm-performance-button.png" style="display: block; margin-left: auto; margin-right: auto;">(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.)</p>
<p>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:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7409/nm-performance.png" style="display: block; margin-left: auto; margin-right: auto;">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.</p>
<p>To get back to the Network Monitor's list of network requests click the "Back" button on the left.</p>
<p>Clicking on a slice of the pie takes you to the Network Monitor for that run, with a filter automatically applied to see <a href="/en-US/docs/Tools/Network_Monitor#Filtering_by_content_type">only that resource type</a>.</p>
|
