initial commit

4 files changed, 659 insertions, 0 deletions

diff --git a/files/zh-cn/tools/network_monitor/index.html b/files/zh-cn/tools/network_monitor/index.html
new file mode 100644
index 0000000000..64ae2463c3
--- /dev/null
+++ b/files/zh-cn/tools/network_monitor/index.html
@@ -0,0 +1,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>
diff --git a/files/zh-cn/tools/network_monitor/performance_analysis/index.html b/files/zh-cn/tools/network_monitor/performance_analysis/index.html
new file mode 100644
index 0000000000..e2096ad0bc
--- /dev/null
+++ b/files/zh-cn/tools/network_monitor/performance_analysis/index.html
@@ -0,0 +1,43 @@
+---
+title: 性能分析工具
+slug: Tools/Network_Monitor/Performance_Analysis
+tags:
+  - 工具
+  - 开发工具
+  - 指南
+  - 火狐
+  - 网络
+  - 调试
+translation_of: Tools/Network_Monitor/Performance_Analysis
+---
+<p>{{ToolsSidebar}}</p>
+
+<p>网络监视器包括了一个性能分析工具，来帮助你查看浏览器在你的网站上使用了多长时间来下载每种资源</p>
+
+<h2 id="使用性能分析工具">使用性能分析工具</h2>
+
+<p>如果要使用性能分析工具，请点击工具栏上的停表按钮.</p>
+
+<p>(如果你只是打开了网络监视器，那么它还没有填充请求列表，你会在主窗口得到一个停表按钮.)</p>
+
+<p>网络监视器会加载这个网站两次: 第一次浏览器没有缓存, 第二次浏览器会使用缓存. 这样能模拟出用户第一次访问该网站的情况和之后的浏览情况. 它会并排或在窗口过窄时垂直显示每次运行的结果:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16277/network_performance.png" style="border: 1px solid black; display: block; height: 1176px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+<p>每次运行结果的总结都会显示在面板和饼图上. 面板有资源类型、每种资源的总大小和每种资源读取的总时间. 旁边的饼图显示每种资源大小的占比.</p>
+
+<p>若要返回到网络监视器，请点击左侧的“返回”按钮.</p>
+
+<p>点击饼状图的任何一个部分都会切换到显示当次的网络性能分析数据，并且自动地<a href="/en-US/docs/Tools/Network_Monitor/request_list#Filtering_requests">仅保持你所点击的类型的资源的相关信息可见</a>.</p>
+
+<h2 id="网络性能分析工具相关特性">网络性能分析工具相关特性</h2>
+
+<p>下面的文章包含了关于使用网络性能分析工具的不同方面的信息:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor/Toolbar">工具栏</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor/request_list">网络请求列表</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor/request_details">网络请求详情</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor/recording">网络日志记录</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor/Throttling">节流</a></li>
+</ul>
diff --git a/files/zh-cn/tools/network_monitor/request_details/index.html b/files/zh-cn/tools/network_monitor/request_details/index.html
new file mode 100644
index 0000000000..9ee16fbe29
--- /dev/null
+++ b/files/zh-cn/tools/network_monitor/request_details/index.html
@@ -0,0 +1,376 @@
+---
+title: Network request details
+slug: Tools/Network_Monitor/request_details
+tags:
+  - Dev Tools
+  - Firefox
+  - Networking
+translation_of: Tools/Network_Monitor/request_details
+---
+<p>{{ToolsSidebar}}</p>
+
+<p>如果你点击网络请求列表的某项，这个请求的详细信息面板就会出现。这个面板提供了关于这个请求的详细信息。</p>
+
+<h2 id="Network_request_details">Network request details</h2>
+
+<p>点击某个请求之后，在右侧显示了一个新的如下的面板，展现了这个请求的详细信息。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16261/network_request_details.png" style="display: block; height: 741px; margin-left: auto; margin-right: auto; width: 930px;"></p>
+
+<p>面板上部有一些选项卡，可以让你在不同的页面切换。选项如下：</p>
+
+<ul>
+ <li><strong>Headers</strong></li>
+ <li><strong>Cookies</strong></li>
+ <li><strong>Params</strong></li>
+ <li><strong>Response</strong></li>
+ <li><strong>Cache</strong></li>
+ <li><strong>Timings</strong></li>
+ <li><strong>Security </strong>（仅在安全请求下出现）</li>
+ <li><strong>Stack trace</strong> （仅在请求有堆栈的情况下出现，也就是说请求是脚本调用其他脚本的时候）。Firefox 55 添加。</li>
+</ul>
+
+<p>点击面板上<a href="/en-US/docs/Tools/Network_Monitor#Toolbar">工具栏</a>最左侧的图标可以关闭本面板，返回请求列表。</p>
+
+<h3 id="Headers">Headers</h3>
+
+<p>你可以在请求头上右键菜单里以 json 格式复制一些或者全部的信息：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16731/response_headers_68.png" style="border: 1px solid black; display: block; height: 267px; margin: 0px auto; width: 397px;"><strong>复制</strong>选项只复制你选中的键值对，<strong>复制全部</strong>选项会以一个标准的 json 格式复制 headers 的全部值：</p>
+
+<pre class="brush: json">{
+  "Response headers (1.113 KB)": {
+    "headers": [
+      {
+        "name": "accept-ranges",
+        "value": "bytes"
+      },
+      {
+        "name": "age",
+        "value": "0"
+      },
+      {
+        "name": "backend-timing",
+        "value": "D=74716 t=1560258099074460"
+      },
+      {
+        "name": "cache-control",
+        "value": "private, must-revalidate, max-age=0"
+      },
+      {
+        "name": "content-disposition",
+        "value": "inline; filename=api-result.js"
+      },
+      {
+        "name": "content-encoding",
+        "value": "gzip"
+      },
+      {
+        "name": "content-length",
+        "value": "673"
+      },
+      {
+        "name": "content-type",
+        "value": "text/javascript; charset=utf-8"
+      },
+      {
+        "name": "date",
+        "value": "Tue, 11 Jun 2019 13:01:39 GMT"
+      },
+      {
+        "name": "mediawiki-login-suppressed",
+        "value": "true"
+      },
+      {
+        "name": "p3p",
+        "value": "CP=\"This is not a P3P policy! See https://en.wikipedia.org/wiki/Special:CentralAutoLogin/P3P for more info.\""
+      },
+      {
+        "name": "server",
+        "value": "mw1316.eqiad.wmnet"
+      },
+      {
+        "name": "server-timing",
+        "value": "cache;desc=\"pass\""
+      },
+      {
+        "name": "strict-transport-security",
+        "value": "max-age=106384710; includeSubDomains; preload"
+      },
+      {
+        "name": "vary",
+        "value": "Accept-Encoding,Treat-as-Untrusted,X-Forwarded-Proto,Cookie,Authorization,X-Seven"
+      },
+      {
+        "name": "via",
+        "value": "1.1 varnish (Varnish/5.1), 1.1 varnish (Varnish/5.1)"
+      },
+      {
+        "name": "x-analytics",
+        "value": "ns=-1;special=Badtitle;WMF-Last-Access=11-Jun-2019;WMF-Last-Access-Global=11-Jun-2019;https=1"
+      },
+      {
+        "name": "x-cache",
+        "value": "cp1075 pass, cp1075 pass"
+      },
+      {
+        "name": "x-cache-status",
+        "value": "pass"
+      },
+      {
+        "name": "x-client-ip",
+        "value": "204.210.158.136"
+      },
+      {
+        "name": "x-content-type-options",
+        "value": "nosniff"
+      },
+      {
+        "name": "X-Firefox-Spdy",
+        "value": "h2"
+      },
+      {
+        "name": "x-frame-options",
+        "value": "SAMEORIGIN"
+      },
+      {
+        "name": "x-powered-by",
+        "value": "HHVM/3.18.6-dev"
+      },
+      {
+        "name": "x-search-id",
+        "value": "esvan0r5bnnwscyk2wq09i1im"
+      },
+      {
+        "name": "x-varnish",
+        "value": "766019457, 417549316"
+      }
+    ]
+  },
+  "Request headers (665 B)": {
+    "headers": [
+      {
+        "name": "Accept",
+        "value": "*/*"
+      },
+      {
+        "name": "Accept-Encoding",
+        "value": "gzip, deflate, br"
+      },
+      {
+        "name": "Accept-Language",
+        "value": "en-US,en;q=0.5"
+      },
+      {
+        "name": "Connection",
+        "value": "keep-alive"
+      },
+      {
+        "name": "Cookie",
+        "value": "WMF-Last-Access=11-Jun-2019; WMF-Last-Access-Global=11-Jun-2019; mwPhp7Seed=5c9; GeoIP=US:NY:Port_Jervis:41.38:-74.67:v4"
+      },
+      {
+        "name": "DNT",
+        "value": "1"
+      },
+      {
+        "name": "Host",
+        "value": "en.wikipedia.org"
+      },
+      {
+        "name": "Referer",
+        "value": "https://www.wikipedia.org/"
+      },
+      {
+        "name": "TE",
+        "value": "Trailers"
+      },
+      {
+        "name": "User-Agent",
+        "value": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:68.0) Gecko/20100101 Firefox/68.0"
+      }
+    ]
+  }
+}</pre>
+
+<p>Header 选项卡有三个主要部分，上部列出了请求的基本信息：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16262/Network_Monitor_Closeup.png" style="border: 1px solid black; display: block; height: 747px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+<p>这包括了：</p>
+
+<ul>
+ <li>请求的信息</li>
+ <li><strong>HTTP 请求的</strong>header</li>
+ <li><strong>响应的 header</strong></li>
+</ul>
+
+<h4 id="请求的信息"><strong>请求的信息</strong></h4>
+
+<ul>
+ <li><strong>请求的 URL</strong></li>
+ <li><strong>请求的方法</strong></li>
+ <li><strong>远端IP地址</strong>和<strong>端口</strong></li>
+ <li>一个问号图标的<strong>状态码</strong>，连接到关于这个状态码详情的页面。可以参阅 MDN 上的<a href="/zh-CN/docs/Web/HTTP/Headers">HTTP Headers 文档</a>。</li>
+ <li><strong>Edit and Resend</strong> 按钮<a href="/en-US/docs/Tools/Network_Monitor/request_list/#Edit_and_Resend">编辑后重新发送</a>请求。</li>
+ <li>A <strong>Raw headers</strong> button to display the raw request and response headers.</li>
+ <li>The HTTP version used</li>
+ <li>The <strong>Referrer Policy</strong>, which governs which referrer information, sent in the <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer" title="The Referer request header contains the address of the previous web page from which a link to the currently requested page was followed. The Referer header allows servers to identify where people are visiting them from and may use that data for analytics, logging, or optimized caching, for example."><code>Referer</code></a> header, should be included with requests. (See <a href="/en-US/docs/Web/HTTP/Headers/Referrer-Policy">Referrer-Policy</a> for a description of possible values)</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16266/network_headers.png" style="border: 1px solid black; display: block; height: 295px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+<p>You can filter the headers that are displayed.</p>
+
+<p>Starting in Firefox 67, in addition to showing information about known trackers in the list, the request information section of the Headers panel also shows an icon and a message if the request is to a site that is associated with a known tracker ({{bug("1485416")}}).</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16600/tracker_in_header_panel.png" style="border: 1px solid black; display: block; height: 335px; margin: 0px auto; width: 402px;"></p>
+
+<h4 id="Response_headers"><strong>Response headers</strong></h4>
+
+<p>The response headers section shows details about the response. If you hover over a line in the response headers section, a question mark links to the documentation for that response header, if available.</p>
+
+<div class="blockIndicator note">
+<p>If you noticed that the keys in the response header are all in lowercase, while the request headers keys are not, that is by design.</p>
+</div>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16441/response_headers.png" style="border: 1px solid black; display: block; height: 327px; margin: 0px auto; width: 435px;"></p>
+
+<h4 id="Request_headers"><strong>Request</strong> headers</h4>
+
+<p>The Request headers section shows details about the request headers. If you hover over a line in the request headers section, a question mark links to the documentation for that request header, if available.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16442/request_headers.png" style="border: 1px solid black; display: block; height: 223px; margin: 0px auto; width: 435px;"></p>
+
+<h3 id="Cookies">Cookies</h3>
+
+<p>This tab lists full details of any cookies sent with the request or response:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16265/network_cookies.png" style="border: 1px solid black; display: block; height: 748px; margin-left: auto; margin-right: auto; width: 2276px;"></p>
+
+<p>As with headers, you can filter the list of cookies displayed. The full list of cookie attributes is shown—see the following screenshot showing Response cookies with further attributes shown.</p>
+
+<p><img alt="cookies panel in firefox devtools network monitor, showing a number of cookie attributes including samesite" src="https://mdn.mozillademos.org/files/16108/highlight-samesite-attribute.png" style="display: block; height: 394px; margin: 0px auto; width: 1047px;"></p>
+
+<p>The <code>samesite</code> attribute has been shown since Firefox 62 ({{bug("1452715")}}).</p>
+
+<h3 id="Params">Params</h3>
+
+<p>This tab displays the GET parameters and POST data of a request:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16333/params.png" style="display: block; height: 215px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+<h3 id="Response">Response</h3>
+
+<p>The complete content of the response. If the response is HTML, JS, or CSS, it will be shown as text:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16268/network_response.png" style="border: 1px solid black; display: block; height: 747px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+<p>If the response is JSON, it will be shown as an inspectable object:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16332/response_json.png" style="display: block; height: 268px; margin: 0 auto; width: 900px;"></p>
+
+<p>If the response is an image, the tab displays a preview:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16331/response_pane_image.png" style="display: block; height: 347px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+<h4 id="Cache">Cache</h4>
+
+<p>If the response is cached (i.e. a 304), the Cache tab will display details about that cached resource.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16329/response_cache.png" style="border: 1px solid black; display: block; height: 245px; margin: 0px auto; width: 567px;"></p>
+
+<p>These details include:</p>
+
+<ul>
+ <li><strong>Last fetched:</strong> The date the resource was last fetched</li>
+ <li><strong>Fetched count:</strong> The number of times in the current session that the resource has been fetched</li>
+ <li><strong>Data size:</strong> The size of the resource.</li>
+ <li><strong>Last modified:</strong> The date the resource was last modified.</li>
+ <li><strong>Expires:</strong> The date the resource expires.</li>
+ <li><strong>Device:</strong> The device the resource was fetched from (e.g. "disk").</li>
+</ul>
+
+<h4 id="HTML_preview">HTML preview</h4>
+
+<p>If the response is HTML, a preview of the rendered HTML appears inside the Response tab, above the response payload.</p>
+
+<h3 id="Timings">Timings</h3>
+
+<p>The Timings tab breaks a network request down into the following subset of the stages defined in the <a href="https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/HAR/Overview.html">HTTP Archive</a> specification:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Name</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Blocked</td>
+   <td>
+    <p>Time spent in a queue waiting for a network connection.</p>
+
+    <p>The browser imposes a limit on the number of simultaneous connections that can be made to a single server. In Firefox this defaults to 6, but can be changed using the <code><a href="http://kb.mozillazine.org/Network.http.max-persistent-connections-per-server">network.http.max-persistent-connections-per-server</a></code> preference. If all connections are in use, the browser can't download more resources until a connection is released.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>DNS resolution</td>
+   <td>Time taken to resolve a host name.</td>
+  </tr>
+  <tr>
+   <td>Connecting</td>
+   <td>Time taken to create a TCP connection.</td>
+  </tr>
+  <tr>
+   <td>Sending</td>
+   <td>Time taken to send the HTTP request to the server.</td>
+  </tr>
+  <tr>
+   <td>Waiting</td>
+   <td>Waiting for a response from the server.</td>
+  </tr>
+  <tr>
+   <td>Receiving</td>
+   <td>Time taken to read the entire response from the server (or cache).</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>It presents a more detailed, annotated, view of the timeline bar for that request showing how the total wait time is split into the various stages:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16271/network_timings.png" style="border: 1px solid black; display: block; height: 749px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+<h3 id="Security">Security</h3>
+
+<p>If the site is being served over HTTPS, you get an extra tab labeled "Security". This contains details about the secure connection used including the protocol, the cipher suite, and certificate details:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16269/network_security.png" style="border: 1px solid black; display: block; height: 748px; margin-left: auto; margin-right: auto; width: 2276px;"></p>
+
+<p>The Security tab shows a warning for security weaknesses. Currently it warns you about two weaknesses:</p>
+
+<ol>
+ <li>Using SSLv3 instead of TLS</li>
+ <li>Using the RC4 cipher</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10165/security-warning.png" style="display: block; height: 93px; margin-left: auto; margin-right: auto; width: 591px;"></p>
+
+<h3 id="Stack_trace">Stack trace</h3>
+
+<p>Stack traces are shown in the <em>Stack Trace</em> tab, for responses that have a stack trace of course.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16270/network_stack_trace.png" style="border: 1px solid black; display: block; height: 205px; margin: 0px auto; width: 900px;"></p>
+
+<h2 id="Network_Monitor_Features">Network Monitor Features</h2>
+
+<p>The following articles cover different aspects of using the network monitor:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor/Toolbar">Toolbar</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor/request_list">Network request list</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor/recording">Network traffic recording</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor/Performance_Analysis">Performance analysis</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor/Throttling">Throttling</a></li>
+</ul>
diff --git a/files/zh-cn/tools/network_monitor/toolbar/index.html b/files/zh-cn/tools/network_monitor/toolbar/index.html
new file mode 100644
index 0000000000..f9418facda
--- /dev/null
+++ b/files/zh-cn/tools/network_monitor/toolbar/index.html
@@ -0,0 +1,53 @@
+---
+title: Network monitor toolbar
+slug: Tools/Network_Monitor/toolbar
+translation_of: Tools/Network_Monitor/toolbar
+---
+<p>{{ToolsSidebar}}</p>
+
+<p>网络监视器提供了两条工具栏，一个在主窗口上面, 还有一个在下面.</p>
+
+<h2 id="工具栏">工具栏</h2>
+
+<p>第一个工具栏在网络监视器窗口的上面.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16247/network_toolbar.png" style="display: block; height: 98px; margin-left: auto; margin-right: auto; width: 1200px;"></p>
+
+<p>它们提供:</p>
+
+<ul>
+ <li>用于清理 <a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor/request_list">网络请求列表</a> 的按钮</li>
+ <li>一个盒子让你能够使用URL和属性 <a href="/en-US/docs/Tools/Network_Monitor/request_list#Filtering_requests">过滤请求</a>.</li>
+ <li>一组按钮让你可以按类型过滤网络请求:
+  <ul>
+   <li>按响应的内容类型</li>
+   <li>XHR请求</li>
+   <li>WebSocket upgrades (WS 标签)</li>
+  </ul>
+ </li>
+ <li>在默认情况下, the Network Monitor is cleared each time you navigate to a new page or reload the current page. 你可以点击“持续日志”复选框来更改它的行为.</li>
+ <li>一个复选框可以让你禁用缓存.</li>
+ <li>Throttling</li>
+ <li>HAR</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16248/network_monitor_bottom_toolbar.png" style="border: 1px solid black; height: 48px; width: 2010px;"></p>
+
+<p>第二个工具栏在网络监视器底部，它提供:</p>
+
+<ul>
+ <li>一个启动 <a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor/Performance_analysis">性能分析</a> 的按钮</li>
+ <li>一个对此页面的总结, 包括请求数量、总大小和总时间.</li>
+</ul>
+
+<h2 id="Network_Monitor_Features">Network Monitor Features</h2>
+
+<p>The following articles cover different aspects of using the network monitor:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor/request_list">网络请求列表</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor/request_details">Network request details</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor/recording">Network traffic recording</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor/Performance_Analysis">性能分析</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor/Throttling">Throttling</a></li>
+</ul>