开篇概述

     由于最近忙于公司产品的架构与研发，已经三个多月没有写博客了，收到有些朋友的来信，问为什么不及时更新博客内容呢，他们说他们正期待着某些内容。对此，非常抱歉，那么我在此也给各位朋友一些承诺，从即日起，无论再忙，也想办法抽出时间保证每周至少一篇文章。好了，废话不多说了，进入我们的主题吧，《详解Google Chrome浏览器（操作篇）（下）》

      建议大家在阅读本篇文章前，先阅读前面写的两篇文章，即详解google Chrome浏览器（理论篇）和详解Google Chrome浏览器（操作篇）（上） 以求在内容上的系统性、连贯性和整体性。本篇文章将接着上篇文章“详解Google Chrome浏览器（操作篇）（上）”写，主要内容包括Google Chrome DevTools NetWork,TimeLine,Application,Security等方面。

正文

1、NetWork

 （1）NetWork面板截图

（2）简要分析

  a.使用网络面板了解请求和下载的资源文件并优化网页加载性能。

  b.网络面板基础。Network 面板记录页面上每个网络操作的相关信息，包括详细的耗时数据、HTTP 请求与响应标头和 Cookie，等等。

   (a)使用 Network 面板记录和分析网络活动。

   (b)整体或单独查看资源的加载信息。

   (c)过滤和排序资源的显示方式。

   (d)保存、复制和清除网络记录。

   (e)根据需求自定义 Network 面板。

  c.资源时间轴。（详细参照：https://developers.google.cn/web/tools/chrome-devtools/network-performance/understanding-resource-timing?hl=zh-cn）

  d.带宽限制（详细参照：https://developers.google.cn/web/tools/chrome-devtools/network-performance/network-conditions?hl=zh-cn）

  e. 过滤条件

    (a).选择框内可按照关键字过滤。Regex表示支持正则表达式

    (b).指定条件搜索。

    domain：资源所在的域，即url中的域名部分。如 domain:api.github.com

    has-response-header：资源是否存在响应头，无论其值是什么。如 has-response-header：Access-Control-Allow-Origin

    is：当前时间点在执行的请求。当前可用值：running

    larger-than：显示大于指定值大小规格的资源。单位是字节(B),但是K(kB)和M(MB)也是可以的~ 如larger-than:150K

    method：使用何种HTTP请求方式。如 GET

    mime-type：也写作content-type，是资源类型的标识符。如 text/html

    scheme：协议规定。如 HTTPS

    set-cookie-name：服务器设置的cookies名称

    set-cookie-value：服务器设置的cookies的值

    set-cookie-domain：服务器设置的cookies的域

    status-code：HTTP响应头的状态码

 （3）实际操作

  操作1：NetWork面板概览

  Network 面板由五个窗格组成：

   a.Controls。使用这些选项可以控制 Network 面板的外观和功能。

   b.Filters。 使用这些选项可以控制在 Requests Table 中显示哪些资源。提示：按住 Cmd (Mac) 或 Ctrl(Windows/Linux) 并点击过滤器可以同时选择多个过滤器。

   c.Overview。 此图表显示了资源检索时间的时间线。如果您看到多条竖线堆叠在一起，则说明这些资源被同时检索。

   d.Requests Table。 此表格列出了检索的每一个资源。 默认情况下，此表格按时间顺序排序，最早的资源在顶部。点击资源的名称可以显示更多信息。 提示：右键

点击 Timeline 以外的任何一个表格标题可以添加或移除信息列。

   e.Summary。 此窗格可以一目了然地告诉您请求总数、传输的数据量和加载时间。

默认情况下，Requests Table 会显示以下列。您可以添加和移除列。

 操作2：记录网络活动

 在 Network 面板打开时，DevTools 在默认情况下会记录所有网络活动。 要记录活动，只需在面板打开时重新加载页面，或者等待当前加载页面上的网络活动。

您可以通过 record 按钮指示 DevTools 是否记录。 显示红色 (

) 表明 DevTools 正在记录。 显示灰色 (

) 表明 DevTools 未在记录。 点击此按钮可以开始或停止记录，也可以按键盘快捷键 Cmd/Ctrl+e。

 操作3：在记录期间捕捉屏幕截图

 a.Network 面板可以在页面加载期间捕捉屏幕截图。此功能称为幻灯片。点击摄影机图标可以启用幻灯片。图标为灰色时，幻灯片处于停用状态 (

)。如果图标为蓝色，则说明已启用 (

)。

重新加载页面可以捕捉屏幕截图。屏幕截图显示在概览上方。

b.将鼠标悬停在一个屏幕截图上时，Timeline 将显示一条黄色竖线，指示帧的捕捉时间。