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

关于无效 CSS 属性的提示

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

有关无效 CSS 属性的提示。

Chromium 问题:1178508

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

Recorder 面板现在支持 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 版用作您的默认开发浏览器。通过这些预览渠道,您可以访问最新的开发者工具功能,测试先进的网络平台 API,并在用户之前发现您网站上的问题!

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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