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

Sofia Emelianova
Sofia Emelianova
GitHub

改进了“元素”>“样式”中的 @property 部分

可修改的 @property 规则

现在，您可以在 Elements > Styles 窗格的相应部分中修改 @property CSS at-rule。

使属性规则可修改的前后对比效果。

Chromium 问题：1471123。

报告了“@property”规则无效的问题

现在，问题标签页会报告 @property 规则中的声明无效问题。

“问题”标签页中报告的房源规则问题。

Chromium 问题：1473283。

更新了要模拟的设备列表

设置。 设置 > 设备中的用户代理字符串已更新，以反映浏览器和操作系统的平均使用率。现在，您可以在设备模式下模拟更多最新设备。

更新设备列表之前和之后的 。

Chromium 问题：1479733。

在“Sources”的脚本标记内美观输出内嵌 JSON

Sources 面板现在支持在 <script> HTML 标记中美观输出内嵌 JSON，以简化调试。

在脚本标记中美观输出内嵌 JSON 之前和之后。

Chromium 问题：406900、1473875。

控制台中的自动补全私密字段

现在，在控制台中，在类范围之外评估私有类字段时，您可以自动填充这些字段。

支持对类范围之外的私有类字段自动填充之前和之后。

Chromium 问题：1483848、1381806。

Lighthouse 11.1.0

Lighthouse 面板现在运行 Lighthouse 11.1.0。请参阅更改的完整列表。

要了解有关在开发者工具中使用 Lighthouse 面板的基础知识，请参阅 Lighthouse：优化网站速度。

Chromium 问题：772558。

无障碍功能改进

屏幕阅读器现在会读出以下内容：

  • 控制台中的警告和错误。
  • 将代码粘贴到控制台或来源时，您是否信任此代码？对话框中的文本。

此外，应用面板还修复了在高对比度模式下的链接存在的对比度问题。

Chromium 问题：1485257、1486643、1485263。

Web SQL 弃用

应用 > 网络 SQL 部分将在 Chrome 123 中移除，因为 Web SQL Database API 停止维护。此版本在有关即将被移除的部分添加了警告。

Web SQL 弃用警告。

如需了解详情，请参阅弃用和移除 Web SQL。

Chromium 问题：1485966。

在“Application”>“Manifest”中验证屏幕截图宽高比

应用 > 清单部分现在可检查您的 Web 应用在同一外形规格（wide 或 narrow）上的屏幕截图是否具有相同的宽高比。

针对同一外形规格的屏幕截图宽高比不正确的警告。

如需了解详情，请参阅调试渐进式 Web 应用和添加 Web 应用清单。

开发者工具团队感谢 Alexey Rodionov 推出此变更以及前一版本中的其他清单警告改进。

Chromium 问题：1476656。

其他亮点

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

  • 元素：
    • 对于可展开的简写 (1149182) 下的长篇 CSS 属性，系统不会显示动画计时函数色样。
    • contain-intrinsic-* 的自动补全功能现在不会提供错误的单个 auto 值，因为它应该为 auto <length> (1480415)。
    • 不再支持已废弃和无效的 -webkit-* 属性（1086089、1030765）。
  • 断点：修复了在更改断点类型时断点修改对话框会消失的 bug (1485782)。
  • 性能：
    • 修复了性能记录期间的颜色解析错误 (1480205)。
    • 修复了 LCP 未显示在计时轨道中的 bug (1487136)。
  • 广告网络：设置 Cookie 列现在会显示正确的 Cookie 数量，但不包括已屏蔽的 Cookie (1486903)。
  • 现在，系统会在导航到非阻塞主机后加载开发者工具扩展程序 (1476264)。
  • 修复了扩展程序脚本执行上下文不正确的 bug (1275331)。

下载预览渠道

您可以考虑将 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