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

无效 CSS 属性的提示

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

无效 CSS 属性的提示。

Chromium 问题:1178508

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

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

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

Chromium 问题:13272061327209

逐步解析以英文逗号分隔的表达式

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

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

以前,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 新变化系列中涵盖的所有内容的列表。