高亮显示受CSS属性影响的所有节点
将鼠标悬停在影响节点盒模型的 css 属性上方，例如 padding 或 margin，可以看到所有被这个属性影响的节点
图 1.将鼠标悬停在margin属性上会突出显示受该属性影响的所有节点的 margin
Audit 面板中的 Lighthouse v4
新的点击目标审查现在会检查出那些没有适当放大并且间隔开，从而导致不合适在移动设备上点击的按钮和链接等交互元素。
图 2.点击目标审查
报告中的的 PWA 部分现在使用了徽章评分系统
图 3. PWA 新的徽章评分系统
Lighthouse 是什么? Lighthouse 是为 Audits 面板提供支持的审计引擎。它还支持web.dev/measure 和 PageSpeed Insights. 您还可以将 Lighthouse 作为 Node模块, Chrome 扩展程序或命令行运行。参阅 Chrome DevTools 中的 RunRun Lighthouse 开始使用。
WebSocket 二进制消息查看器
查看 WebSocket 的二进制消息：
打开 Network 面板，在 Inspect Network Activity 中我们可以看到网络活动的基本分析
图 4. Network 面板
点击 WS 来过滤掉不是 WebSocket 的连接
图 5. 点击 WS 后只显示 WebSocket 连接
在 Name 栏点击一个 WebSocket 连接的来详细查看
图 6. 查看一个webscorkt连接
点击 Messages 标签.
图 7. Messages 标签
点击其中一个 Binary Message 来查看它
图 8.查看二进制消息
利用查看器底部的下拉菜单，可以将消息转化为Base64或UTF-8格式。点击 Copy to clipboard 拷贝二进制消息。
图 9. 通过 Base64 格式查看二进制消息
在命令菜单中获取区域屏幕截图
通过区域屏幕截图，你可以捕获视口的一部分的屏幕截图。 这个功能已经存在了一段时间，但访问它的入口非常隐蔽。 而现在，区域屏幕截图可以从命令菜单中获得。
打开开发者工具，然后按Control + Shift + P或Command + Shift + P（Mac）打开命令菜单。
输入 area, 选择 区域屏幕截图, 回车
将鼠标拖到要截屏的视图部分上进行截取
Network 面板中的Service worker过滤器
在 Network 面板过滤器文本框中输入以下内容：service-worker-initiated 或 is：service-worker-intercepted，以查看 service worker 导致（已启动）或可能已修改（截获）的请求。
图 12. 通过 is:service-worker-initiated过滤
图 13. 通过 is:service-worker-intercepted过滤
查看更多关于network面板过滤器的信息：过滤资源
Performance 面板更新
性能录制现在标记出了长任务和首次渲染。
有关使用 Performance 面板分析页面加载性能的示例，请查看减少主线程进行的工作。
性能录制中的长任务
性能录制现在会标记出长任务
图 14. 光标悬停在一个性能录制中的长任务上
Timings 部分的首次渲染
Performance 中的 Timings 部分 现在标记出了首次渲染的时间
图 15. Timings 部分的首次渲染
新的DOM教程
点击原文链接查看开始查看和更改DOM，以便亲身体验与DOM相关的新功能。
