本文首发于政采云前端团队博客： 一文洞察 Chrome DevTools 近半年更新了哪些新功能
本文由政采云前端团队 @子洋 同学翻译，原文可访问：https://developers.google.com...
前言
工欲善其事，必先利其器。Chrome Devtools 是前端开发工程师不可或缺的开发工具，最近半年 Chrome 更新了 6 个版本，其中的 5 个版本里 Chrome Devtools 也更新了一些新功能，我们对最近的一些更新做了翻译整理，下面我们一起来看看近半年有哪些值得关注的新功能。
DevTools（Chrome 74）的新增功能
高亮显示所有受 CSS 属性影响的节点
将鼠标悬停在会影响节点盒子模型的 CSS 属性上，如 padding 或 margin ，会高亮显示受到这个属性声明影响的所有节点。
Audits 面板中的 Lighthouse v4
新增加的 Tap targets are not sized appropriately 可以检查移动设备上的交互式元素（如按钮和链接）是否设置了合适的尺寸和间隔。
例如：点击目标的大小是否易于点击，或者是否距离其他可点击目标过近，更多： Tap targets are not sized appropriately
PWA 分类使用新的徽章计分系统。
Lighthouse 相关介绍可参考：Lighthouse
新增 WebSocket 二进制消息查看器
查看 WebSocket 二进制消息的内容：
- 打开 Network 面板。可参考 Inspect Network Activity 了解 Network 分析的基础使用。
- 点击 WS， 过滤不是 WebSocket 连接的资源。
- 点击 WebSocket 连接的 Name 查看详情 。
- 点击 Messages tab。
- 点击其中的一个 Binary Message 查看详情 。
可以使用底部的下拉菜单将消息转换为 Base64 或 UTF-8。点击复制到剪贴板 可以复制二进制消息。
可在 Command Menu 中使用区域屏幕截图
区域截图可以捕获窗口一部分的屏幕截图。这个功能之前访问入口非常隐蔽，现在可以从 Command Menu 直接使用区域截图。
- 打开 DevTools，然后按 Control + Shift + P 或 Command + Shift + P（Mac）打开 Command Menu（命令菜单）。
- 输入
area，选择 Capture area screenshots，然后 Enter。 - 将鼠标拖到要截屏的部分。
- 选择窗口的一部分截图。
Network 面板中的 Service Worker 过滤器
在 Network 筛选框中输入 is:service-worker-initiated 或 is:service-worker-intercepted 可以查看由 service worker 发起（initiated）或可能被其修改（intercepted）的请求。
Network 日志过滤的更多资料，可参考 Filter resources。
Performance recordings 里增加长任务标记
long tasks 相关介绍可参考 long tasks。
Performance 面板分析页面加载性能的示例，可参考 Do less main thread work
Performance Timings 部分增加 First Paint 的标记
现在，Performance recordings 中的 Timings 会标记出 First Paint 的节点。
DevTools（Chrome 75）的新增功能
CSS 函数自动补全有意义的预设值
某些 CSS 属性（如filter）的值是函数。例如，filter: blur(1px) 给节点增加 1px 模糊。当自动补全，如 filter 的属性时，DevTools 会自动补全有意义的值，可以很方便的预览这个值将在节点上进行的更改效果。
老的版本自动补全，DevTools 自动补全属性为 filter: blur ，在视口中看不到任何更改。
新的自动补全，DevTools 自动补全属性为 filter: blur(1px)，可以在窗口中看见改变效果。
从 Command Menu 清除网页数据
按下 Control+ Shift+ P或 Command+ Shift+ P（Mac）打开 Command Menu，然后运行 Clear Site Data 命令清除页面相关的所有数据，包括 Service workers, localStorage, sessionStorage, IndexedDB, Web SQL, Cookies, Cache 以及 Application Cache.
Application > Clear Storage 中已经存在这个功能。Chrome 75 中新增可以从 Command Menu 执行这个命令。
如果不想删除所有数据，可以从 Application > Clear Storage 选择删除哪些数据 。
查看所有 IndexedDB 数据库
以前 Application > IndexedDB 只允许查看当前域的 IndexedDB 数据库。如果页面里有