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

Sofia Emelianova
Sofia Emelianova

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

可修改的 @property 规则

现在,您可以在元素 > 中的相应部分中修改 @property CSS at-rule样式窗格。

将属性规则设为可修改之前和之后。

Chromium 问题:1471123

已报告与“@property”规则无效相关的问题

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

“问题”标签页中报告的媒体资源规则存在的问题。

Chromium 问题:1473283

更新了要模拟的设备列表

设置。 设置 > 中的用户代理字符串我们更新了设备,以反映浏览器和操作系统的平均使用情况。你现在可以在设备模式下模拟更多最新设备。

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

Chromium 问题:1479733

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

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

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

Chromium 问题:4069001473875

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

现在,在控制台中对私有类字段进行评估时,您可以自动填充这些字段。

支持对类范围之外的私有类字段进行自动补全之前和之后。

Chromium 问题:14838481381806

Lighthouse 11.1.0

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

如需了解在开发者工具中使用 Lighthouse 面板的基础知识,请参阅 Lighthouse:优化网站速度

Chromium 问题:772558

改进了无障碍功能

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

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

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

Chromium 问题:148525714866431485263

Web SQL 弃用

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

Web SQL 弃用警告。

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

Chromium 问题:1485966

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

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

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

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

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

Chromium 问题:1476656

其他亮点

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

  • 元素: <ph type="x-smartling-placeholder">
      </ph>
    • 展开式简写属性下的长篇 CSS 属性不显示动画计时函数样本 (1149182)。
    • contain-intrinsic-* 的自动补全功能现在不会提供错误的单个 auto 值,因为它应为 auto <length> (1480415)。
    • 不再支持已废弃和无效的 -webkit-* 属性(10860891030765)。
  • 断点:修复了更改断点类型后断点修改对话框会消失的 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 视频发表评论。

开发者工具的新变化

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