你不知道的 Chrome DevTools 调试技巧（一）

Chrome DevTools 作为前端开发过程中的常用调试工具，拥有很强大的功能，但是日常开发中我们可能仅仅只使用了很小一部分常用功能，了解一些不常用的小技巧，会起到事半功倍的效果。本文只是简单介绍有哪些可用的功能，只负责揭开面纱，详细的使用如需要可自行查询。

前言

文中所述的一些功能是 Chrome Canary 的试行功能，需下载 Canary （金丝雀）版后，输入 chrome://flags/#enable-devtools-experiments 将 Developer Tools experiments 设置为 Enabled。

这样就能在 Settings 中看见 Experiments 选项，勾选对应功能如 CSS Overview 后重启浏览器，就可以使用该功能。

1. 使用 CSS Overview 面板查看 CSS 信息

CSS Overview 面板中可以看到一些有意思的 CSS 信息，比如：

• 页面特有的颜色

• 媒体查询（以及指向相关css源的链接）

• 各种css选择器统计（例如类选择器与id选择器）

注：这是 Chrome Canary 的一个试行功能。

2. 用预置或自定义地址重写地理位置

JavaScript 可以这样获取你的地理位置：

navigator.geolocation.getCurrentPosition(console.log)

在 Chrome DevTools 的 Sensors 面板中，你可以用预置的或者自己定义的地址重写经纬度。该功能可以用来调试使用地理位置的页面。操作如下：

• 打开 Sensor 面板（如图操作或快捷键 Ctrl Shift P 输入 sensor 回车）

• 选择一个预置地址或点击 Manage 自定义新的地址（地名，经纬度）

• 在 Console 面板下输入 navigator.geolocation.getCurrentPosition(console.log) 观察地址变化。

3. 捕获代码覆盖率和性能记录

在性能录制期间可以自动捕获代码覆盖率，可以在页面重新加载时或者已加载页面常规交互时（如页面滚动时）进行操作。同时获取代码覆盖率和性能面板记录能帮助你深入研究性能瓶颈。

Coverage 录制结果展示了录制过程中加载的所有 JS 和 CSS 文件，以及每个文件的大小、运行时覆盖率，汇总数据（页面底部的状态栏）。单击单个静态资源能将其在 Sources 面板中打开，代码行号的左边用红绿色的条来标识代码是否在录制过程中被执行到（红色未执行，绿色已执行）。

Chrome Canary 的一个试行功能。

4. 性能监视器的新性能指标

快捷键 Ctrl Shift P 输入Show Performance Monitor 回车即可调出性能监视器，其具有实时更新的可视化功能，能突出显示页面中的性能瓶颈。当你与页面交互时（滚动、导航等），可视化监控数据随之更新。面板左边的性能指标是可以开关的，有助于理解可视化信息。

可在 Performance Monitor 中查看高层的性能概况，然后在 Performance 面板中对异常峰值（如滚动页面时CPU的某一峰值）做进一步调查。

5. 识别最大的内容绘制元素

DevTools 中的绘制计时标记突出显示了页面加载中的关键渲染点，包括：

• First Paint：首次绘制

• First Contentful Paint：首次内容绘制

• First Meaningful Paint - 首次有效绘制（指页面的首要内容出现在屏幕上的时间）

• Largest Contentful Paint：最大内容绘制

• DOMContentLoaded Event：DOMContentLoaded事件，是HTML文档（包括CSS、JS）被加载以及解析完成之后触发

• Onload Event：Onload事件，是在页面的其他资源如图片、字体、音频、视频加载完成之后触发

只要你在 performance 面板中获取了性能记录，就能通过 First Contentful Paint 标记准确指出最大内容的元素。鼠标移到 LCP 标记上，可以在页面上突显相关元素；点击 LCP 标记，就可以在 Summary 面板中找到相关的节点，点击该节点便能直接跳转到 Elements 面板中该元素的DOM节点上。

6. 使用 Web Audio 审查器审查音频

你可以使用 Web Audio 审查器查看 AudioContexts （Web Audio API的一部分）的详细信息，如下：

• State (running)
• Sample rate (44100Hz)
• Callback Buffer Size (256 frames)
• Max Output Channels (2 ch)
• Current play time (10.2s)
• Callback Interval (5ms)
• Render Capacity (1.2%)

在 console drawer 左侧的三个点中选择 WebAudio，另外，需要在使用了 Web Audio API 的页面使用该功能，如 webaudioapi.com。

7. 查看布局变换区域以改进页面渲染性能

快捷键 Ctrl Shift P 输入render 调出 Rendering Drawer，勾选 Layout Shift Regions 可使用该功能。布局变换会在页面的整个生命周期中出现。比如，页面顶部懒加载的 cookie 条可能导致它下方的所有内容向下移动，这就是布局变换，布局变换会产生一些负面影响：

• 它对用户来说可能是个很糟糕的体验，因为页面元素正在以意想不到的方式移动。
• 它会占用你的帧预算，这会对其他渲染相关的操作产生连锁的影响。
  

Layout Shift Regions 功能可以帮助你识别什么地方和什么时候这样的布局变换会发生。

8. 复制并提取页面上某个元素所有的CSS

在 Elements 面板中选择一个 DOM 节点，右键，选择 Copy > Copy styles 即可使用CSS复制提取功能。这个功能特别有用，因为 css 通常分散在许多选择器中，想要准确地提取需要的内容非常的麻烦。该功能甚至包括自定义的 css 变量（如果有定义的话）。

9. 使用 Service Worker 调试器拦截及暂停 fetch 请求

DevTools 中的 Service Workers 有强大的调试功能。如果你的网站使用了 Service Worker，可以在 Application 面板中的 Service Workers 找到。选择一个 Service Worker，点击 Source 将打开 Sources 面板编辑器定向到线程来源，这里你可以使用调试功能，如打断点。

如：你可能发现了一个如下的 fetch 处理程序：

addEventListener('fetch', event => {  const url = new URL(event.request.url);});

如果在回调函数中打上断点，假如你进行改变URL的地址或动态导入（ import('/test.js')） 等操作，就能触发 Service Worker 的 fetch 事件，然后就会停在 Service Worker 代码中的断点处。

10. 使用长悬停查看受影响的节点和匹配的选择器

在 Elements 面板中的 Styles 面板里，如果长时间悬停在某 CSS 属性上，会突出显示受该属性影响的所有节点。这适用于影响元素盒模型的css属性，如 margin 和 padding。如果长时间悬停在 Styles 面板中的 CSS 选择器上，则所有匹配该选择器的元素都会在页面中突出显示。

11. 快速清除网站上的所有数据

调试时，经常需要清除网站中各种形式的存储数据，想要一次性清除所有数据，有两种方式：

• 快捷键 Ctrl Shift P，输入clear，选择 Clear site data
• 在 Application 面板中，选择 Clear storage，找到 Clear site data 按钮。（这种方式可以查看数据大小，也可以有选择的进行清除）

可清除的数据类型包括：

• Cookies
• WebSQL
• Service Workers
• Cache Storage
• IndexedDB
• Local Storage
• Application Cache

12. 用于快速原型开发的 CSS 预设

过去，DevTools 不会给某些属性值（如使用CSS函数的值）提供有意义的自动建议值。但是现在，会给出有意义的建议值，如：在 background-image 属性后输入 lin 会自动给出如下建议值：

linear-gradient(45deg, black, transparent)

这些值让你可以立即在页面上看到可视化的结果，这样你就不需要在原型开发时去研究 linear-gradient() 的 CSS 函数。

13. 使用长任务指示器深入研究慢速网页行为

任何在浏览器中执行超过 50 ms 的任务，都是 long task 长任务，会长时间占用主线程资源，进而阻碍其他关键任务的执行/响应，造成页面卡顿，performance 面板中的长任务指示器可以让你对长任务进行高层次监控。操作如下：

• 记录某个网页的网页性能概况

• 在 Main 线程中标有 Task 的灰色条内查找红旗标记

• 将鼠标悬停在长任务上，会提示长任务的持续时间

• 另外，你也可以使用 Long Tasks API 在代码中监测长任务，如下：

const observer = new PerformanceObserver(list => {  list.getEntries().forEach(item => {    // longtask 的类型    console.log(`long task name is: ${item.name}`);    console.log(`long task attribution is:`);    // longtask 的具体信息    console.log(JSON.stringify(item.attribution, null, 2));  });});// 仅关注 longtaskobserver.observe({ entryTypes: ['longtask'] });

14. 交互式地查看 WebSocket 消息

DevTools 有一个内置的 WebSocket 查看器，操作如下：

• 打开 Network 面板中的过滤菜单
• 选择 WS
• 选择一个 WebSocket 资源
• 打开 Message 面板

15. 从 Console Violations 获取性能建议

Console Violations 会给你提示针对你代码的最佳实践。使用该功能的好处就是，不需要去运行 Performance 或者 Audit ，因为违规代码执行的时候就会显示相应的Violations，如强制回流的 JavaScript，使用了 document.write 的 JavaScript，执行缓慢的 setTimeout 处理程序，效率低下的时间侦听器等等 。操作如下：

• 在 Console 面板中点击 Default levels 下拉框，选择 Verbose

• 在过滤框中输入 violation

16. 新改进的审查元素提示可显示有用 CSS 属性

在审查元素模式下，将鼠标悬停在元素上时，会显示有用的 CSS 属性，如 Color，Font，Background，Magin，Padding 以及计算后的 contrast ratio（两种有效的css颜色之间的对比度，可以用来判断文本的可读性，是否能作为网站的配色等，对比度可以的会显示绿色对勾，不太好的会显示警告标志等）。这样可以快速浏览元素的计算样式，而不需要单击每个元素来显示工具提示。

17. 折叠 CSS 和 JavaScript 代码以提高可读性

通过快捷键 Ctrl Shift P 然后输入 folding 选择 Enable code folding 或者 setting->Preferences->Sources->Code folding 你可以在 Source 面板的编辑器和 Network 面板的 Preview 窗口下折叠 CSS 和 JavaScript 代码，这样有助于提高代码的可读性。

18. Element 面板中有关 color 的技巧

DevTools 中有一些有关颜色选择的技巧，以下是其中三个比较有用的功能：

1. DevTools 现在在颜色选择器中同时显示 AA 和 AAA 对比度，并在你网页的前景色和背景色对比度差时给出警告，这能帮助你提高用户的可访问性。

• AA级：1.4.3对比度（最小），文本的视觉呈现以及文本图像至少要有4.5:1的对比度，大文本大号文本及大文本图像至少有3:1的对比度；

• AAA级：1.4.6对比度（加强），文本的视觉呈现以及文本图像至少要有7:1的对比度，大文本大号文本及大文本图像至少有4.5:1的对比度。

大文本：至少 18pt（24px）或 14pt（19px）bold。

2. 调色板显示自定义的颜色，显示以下：

• 配色方案 – 符合网页设计规范的配色方案；

• 自定义颜色– 一组你自己选择过的颜色。DevTools 会保存您的自定义调色板，甚至跨页面，直到您删除它；

• CSS 自定义变量颜色：css自定义变量中定义的颜色

• 页面颜色– 从页面的CSS中自动生成的一组颜色。

3. 元素工具栏默认情况下是隐藏的，将鼠标悬停在样式窗格中的CSS样式规则块上时会显示，点击出现的三个点，会出现可快速添加CSS属性的按钮，包括：

• text-shadow 文本阴影

• box-shadow 盒阴影

• color 字体颜色

• background-color 背景色

19. 导出原生代码覆盖率数据

代码覆盖工具直观地显示 CSS 和 JavaScript 中使用和未使用的代码行。现在，你可以导出原生代码的覆盖率数据，从而打开工具集成的可能性，例如在一个可以基于使用/未使用的代码修改 CSS/JS 的工具中使用该数据，操作如下：

1. 打开 Coverage 面板

2. 选择 Select Start Instrumenting coverage and reload Page

3. 点击 Export 按钮

20. 使用 Logpoints 进行更快速的 JavaScript 调试

使用 Logpoints 功能可以在你的 JavaScript 代码中用任意变量快速注入一条 console.log 消息，这样你不必在调试过程中在断点处暂停。
注：使用对象可打印多个变量

以上只是冰山一角，欲知其他，且看下回分解。

~ 未完待续 ~