Chrome DevTools 使用
本文参考：
概览
- Elements
- Console
- Source
- Network
- Performance
- Memory
- Application
- Security
- Audits
快捷键
访问 DevTools
| 访问 DevTools | Windows |
|---|---|
| 打开 Developer Tools | F12、Ctrl + Shift + I |
| 打开/切换检查元素模式和浏览器窗口 | Ctrl + Shift + C |
| 打开 Developer Tools 并聚焦到控制台 | Ctrl + Shift + J |
全局键盘快捷键
| 全局快捷键 | Windows |
|---|---|
| 下一个面板 | Ctrl + ] |
| 上一个面板 | Ctrl + [ |
| 更改停靠位置 | Ctrl + Shift + D |
| 刷新忽略缓存内容的页面 | Ctrl + F5、Ctrl + Shift + R |
| 在所有源中搜索文本 | Ctrl + Shift + F |
| 按文件名搜索 | Ctrl + O、Ctrl + P |
按面板分类的键盘快捷键
Elements
| Elements 面板 | Windows |
|---|---|
| 隐藏元素 | H |
| 切换为以 HTML 形式编辑 | F2 |
Styles 边栏
| Styles 边栏 | Windows |
|---|---|
| 转到源中样式规则属性声明行 | Ctrl + 点击属性 |
| 在颜色定义值之间循环 | Shift + 点击颜色选取器框 |
| 以 10 为增量增大/减小值 | Shift + Up、Shift + Down |
| 以 0.1 为增量增大/减小值 | Alt + 向上键、Alt + 向下键 |
Sources
| Sources 面板 | Windows |
|---|---|
| 暂停/继续脚本执行 | F8、Ctrl + \ |
| 越过下一个函数调用 | F10、Ctrl + ' |
| 进入下一个函数调用 | F11、Ctrl + ; |
| 跳出当前函数 | Shift + F11、Ctrl + Shift + ; |
| 转到行 | Ctrl + G |
| 转到成员 | Ctrl + Shift + O |
- 键盘快捷键参考
- 打开 Developer Tools（
F12） --> 转到设置（F1）--> 点击 Shortcuts
Elements 面板
- 检查和调整页面
- 编辑样式
- 编辑 DOM
检查和编辑页面与样式
- 检查和实时编辑 DOM 树中的任何元素
- Styles 窗格中查看和更改任何选定元素的 CSS Rules
- Computed 窗格中查看和修改选定元素的盒模型
编辑样式
- 利用 Styles 窗格，可以在本地以尽可能多的方法更改 CSS ，包括修改现有样式、添加新样式，以及为样式添加规则
- 如果希望样式可以保持（刷新后不会消失），则需要将其保存到开发工作区中
检查应用到元素的样式
Styles 窗格可以显示应用到选定元素的 CSS 规则，优先级从高到低：
- 顶端为
element.style - 下方是与元素匹配的任何 CSS 规则
- 再下方是继承的样式，其中包括与选定元素的祖先实体匹配的任何可继承样式规则
元素应用到的样式
添加、启用和停用 CSS 类
点击 .cls 按钮可查看与当前选定元素关联的所有 CSS 类
- 启用或停用当前与元素关联的类
- 向元素添加新类
.cls 按钮
向样式规则添加背景色或颜色
Styles 窗格提供了一个用于向样式规则添加 color 和 background-color 声明的快捷方式。
添加color等属性的快捷方式
使用 Color Picker 修改颜色
点击颜色声明值左侧带颜色的小方格，即可打开 Color Picker 。
color-picker 简介
- 取色器
- 当前颜色
- 当前值
- 调色板
- 着色和阴影选择器
- 色调选择器
- 不透明度选择器
- 颜色值选择器
- 调色板选择器
编辑 DOM
- 定义你的页面结构
- 通过渲染的 DOM 实时编辑页面的内容和结构
- 无法在 Elements 面板中通过 DOM 更改修改源文件
- 使用 DOM 断点留意 DOM 更改
滚动到视图
点击右键节点并选择 Scroll into View
设置 DOM 断点
可用于调试复杂的 JavaScript 应用，在发生下列一种 DOM 更改时触发断点：子树更改、属性更改、节点移除
与 DOM 断点交互
触发 DOM 断点时，断点将在 DOM Breakpoints 窗格中突出显示。 Call Stack 窗格将显示调试程序暂停的原因
查看元素事件侦听器
在 Event Listeners 窗格中查看与 DOM 节点关联的 JavaScript 事件侦听器
Event Listeners 窗格
Console 面板
- 使用控制台面板
- 命令行交互
使用控制台
- 堆叠冗余消息，或者将其显示在各自的行上
- 清除或保留页面之间的输出，或者将其保存到文件中
- 按严重性等级、通过隐藏网络消息或者按正则表达式模式对输出进行过滤
处理控制台历史记录
保留历史记录：启用控制台顶部的 Preserve log 复选框可以在页面刷新或更改之间保留控制台历史记录。消息会一直存储，直到清除控制台或关闭标签。
选择执行环境
Execution Context Selector
一般，执行环境默认为top（页面的顶部框架）。
如果要查看 <iframe> 元素的日志输出，并修改该环境中存在的某个变量，需要从 Execution Context Selector 下拉菜单中选中该元素，另外开发者很少需要在 top 以外的任意环境中操作。
Execution Context Selector 设置为该 <iframe> 的环境
其他设置
Console 其他设置
| 设置 | 说明 |
|---|---|
| Hide network | 默认情况下，控制台将报告网络问题。启用此设置将指示控制台不显示这些错误的日志。例如不会记录 404 和 500 系列错误 |
| Log XMLHttpRequests | 确定控制台是否记录每一个 XMLHttpRequest |
| Preserve log | 在页面刷新或导航时保留控制台历史记录 |
| Show timestamps | 在调用时向显示的每条控制台消息追加一个时间戳。对于发生特定事件时的调试非常实用。这会停用消息堆叠 |
Source 面板
- 断点调试
- 调试混淆的代码
- 使用开发者工具的Workspaces（工作区）进行持久化保存
使用断点调试代码
| 断点类型 | 说明 |
|---|---|
| Line-of-code | 在确切的代码区域 |
| Conditional Line-of-code | 在确切的代码区域，但仅在某些条件为真时 |
| DOM | 在更改或删除特定 DOM 节点或其子节点的代码时 |
| XHR | 当 XHR 的 URL 包含某字符串时 |
| Event Litener | 在触发事件（如click）之后运行的代码上 |
| Exception | 在抛出捕获或未捕获异常的代码行上 |
| Function | 当调用特定函数时 |
XHR
在 XHR Breakpoints 中添加断点，如图所示，当匹配到 URL 中包含'org'字符时，代码暂停执行。
添加 XHR 断点
Network 面板
- 网络面板基础
- 资源时间轴
- 网络带宽限制
测量资源加载时间
- 使用 Network 面板记录和分析网络活动
- 整体或单独查看资源的加载信息
- 过滤和排序资源的显示方式
- 保存、复制和清除网络记录
Network 面板概览
Network 面板由五个窗格组成：
- Controls
- Filters
- OverView：显示了资源检索时间的时间线，如果多条竖线堆叠在一起，说明这些资源被同时检索
- Requests Table
- Summary
Network 面板
默认情况下，Requests Table 会显示以下列。
- Name：资源的名称
- Status：HTTP 状态代码
- Type：已请求资源的 MIME 类型
- Initiator：发起请求的对象或进程。值为以下选项之一：
- Parser：Chrome 的 HTML 解析器发起请求
- Redirect：HTTP 重定向发起请求
- Script：脚本发起请求
- Other：某些其他进程或操作发起请求，例如用户通过链接或者在地址栏中输入网址导航到页面。
- Size：响应头（通常为数百字节）加响应正文（由服务器提供）的组合大小
- Time：从请求开始至在响应中接收到最终字节的总持续时间
- Timeline：显示所有网络请求的可视瀑布
在记录期间捕捉屏幕截图
点击摄影机图标可以启用幻灯片功能，即页面加载期间捕捉屏幕截图。
查看 DOMContentLoaded 和 load 事件信息
解析页面的初始标记时会触发 DOMContentLoaded 。
DOMContentLoaded
页面完全加载时将触发 Load。
Load
查看单个资源的详细信息
点击资源名称，可查看与该资源更多的信息，下面四个标签最常见：
- Headers：与资源关联的 HTTP 标头
- Preview：JSON、图像和文本资源的预览
- Response：HTTP 响应数据（如果存在）
- Timing：资源请求生命周期的精细分解
产看网络耗时
鼠标悬停在 Timeline 图表内的资源上，可查看网络耗时信息
网络耗时信息
查看 HTTP 标头
Headers 标签可以显示资源的请求网址、HTTP 方法以及响应状态代码。 此外，该标签还会列出 HTTP 响应和请求标头、它们的值以及任何查询字符串参数。
查看 Cookie
点击 Cookies 标签可以查看在资源的 HTTP 请求和响应标头中传输的 Cookie 表。 只有传输 Cookie 时，此标签才可用。
查看资源发起者和依赖项
按住 Shift 并将鼠标悬停在资源上，可查看其发起者和依赖项。将悬停部分的资源称为目标，目标上方绿色编码资源为目标的发起者，下方红色编码资源为都是目标的依赖项。
资源发起者和依赖项
优化网络性能的相关资源
- 使用 PageSpeed Insights 确定可以应用到您网站的性能最佳做法
- 网页性能最佳做法提供了更多用于优化您的网页或应用的网络性能的提示
资源时间轴
Resource Timing API 提供了与接收各个资源的时间有关的大量详细信息。请求生命周期的主要阶段如下图所示。
请求生命周期的主要阶段
在 Devtools 中查看
资源耗时信息
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)
等待初始响应所用的时间，也称为至第一字节（Time To First Byte）的时间。 此时间将捕捉到服务器往返的延迟时间，以及等待服务器传送响应所用的时间。
Content Download / Downloading
接收响应数据所用的时间。
至第一字节的漫长时间
又称：大片绿色
大片绿色
等待时间长表示至第一字节的时间 (TTFB) 漫长。建议将此值控制在200 毫秒以下。
要解决长TTFB，首先尽可能地缩减网络。理想情况是将应用托管在本地，若TTFB仍然很长，则需要优化应用的响应速度。可以是优化数据库查询、为特定部分的内容实现缓存，或者修改您的网络服务器配置。
达到吞吐量能力
又称：大片绿色
大片蓝色
如果 Content Download 阶段花费了大量时间，首要的解决办法是减少发送的字节数。
Performance 面板
- 查看性能
- 分析运行时性能
- 诊断强制的同步布局
使用 Timeline 工具
- 执行 Timeline 记录，分析页面加载或用户交互后发生的每个事件
- 在 Overview 窗格中查看 FPS、CPU 和网络请求
- 点击火焰图中的事件以查看与其相关的详细信息
- 放大显示一部分记录以简化分析
Timeline 面板概览
Timeline 面板包含以下四个窗格：
- Controls：开始记录，停止记录和配置记录期间捕获的信息
- Overview：页面性能的高级汇总
- 火焰图：CPU 堆叠追踪的可视化。火焰图上有三条垂直的虚线，蓝线代表 DOMContentLoaded 事件，绿线代表首次绘制的时间，红线代表 load 事件
- Details：选择事件后，此窗格会显示与该事件有关的更多信息。 未选择事件时，此窗格会显示选定时间范围的相关信息。
TimeLine 面板
Overview 窗格
Overview 窗格包含以下三个图表：
- FPS：每秒帧数。绿色竖线越高，FPS 越高。 FPS 图表上的红色块表示长时间帧，很可能会出现卡顿
- CPU：CPU 资源。此面积图指示消耗 CPU 资源的事件类型。
- NET：每条彩色横杠表示一种资源。横杠越长，检索资源所需的时间越长。 横杠按照以下方式进行彩色编码：
- HTML 文件为蓝色
- 脚本为黄色
- 样式表为紫色
- 媒体文件为绿色
- 其他资源为灰色
OverView 窗格
分析运行时性能
- 不要编写会强制浏览器重新计算布局的 JavaScript
- CSS 不要过于复杂
- 选择根本不会触发布局的 CSS
- 绘制比任何其他渲染活动花费的时间都要多
诊断强制同步布局
收集数据
- 演示地址
- 打开 Performance 面板
- 点击页面上的 Start 启动动画
- 点击 Performance 面板上的 Record 按钮开始记录
- 等待几秒后，再次点击 Record 按钮停止记录
完成记录后，应看到如下图所示的内容。
收集数据记录
确定问题
在 Timeline 记录的 Summary 窗格中可以看出浏览器在渲染上花费的时间最多。如果可以优化页面布局操作，就可以减少花费在渲染上的时间。
要使动画流畅，就需要使 FPS 达到 60。
现在，将调用栈放大：
函数调用栈
堆栈的顶端是 Animation Frame Fired 事件。在 Animation Frame Fired 下方，可以看到 Function Call，在它的下方，看到 update。可以推断名为 update() 的方法是 requestAnimationFrame() 的回调。
现在，将注意力转移到 update 事件下方的所有紫色小事件上。 许多这些事件的顶部为红色，那是警告标志。 将鼠标悬停在这些事件上方，可以看到 DevTools 在警告页面可能会被强制自动重排。
点击其中一个布局事件可以选择它。在 Summary 窗格中，会看到与此事件有关的详细信息。 点击 Layout Forced (update @ forcedsync.html:457) 下面的链接跳转到函数定义。
诊断问题
现在，在 Sources 面板中应看到函数定义
跳转至函数定义
update() 函数是 requestAnimationCallback() 的回调处理程序。 处理程序会根据每个图像的 offsetTop 值计算其 left 属性。 这将强制浏览器立即执行新布局，以便确保其提供正确的值。在每个动画帧期间强制布局是导致页面上出现动画卡顿的原因。
在 DevTools 中应用修复
打开 Console 面板，在 Console 中重新定义函数。从 HTML 文件复制函数定义，并将其粘贴到 DevTools 的 Console 中。删除使用 offsetTop 的语句并取消注释其下面的语句。 完成后，按 Enter。
修复问题
现在，重启动画。可以直观地验证现在顺畅多了。
使用另一个记录验证
优化后效果
