Chrome development tools学习笔记(4)

时间：2015-04-19 01:14:30 阅读：170 评论：0 收藏：0 [点我收藏+]

利用NetWork工具来评估网页性能

NetWork工具记录了Web页面上的每一次网络操作，包括详细的请求时间数据、HTTP的请求和响应、以及WebSocket传输的数据等等。有时候我们会发现我们自己的网页加载比较慢，而其他访问网站速度正常。这时候就可以考虑通过NewWork工具来找出性能瓶颈进行优化。

关于Resource Timing API

NewWork工具使用了Resource Timing API，Resource Timing API允许我们获取一个文档中与某个资源相关的所有时间信息。Resource Timing API通过window对象的performance属性暴露出来。我们可以使用其中的getEntriesByType()方法来获取页面中每一个资源的时间信息。getEntriesByType()方法会返回一系列PerformanceResourceTiming对象，每一个PerformanceResourceTiming都是当前页面的一个资源请求。

例如，当我们在DevTools的Console中输入以下命令：

window.performance.getEntries()[0]

这句代码为我们显示了当前页面上的第一个资源加载的时间数据。

这里的时间单位是毫秒，在Chrome中通过window.performance.now() 方法可以实现这么高的精度。下面的这张图为以上的这些的属性提供了一个形象的图形表示。但是如果获取的资源是来自不同的域，以上的这些属性并不是都可以使用：

如果一个资源是从第三方获取的，那么必须提供一个额外的HTTP头部属性(Timing-Allow-Origin: *)，只有这样我们才能够使用上面提到的所有的网络时间信息。如果没有提供这个属性，我们唯一可以获取的数据是请求的持续时间。

还要补充下的是，Resource Timing API不只可以在DevTools中使用，Chrome 25+，IE 10+，Opera 15+桌面浏览器都已经支持了这个API。在移动端，最新版本的安卓浏览器已经支持了这个API。可以通过以下代码来检测是否支持Resource Timing API。

if ( !(‘performance‘ in window) ||
     !(‘getEntriesByType‘ 
       in window.performance) ||
     !(window.performance.getEntriesByType(‘resource‘) 
       instanceof Array)
  ) {
  // API not supported
} else {
   // API supported
}

NetWork面板使用概述

当使用DevTools的时候，所有的网络活动都会在NetWork面板中被记录下来。当刚打开DevTools的时候，NetWork面板里面可能是空的，刷新页面或者等待页面发起HTTP请求。就可以看到NetWork面板中记录下了当前发生的网络活动。

NetWork面板中的每一条记录代表了一次网络请求，其中每一列的含义如下：

Name and Path，分别显示了资源的的名称和URL路径。
Method，HTTP请求的方法，例如我们常提到的GET和POST。
Status and Text，HTTP的状态码和文字信息。常见的有200 OK、404 Not Found等等。
Domain，资源请求的域名。
Type，被请求的资源的MIME类型。
Initiator，发起请求的对象或者过程，它的值有下列几种：Parser表示Chrome的HTML解析器，Redirect表示HTTP重定向，Script表示脚本，Other其他例如超链接或者在地址栏输入地址。
Size and Content，Size指的是请求资源传输时的大小，Content指的是资源实际的大小。很多网站为了加快载入速度，服务器会对资源进行压缩处理（如GZip），而客户端会进行解压缩处理，所以Size和Content的大小一般不一样。关于他们的区别，在Stack OverFlow上面有人给出了详细的解释Chrome Dev Tools - “Size” vs “Content”。如果是从缓存读取的数据，会显示「(from cache)」
Time and Latency，Time是从请求开始到接收到最后一个字节的总时长，Latency是从请求开始到接收到第一个字节的时间。
Timeline，显示网络请求的可视化瀑布流，鼠标悬停在某一个时间线上，可以显示整个请求各部分花费的时间。

当在NetWork中看到显示为红色的记录的时候，表示当前请求发生了错误，记得以前做一个页面UI变化的功能，发现新的UI在有的电脑上载入非常缓慢，通过NetWork工具的查看，发现是某个js调用了Google的统计功能，而由于Google在大陆无法访问的缘故，导致了连接被阻塞引起页面载入缓慢。

在浏览的时候保持NetWork记录

在默认情况下，当你访问新的页面或者重新载入当前页面的时候，NetWork下面记录的网络请求会被清空。勾选了Preserve log之后，NetWork的记录会保持住不会随着新的页面访问或者刷新而被清空。（Chrome官方文档说的通过点击来保持NewWork记录在我用的Chrome浏览器中是无效的，这个按钮只起到了开启和停止Network记录的作用，当开启NetWork记录时，原来显示在NetWork工具中的记录会被清空）

排序和筛选

默认的情况下，NetWork工具中显示的记录是按照发起请求的时间来排序的。可以点击每一列的头部来切换排序字段，以及升降序。

Timeline这一列有点特殊，点击的时候，会弹出一个额外的排序菜单。

Timeline的排序菜单中每一项含义如下：

Timeline，按照每次请求的开始时间排序。NetWork中默认的排序就是这个，它和下面的Start Time其实是一样的。
Start Time，和Timeline是一样的效果。
Response Time，按照请求的响应时间排序。
End Time，按照每个请求完成的先后排序。
Duration，按照每个请求的持续时间排序。
Latency，按照请求开始到接收到第一个字节的时间排序。

点击NetWork工具中的内容类型，可以对请求的类型进行筛选，例如当选中Stylesheets的时候，将只会显示所有的样式请求。

高级筛选

除了对资源类型进行筛选外，还可以进一步的缩小筛选范围。例如要查看所有HTTP状态为200的请求，可以通过在筛选框中输入StatusCode:200来实现。

在使用Elements工具的时候，我就已经感受到了DevTools自动补全的强大了，在NetWork工具中，DevTools同样实现了强大的自动完成功能。例如对StatusCode进行筛选，当按下「:」之后，会把当前NetWork记录中的出现过的状态码都列出来，不会列出那些没有被记录到的状态码。从程序员的角度来说，是个很不错的细节。

再顺便说下，官方文档https://developer.chrome.com/devtools/docs/network#advanced-filtering 中提到了在筛选条件中输入「-」即为筛选不满足条件的记录例如「-StatusCode:200」，但是在我的Chrome中试了下似乎没有起作用。

高级筛选中的筛选条件有很多种，就不一一赘述了，具体可以看官方的文档，我相信大多数的时候，我们都是直接输入内容对Name和Path进行筛选的。

增加和移除列

NetWork工具中除了之前讲的那些默认显示的项目，我们可以右击NetWork记录表的头部，来增加或者移除某个显示项目。

上面的三个按钮，从左往右作用分别是清空NetWork记录列表，显示/隐藏筛选栏，切换简单/详细NetWork记录列表。

保存和复制NetWork记录信息

在NetWork记录上右击，会弹出一个操作菜单，我们可以对复制或者保存当前选中的记录信息

Copy as cURL，cURL是在命令行下进行HTTP传输的工具，通过Copy as cURL，可以将选中的资源请求以cURL命令的方式复制到剪贴板中。
Save as HAR with content，有时候我们需要把Network里面内容传给别人，这时候可以通过Save as HAR with content将当前请求保存为一个HAR文件，然后可以通过一些第三方工具进行重现网络信息。
Replay XHR，如果选中的是XHR请求的话，会出现此选项，方便我们再一次发送此XHR请求。