开发者工具中的新功能 (Chrome 116)

Sofia Emelianova
Sofia Emelianova

改进了对缺失样式表的调试

开发者工具进行了多项改进,可帮助您更快地发现和调试缺少样式表的问题:

  • 来源 >网页树现在仅显示已成功部署和加载的样式表,以尽量避免混淆。
  • 来源 >编辑器现在会在失败的 @importurl()href 语句旁边添加下划线并显示内嵌错误提示。

“Sources”面板中带提示的带下划线语句。

  • 除了指向失败请求的链接外,控制台现在还提供指向引用未能加载的样式表的确切行的链接。

控制台会提供指向有问题语句的确切行的链接。

  • Network 面板始终会在 Initiator 列中填充指向引用了未能加载的样式表的确切行的链接。

  • Issues 面板会列出所有样式表加载问题,包括网址损坏、请求失败和位置错误的 @import 语句。

“问题”面板,其中包含指向来源和请求的链接。

Chromium 问题:144062614421981453611

元素 > 中的线性时间支持样式 >加/减速编辑器

元素中的 加/减速编辑器。 加/减速编辑器 >借助样式,只需点击一下即可调整 transition-timing-functionanimation-timing-function 值。在此版本中,加/减速编辑器。 加/减速编辑器支持线性计时函数。

要配置线性时间,请点击线性选择器按钮。要添加控制点,请点击线条上的任意位置。要移除某个控制点,请双击它。您也可以选择以下预设之一:linearelasticbounceemphasized。观看视频,了解线性调整的实际效果。

Chromium 问题:1421241

存储分区支持和元数据视图

应用 >存储部分支持存储分区。存储分区彼此独立,因此您可以为数据切片指定逐出优先级,并确保最有价值的数据不会被删除。每个存储分区都可以存储与已建立的存储 API(如 IndexedDBCacheStorage)关联的数据。

查看此小提琴以测试该功能。打开开发者工具,导航到 Application >存储 >编入索引的数据库,然后运行代码。DevTools 现在会显示存储分区及其内容。选择一个存储分区以查看其元数据。

查看存储分区的元数据。

统一元数据视图现在也可用于本地、会话和缓存存储部分。

新的统一元数据视图。

Chromium 问题:14480111406017

Lighthouse 10.3.0

Lighthouse 面板现在运行 Lighthouse 10.3.0。最值得注意的是,此版本新增了四项审核,旨在捕获表格标头说明输入按钮名称语言不匹配方面的各种无障碍功能问题。例如:

已通过表格标头检查。

另请参阅完整的更改列表。如需了解在开发者工具中使用 Lighthouse 面板的基础知识,请参阅 Lighthouse:优化网站速度

Chromium 问题:772558

无障碍功能:键盘命令和经过改进的屏幕阅读体验

开发者工具现在支持更多快捷键,并修复了屏幕阅读器存在的问题:

  • 现在,您可以使用键盘快捷键打开上下文菜单。例如,在 Windows 和许多 Linux 发行版上按 Shift + F10。对于 MacOS 快捷键,请参阅备用指针操作
  • 屏幕阅读器应用: <ph type="x-smartling-placeholder">
      </ph>
    • 不要重复读出复选框标签。
    • 当您按“读取列标题”时,系统会读出可排序列的列标题名称快捷方式。

开发者工具团队非常感谢 Yanling WangElorm Coch 为实现这些改进而付出的努力。

Chromium 问题:14464821414952

其他亮点

以下是此版本中值得注意的一些修复和改进:

  • 即使您与时间轴 (1422552) 进行了互动,Network 面板仍会继续记录网络活动。
  • 现在,Coverage 面板可以识别是否存在预渲染激活或往返缓存导航,并提示您重新加载 (1393057)。
  • 您现在可以浏览来源 >包含键盘的断点窗格:使用向上箭头向下箭头可移动,使用空格键可选择 (1446150)。
  • 修复了网络面板中的 HAR 文件上传和过滤问题 (1450622)。
  • 现在,性能面板中的火焰图会在轨迹之间添加小间隙,以便更好地呈现它们 (1452150)。
  • 修复了嵌入在源映射中的文件的自动映射问题 (1446383)。

下载预览渠道

请考虑将 Chrome Canary开发者版Beta 版用作您的默认开发浏览器。通过这些预览渠道,您可以访问最新的开发者工具功能,测试先进的网络平台 API,并在用户之前发现您网站上的问题!

与 Chrome 开发者工具团队联系

使用以下选项讨论博文中的新功能和变更,或与开发者工具相关的任何其他内容。

  • 请通过 crbug.com 提交建议或反馈。
  • 使用更多选项报告开发者工具问题 展开 >帮助 >在开发者工具中报告开发者工具问题
  • 请发送电子邮件至 @ChromeDevTools
  • 请对我们的开发者工具新功能 YouTube 视频或开发者工具提示 YouTube 视频发表评论。

开发者工具的新变化

开发者工具的新变化系列涵盖所有内容的列表。