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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

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

  • Network 面板始终使用指向未能加载样式表的确切行的链接来填充 Initiator 列。

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

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

Chromium 问题：1440626、1442198、1453611。

可在“元素”>“样式”>“加/减速编辑器”中使用线性时间支持

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

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

Chromium 问题：1421241。

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

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

请查看此小提琴来测试该功能。打开开发者工具，前往 Application > Storage > Indexed DB，然后运行代码。现在，开发者工具会显示存储分区及其内容。选择一个存储分区以查看其元数据。

查看存储分区的元数据。

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

新的统一元数据视图。

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。

其他亮点

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

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

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

  • 通过 crbug.com 提交建议或反馈。
  • 使用开发者工具中的更多选项   了解详情   > Help > Report a DevTools issues来报告开发者工具问题。
  • 发推文：@ChromeDevTools。
  • 请在 YouTube 视频或“开发者工具提示”YouTube 视频中留言说明“开发者工具的新变化”。

开发者工具的新变化

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

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 浏览器 112

Chrome 111

Chrome 浏览器 110

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 已取消。

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59