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 更新日志

给TA打赏
共{{data.count}}人
人已打赏
主题

DailySun - 用于博客、新闻和杂志的 PSD 模板

2022-9-17 12:46:04

主题

Medicus-健康和医学素描模板

2022-9-10 0:12:38

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索