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

Sofia Emelianova
Sofia Emelianova
GitHub

Google 用户调研。

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

开发者工具获得多项改进，可帮助您更快地识别和调试缺少样式表的问题：

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

“来源”面板中带有提示的下划线语句。

  • 除了指向失败请求的链接之外，控制台现在还提供指向引用加载失败的样式表的具体行的链接。

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

  • 网络面板始终会在发起者列中填充指向引用加载失败的样式表的精确行的链接。

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

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

Chromium 问题：1440626、1442198、1453611。

在“元素”>“样式”>“缓动效果编辑器”中支持线性时间

在元素 > 样式中的 缓动效果编辑器。 缓动效果编辑器中，您可以点击一下即可调整 transition-timing-function 和 animation-timing-function 值。在此版本中，缓动效果编辑器。 缓动效果编辑器获得了线性时间函数支持。

如需配置线性时间，请点击线性选择器按钮。如需添加控制点，请点击线条上的任意位置。如需移除控制点，请双击该点。您还可以选择以下预设之一：linear、elastic、bounce 或 emphasized。观看视频，了解线性调整的实际效果。

Chromium 问题：1421241。

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

应用 > 存储 部分支持存储分区。存储分区彼此独立，因此您可以为数据切片指定逐出优先级，确保不会删除最有价值的数据。每个存储分区都可以存储与已建立的存储 API（例如 IndexedDB 和 CacheStorage）相关联的数据。

您可以查看此 fiddle 来测试该功能。打开开发者工具，依次前往应用 > 存储空间 > Indexed DB，然后运行代码。开发者工具现在会显示存储分区及其内容。选择一个存储分区即可查看其元数据。

查看存储分区的元数据。

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

新的统一元数据视图。

Chromium 问题：1448011、1406017。

Lighthouse 10.3.0

Lighthouse 面板现在运行的是 Lighthouse 10.3.0。最值得注意的是，此版本新增了四项审核，可捕获与表格标题和字幕、输入按钮名称以及语言不匹配相关的各种无障碍问题。例如：

通过了表格标题检查。

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

Chromium 问题：772558。

无障碍功能：键盘命令和改进的屏幕阅读

开发者工具现在支持更多快捷键，并修复了屏幕阅读器方面的问题：

  • 您现在可以使用键盘快捷键打开上下文菜单，例如在 Windows 和许多 Linux 发行版上，可以使用 Shift+F10。如需了解 macOS 快捷方式，请参阅替代指针操作。
  • 屏幕阅读器应用：
    • 不会不必要地两次宣布复选框标签。
    • 当您按“朗读列标题”快捷键时，系统会朗读可排序列的列标题名称。

DevTools 团队感谢 Yanling Wang 和 Elorm Coch 实现了这些改进。

Chromium 问题：1446482、1414952。

其他亮点

此版本包含以下值得注意的修复和改进：

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

下载预览渠道

不妨考虑使用 Chrome Canary 版、开发者版或 Beta 版作为默认开发浏览器。通过这些预览渠道，您可以访问最新的 DevTools 功能，测试前沿的 Web 平台 API，并在用户发现问题之前帮助您找到网站上的问题！

与 Chrome 开发者工具团队联系

您可以使用以下选项讨论新功能、更新或与开发者工具相关的任何其他内容。

开发者工具的新变化

DevTools 新变化系列中涵盖的所有内容的列表。