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

Jecelyn Yeen

无效 CSS 属性提示

开发者工具现在可以识别有效但没有明显效果的 CSS 样式。在样式窗格中，DevTools 会淡化非活跃属性。将鼠标悬停在旁边的图标上，了解相应规则为何没有明显效果。

Chromium 问题：1178508

在记录器面板中自动检测 XPath 和文本选择器

录制器面板现在支持 XPath 和文本选择器。开始录制用户流程，如果可用，记录器会自动选择元素的 XPath 和最短的唯一文本作为选择器。

Chromium 问题：1327206、1327209

逐步执行以英文逗号分隔的表达式

您现在可以在调试期间逐步执行以英文逗号分隔的表达式。这有助于提高缩小后代码的可调试性。

之前，开发者工具仅支持逐步执行以英文分号分隔的表达式。

假设有以下代码，

function foo() {}  function bar() {   foo();   foo();   return 42; } 

转译器和缩小器可能会将它们转换为以逗号分隔的表达式。

function bar(){return foo(),foo(),42} 

这会在调试期间造成混淆，因为精简代码和原始代码的步进行为不同。如果使用源映射来调试与原始代码相关的缩减代码，情况会更加令人困惑，因为开发者会看到分号（这些分号在底层被工具链转换为逗号），但调试器不会在这些分号处停止。

Chromium 问题：1370200

改进了忽略列表设置

依次前往设置 > 忽略列表。开发者工具改进了设计，可帮助您配置规则以忽略单个脚本或脚本模式。

Chromium 问题：1356517

其他亮点

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

• 在 Styles 窗格中，按空格键即可自动补全 CSS 属性名称。(1343316)
• 移除了元素面板面包屑中的自动滚动。(1369734)

下载预览渠道

不妨考虑使用 Chrome Canary 版、开发者版或 Beta 版作为默认开发浏览器。通过这些预览渠道，您可以访问最新的 DevTools 功能，测试前沿的 Web 平台 API，并帮助您在用户之前发现网站上的问题！

与 Chrome 开发者工具团队联系

您可以使用以下选项讨论新功能、更新或与开发者工具相关的任何其他内容。

• 请前往 crbug.com 向我们提交反馈和功能请求。
• 在开发者工具中，依次点击 more_vert 更多选项 > 帮助 > 报告 DevTools 问题，报告开发者工具问题。
• 在 Twitter 上向 @ChromeDevTools 发送推文。
• 在 DevTools 新变化 YouTube 视频或 DevTools 提示 YouTube 视频中发表评论。

开发者工具的新变化

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