HTML5技术

详解Google Chrome浏览器(操作篇)(下) - Alan_beijing

字号+ 作者:H5之家 来源:H5之家 2017-05-16 13:00 我要评论( )

开篇概述 由于最近忙于公司产品的架构与研发,已经三个多月没有写博客了,收到有些朋友的来信,问为什么不及时更新博客内容呢,他们说他们正期待着某些内容。对此,非常抱歉,那么我在此也给各位朋友一些承诺,从即日起,无论再忙,也想办法抽出时间保证每周

开篇概述

     由于最近忙于公司产品的架构与研发,已经三个多月没有写博客了,收到有些朋友的来信,问为什么不及时更新博客内容呢,他们说他们正期待着某些内容。对此,非常抱歉,那么我在此也给各位朋友一些承诺,从即日起,无论再忙,也想办法抽出时间保证每周至少一篇文章。好了,废话不多说了,进入我们的主题吧,《详解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。 此窗格可以一目了然地告诉您请求总数、传输的数据量和加载时间。

Network 面板的窗格

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

 操作2:记录网络活动

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

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

记录按钮打开

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

记录按钮关闭

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

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

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

已停用幻灯片

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

已启用幻灯片

)。

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

带幻灯片的记录

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

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • vue.js 初体验— Chrome 插件开发实录 - 腾讯云技术社区

    vue.js 初体验— Chrome 插件开发实录 - 腾讯云技术社区

    2017-05-13 13:00

  • html5的localstorage详解 - 风雨后见彩虹

    html5的localstorage详解 - 风雨后见彩虹

    2017-05-09 13:00

  • html5的web存储详解 - Cythia-milk

    html5的web存储详解 - Cythia-milk

    2017-05-04 16:00

  • ASP.NET Core MVC 源码学习:详解 Action 的激活 - Savorboard

    ASP.NET Core MVC 源码学习:详解 Action 的激活 - Savorboard

    2017-04-14 13:04

网友点评