开发者工具中的新功能 (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 > Storage > Indexed DB，然后运行代码。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)。
  • 现在，您可以使用键盘浏览 Sources > Breakpoints 窗格：使用向上箭头和向下箭头可移动，使用空格键可选择 (1446150)。
  • 修复了网络面板中的 HAR 文件上传和过滤问题 (1450622)。
  • 现在，性能面板中的火焰图会在轨迹之间添加小间隙，以便更好地呈现它们 (1452150)。
  • 修复了嵌入在源映射中的文件的自动映射问题 (1446383)。

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

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