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

Jecelyn Yeen

关于无效 CSS 属性的提示

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

无效 CSS 属性的提示。

Chromium 问题：1178508

在“录音机”面板中自动检测 XPath 和文本选择器

录音器面板现在支持 XPath 和文本选择器。开始录制用户体验历程，录制器会自动选择元素的 XPath 和最短的唯一文本作为选择器（如果有）。

“Recorder”面板中的 XPath 和文本选择器。

Chromium 问题：1327206、1327209

逐步浏览以英文逗号分隔的表达式

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

逐步完成以英文逗号分隔的表达式。

之前，DevTools 仅支持单步调试以分号分隔的表达式。

如果使用下面的代码，

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 DevTools 团队联系

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

开发者工具的新变化

DevTools 新变化系列中涵盖的所有内容的列表。