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

Jecelyn Yeen

关于无效 CSS 属性的提示

现在，开发者工具会识别有效但没有可见效果的 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 版用作您的默认开发浏览器。通过这些预览渠道，您可以访问最新的开发者工具功能，测试先进的网络平台 API，并在用户之前发现您网站上的问题！

与 Chrome 开发者工具团队联系

使用以下选项讨论博文中的新功能和变更，或与开发者工具相关的任何其他内容。

  • 请通过 crbug.com 提交建议或反馈。
  • 使用更多选项报告开发者工具问题 展开 >帮助 >在开发者工具中报告开发者工具问题。
  • 请发送电子邮件至 @ChromeDevTools。
  • 请对我们的开发者工具新功能 YouTube 视频或开发者工具提示 YouTube 视频发表评论。

开发者工具的新变化

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