前端开发必备之Chrome开发者工具（下篇）

本文介绍的 Chrome 开发者工具基于 Chrome 65版本，若是你的 Chrome 开发者工具没有下文提到的那些内容，请检查下 Chrome 的版本

本文是 前端开发必备之Chrome开发者工具（上篇） 的下篇，废话很少说，直接开始介绍。

网络面板（Network）

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

捕捉屏幕截图

Network 面板能够在页面加载期间捕捉屏幕截图。此功能称为幻灯片。

点击 摄影机 图标能够启用幻灯片。图标为灰色时，幻灯片处于停用状态 ()。若是图标为蓝色，则说明已启用 ()。

从新加载页面能够捕捉屏幕截图。屏幕截图显示在概览上方。

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

双击屏幕截图可查看放大版本。在屏幕截图处于放大状态时，使用键盘的向左和向右箭头能够在屏幕截图之间导航。

查看 DOMContentLoaded 和 load 事件信息

Network 面板突出显示两种事件：DOMContentLoaded 和 load。

解析页面的初始标记时会触发 DOMContentLoaded。 此事件将在 Network 面板上的两个地方显示：

1. Overview 窗格中的蓝色竖线表示事件。
2. 在 Summary 窗格中，您能够看到事件的确切时间。

页面彻底加载时将触发 load。此事件显示在三个地方：

1. Overview 窗格中的红色竖线表示事件。
2. Requests Table 中的红色竖线也表示事件。
3. 在 Summary 窗格中，您能够看到事件的确切时间。

导航时保留网络日志

默认状况下，每当您从新加载当前页面或者加载不一样的页面时，网络活动记录会被丢弃。启用 Preserve log 复选框能够在这些状况下保存网络日志。 新记录将附加到 Requests Table 的底部。

查看网络耗时

要查看 Network 面板中给定条目完整的耗时信息，您有三种选择。

1. 将鼠标悬停到 Timeline 列下的耗时图表上。这将呈现一个显示完整耗时数据的弹出窗口。
2. 点击任何条目并打开该条目的 Timing 标签。
3. 使用 Resource Timing API 从 JavaScript 检索原始数据。

下面的代码能够在 DevTools 的 Console 中运行。 它将使用 Network Timing API 检索全部资源。 而后，它将经过查找是否存在名称中包含“style.css”的条目对条目进行过滤。 若是找到，将返回相应条目。

performance.getEntriesByType('resource').filter(item => item.name.includes("style.css"))

Queuing

若是某个请求正在排队，则指示：

• 请求已被渲染引擎推迟，由于该请求的优先级被视为低于关键资源（例如脚本/样式）的优先级。 图像常常发生这种状况。
• 请求已被暂停，以等待将要释放的不可用 TCP 套接字。
• 请求已被暂停，由于在 HTTP 1 上，浏览器仅容许每一个源拥有六个 TCP 链接。
• 生成磁盘缓存条目所用的时间（一般很是迅速）

Stalled/Blocking

请求等待发送所用的时间。 能够是等待 Queueing 中介绍的任何一个缘由。 此外，此时间包含代理协商所用的任什么时候间。

Proxy Negotiation

与代理服务器链接协商所用的时间。

DNS Lookup

执行 DNS 查询所用的时间。 页面上的每个新域都须要完整的往返才能执行 DNS 查询。

Initial Connection / Connecting

创建链接所用的时间，包括 TCP 握手/重试和协商 SSL 的时间。

SSL

完成 SSL 握手所用的时间。

Request Sent / Sending

发出网络请求所用的时间。 一般不到一毫秒。

Waiting (TTFB)

等待初始响应所用的时间，也称为至第一字节的时间。 此时间将捕捉到服务器往返的延迟时间，以及等待服务器传送响应所用的时间。

Content Download / Downloading

接收响应数据所用的时间。

诊断网络问题

经过 Network 面板能够发现大量可能的问题。查找这些问题须要很好地了解客户端与服务器如何通讯，以及协议施加的限制。

已被加入队列或已被中止的系列

最多见问题是一系列已被加入队列或已被中止的条目。这代表正在从单个网域检索太多的资源。在 HTTP 1.0/1.1 链接上，Chrome 会将每一个主机强制设置为最多六个 TCP 链接。若是您一次请求十二个条目，前六个将开始，然后六个将被加入队列。最初的一半完成后，队列中的第一个条目将开始其请求流程。

要为传统的 HTTP 1 流量解决此问题，您须要实现域分片。也就是在您的应用上设置多个子域，以便提供资源。而后，在子域之间平均分配正在提供的资源。

HTTP 1 链接的修复结果不会应用到 HTTP 2 链接上。事实上，前者的结果会影响后者。 若是您部署了 HTTP 2，请不要对您的资源进行域分片，由于它与 HTTP 2 的操做方式相反。在 HTTP 2 中，到服务器的单个 TCP 链接做为多路复用链接。这消除了 HTTP 1 中的六个链接限制，而且能够经过单个链接同时传输多个资源。

至第一字节的漫长时间

又称：大片绿色

等待时间长表示至第一字节的时间 (TTFB) 漫长。建议将此值控制在 200 毫秒如下。长 TTFB 会揭示两个主要问题之一。

1. 客户端与服务器之间的网络条件较差
2. 服务器应用的响应慢

要解决长 TTFB，首先请尽量缩减网络。理想的状况是将应用托管在本地，而后查看 TTFB 是否仍然很长。若是仍然很长，则须要优化应用的响应速度。能够是优化数据库查询、为特定部分的内容实现缓存，或者修改您的网络服务器配置。不少缘由均可能致使后端缓慢。您须要调查您的软件并找出未知足您的性能预算的内容。

若是本地托管后 TTFB 仍然漫长，那么问题出在您的客户端与服务器之间的网络上。不少事情均可以阻止网络遍历。客户端与服务器之间有许多点，每一个点都有其本身的链接限制并可能引起问题。测试时间是否缩短的最简单方法是将您的应用置于其余主机上，并查看 TTFB 是否有所改善。

达到吞吐量能力

又称：大片蓝色

若是您看到 Content Download 阶段花费了大量时间，则提升服务器响应或串联不会有任何帮助。首要的解决办法是减小发送的字节数。

模拟网络链接

利用网络调节，您能够在不一样的网络链接（包括 Edge、3G，甚至离线）下测试网站。这样能够限制出现最大的下载和上传吞吐量（数据传输速率）。延迟时间操控会强制链接往返时间 (RTT) 出现最小延迟。

能够经过 Network 面板开启网络调节。从下拉菜单中选择要应用网络节流和延迟时间操控的链接。

性能面板（Performance）

使用 Chrome DevTools 的 Timeline 面板能够记录和分析您的应用在运行时的全部活动。 这里是开始调查应用中可觉察性能问题的最佳位置。

面板概览

Timeline 面板包含如下四个窗格：

1. Controls。开始记录，中止记录和配置记录期间捕获的信息。
2. Overview。 页面性能的高级汇总。更多内容请参见下文。
3. 火焰图。 CPU 堆叠追踪的可视化。
   您能够在火焰图上看到一到三条垂直的虚线。蓝线表明 DOMContentLoaded 事件。 绿线表明首次绘制的时间。 红线表明 load 事件。
4. Details。选择事件后，此窗格会显示与该事件有关的更多信息。 未选择事件时，此窗格会显示选定时间范围的相关信息。

Overview 窗格

Overview 窗格包含如下三个图表：

1. FPS。每秒帧数。绿色竖线越高，FPS 越高。 FPS 图表上的红色块表示长时间帧，极可能会出现卡顿。
   2.CPU。 CPU 资源。此面积图指示消耗 CPU 资源的事件类型。
2. NET。每条彩色横杠表示一种资源。横杠越长，检索资源所需的时间越长。 每一个横杠的浅色部分表示等待时间（从请求资源到第一个字节下载完成的时间）。

深色部分表示传输时间（下载第一个和最后一个字节之间的时间）。

横杠按照如下方式进行彩色编码：

• HTML 文件为蓝色。
• 脚本为黄色。
• 样式表为紫色。
• 媒体文件为绿色。
• 其余资源为灰色。

内存面板（Memory）

该面板主要能作：

• 使用 Chrome 的任务管理器了解您的页面当前正在使用的内存量。
• 使用 Timeline 记录可视化一段时间内的内存使用。
• 使用堆快照肯定已分离的 DOM 树（内存泄漏的常见缘由）。
• 使用分配时间线记录了解新内存在 JS 堆中的分配时间。

应用面板（Application）

该面板主要能作：

• 查看和修改本地存储与会话存储。
• 检查和修改 IndexedDB 数据库。
• 对 Web SQL 数据库执行语句。
• 查看应用缓存和服务工做线程缓存。
• 点击一次按钮便可清除全部存储、数据库、缓存和服务工做线程。

安全面板（Security）

该面板主要能作：

• 使用 Security Overview 能够当即查看当前页面是否安全。
• 检查各个源以查看链接和证书详情（安全源）或找出具体哪些请求未受保护（非安全源）。

检查源

使用左侧面板能够检查各个安全或非安全源。

点击安全源查看该源的链接和证书详情。

若是您点击非安全源，Security 面板会提供 Network 面板过滤视图的连接。

点击连接能够查看具体是源的哪些请求经过 HTTP 提供。

主菜单（Customize and control DevTools）

模拟传感器：地理定位与加速度计

因为大多数桌面设备都没有 GPS 芯片和加速度计，因此测试它们比较困难。Chrome DevTools 的 Sensors 模拟窗格能够经过模拟常见的移动设备传感器来下降测试的开销。

• 模拟地理定位坐标以测试地理定位替换值。
• 模拟设备方向以测试加速度计数据。

要访问 Chrome DevTools 传感器控件，请执行如下操做：

1. 打开 DevTools 主菜单
2. 在 More Tools 菜单下，点击 Sensors

注：若是您的应用检测到使用 JavaScript（如 Modernizr）的传感器加载，请确保在启用传感器模拟器以后从新加载页面。

替换地理定位数据

与桌面设备不一样，移动设备一般使用 GPS 硬件检测位置。在 Sensors 窗格中，您能够模拟地理定位坐标，以便与 Geolocation API 结合使用。

在模拟抽屉式导航栏的 Sensors 窗格中选中 Emulate geolocation coordinates 复选框，启用地理定位模拟。

您可使用此模拟器替换 navigator.geolocation 的位置值，并在地理定位数据不可用时模拟用例。

模拟加速度计（设备方向）

要测试来自 Orientation API 的加速度计数据，请在 Sensors 窗格中选中 Accelerometer 复选框，启用加速度计模拟器。

您能够操做下列方向参数：

• α：围绕 Z 轴旋转。
• β：左右倾斜。
• γ：先后倾斜。

您也能够点击模型加速度计并将其拖动到所需方向。

总结

Chrome开发者工具是一个很是强大的工具，灵活使用将让你在前端调试中事半功倍。

这两篇文章只是整理的一些我平时经常使用的功能，还有不少的功能等着咱们去挖掘。

参考资料

https://developers.google.com/web/tools/chrome-devtools/