Google Chrome 86 开发工具更新

谷歌 Chrome 86 将于 2020 年 10 月 6 日推出，其中包含 Dev Tools 的更新版本。 此更新引入了扩展工具实用性的新功能。 发布者将能够在一个易于访问的新媒体面板中调试视频，访问更多模拟器，并利用从 Lighthouse 到 6.2 的更好审计。

新媒体面板视频调试器截图

新媒体小组

Chrome 开发工具现在具有一个媒体面板，可让您调试视频。

有关如何访问媒体面板的分步说明：

1. 单击显示更多选项的三个点。
2. 选择更多工具
3. 选择媒体以显示新的视频调试器工具。

新的媒体面板允许您检查属性、事件、消息和时间线。

根据谷歌：

• “属性选项卡显示媒体播放器的属性。
• 单击“事件”选项卡以查看所有媒体播放器事件。
• 单击消息选项卡以查看媒体播放器消息日志。 您可以按日志级别或字符串过滤消息。
• 时间线选项卡是您可以实时查看媒体播放和缓冲区状态的地方。”

捕获节点截图

现在您可以通过 上下文下拉菜单 在元素面板中。

模拟缺少的本地字体

启用后，此功能将忽略您机器上的字体并表现得好像缺少字体一样。 这会导致开发工具像新访问者一样获取字体，从而允许您调试进程。

模拟首选减少数据

这是一个可以模拟站点访问者的设置，该站点访问者将浏览器首选项设置为数据保存模式。 prefers-reduced-data CSS 媒体查询然后可以显示较小的图像。

这是一个实验性功能。

W3c 注意到此功能可用于识别低收入用户的担忧。

“此功能可能是不受欢迎的指纹来源，偏向于数据有限的低收入人群。 应该在本规范中添加隐私和安全部分，它应该解决这个问题。 “

此媒体查询将从 Chrome 85 开始支持，包括基于 Chrome 的 Microsoft Edge。

通过启用此仿真，发布者可以针对这些情况查看和调试网页行为。

灯塔 6.2

此更新添加了许多修复和改进。

这些是根据谷歌的一些改进：

1. “避免长时间的主线程任务。 报告主线程上最长的任务，对于识别输入延迟的最差贡献者很有用。
2. 链接是可抓取的。 检查锚元素的 href 属性是否链接到适当的目的地，以便可以发现链接。
3. 未调整大小的图像元素 – 检查是否在图像元素上设置了明确的宽度和高度。 显式图像大小可以减少布局偏移并改善 CLS。
4. 避免使用非合成动画。 报告出现卡顿并减少 CLS 的非合成动画。
5. 监听卸载事件。 报告卸载事件。 考虑使用 页隐藏 或者 可见性变化 事件而不是因为卸载事件不能可靠地触发。”

以上只是不同变化的部分列表和解释。 还有其他改进，例如支持 新的 JavaScript 功能.

阅读官方公告

媒体面板支持页面

Prefers-reduced-data 用户偏好的官方 W3C 描述

Lighthouse 6.2 更新日志