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

Jecelyn Yeen

关于无效 CSS 属性的提示

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

无效 CSS 属性的提示。

Chromium 问题：1178508

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

Recorder 面板现在支持 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 新变化系列中涵盖的所有内容的列表。