开发者工具中的新功能 (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。

改进了无障碍功能

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

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

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

Chromium 问题：1485257、1486643、1485263。

Web SQL 弃用

在 Chrome 123 中，应用 > Web SQL 部分将被移除，因为 Web SQL Database API 不再进行维护。此版本在有关即将进行的移除操作的部分中添加了一条警告。

Web SQL 弃用警告。

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

Chromium 问题：1485966。

在“应用”>“清单”中验证屏幕截图宽高比

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

针对同一设备规格的屏幕截图显示宽高比错误的警告。

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

DevTools 团队非常感谢 Alexey Rodionov 在上一版本中实施此变更以及实现其他清单警告改进。

Chromium 问题：1476656。

其他亮点

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

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

下载预览渠道

请考虑将 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