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

Sofia Emelianova
Sofia Emelianova
GitHub

改进了元素 > 中的 @property 部分风格

可修改的 @property 规则

现在，您可以在元素 > 中的相应部分中修改 @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 弃用

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

Web SQL 弃用警告。

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

Chromium 问题：1485966。

应用 > 中的屏幕截图宽高比验证清单

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

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

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

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

Chromium 问题：1476656。

其他亮点

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

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

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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