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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

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

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

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

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

Chromium 问题：1440626、1442198、1453611。

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

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

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

Chromium 问题：1421241。

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

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

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

查看存储分区的元数据。

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

新的统一元数据视图。

Chromium 问题：1448011、1406017。

Lighthouse 10.3.0

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

已通过表格标头检查。

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

Chromium 问题：772558。

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

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

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

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

Chromium 问题：1446482、1414952。

其他亮点

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

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

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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