DevTools 新功能(Chrome 108)

Published on

Translated to: English, Español, Português, 日本語

感谢 Poong Zui Yong 提供的翻译

有兴趣帮忙改进 DevTools 吗?请注册并参与 Google 用户体验调研

提示非活跃的 CSS 属性

DevTools 现在可以识别那些语法有效但在页面上没有效果的 CSS 样式。 在样式边栏中,DevTools 会通过淡化字体颜色的方式来展示那些不活跃的属性。 将鼠标悬停在它旁边的图标上,以便于了解为什么该规则没有可见效果。

提示非活跃的 CSS 属性

Chromium 议题: 1178508

记录器(Recorder)面板支持自动检测 XPath 和文本选择器

**记录器(Recorder)**面板现在支持 XPath 和文本选择器。 开始记录一个用户流程,在元素存在可用选择器的情况下,记录器会自动将选中的 XPath 以及唯一的超短文本作为选择器。

记录器(Recorder)面板支持 XPath 和文本选择器

Chromium 议题: 1327206,[1327209] (https://crbug.com/1327209)

逐步执行逗号分隔的表达式

您现在可以在调试期间单步执行那些以逗号分隔的表达式。 这种做法提升了调试压缩代码的用户体验。

逐步执行逗号分隔的表达式。

之前 DevTools 仅支持单步执行那些以分号分隔的表达式。

鉴于下面的代码,

function foo() {}

function bar() {
foo();
foo();
return 42;
}

转译器和压缩器可能会将它们转换为逗号分隔的表达式。

function bar(){return foo(),foo(),42}

在调试过程中,上述行为会给人造成思维上的混乱,因为压缩后的代码和用户编写的代码之间存在步进行为不一致的情况。在使用 sourcemap 来调试压缩代码所对应的源码时,会更加让人不解,因为开发人员正在查看分号(背后被工具链转换为逗号)但调试器不会在分号那里停住。

Chromium 议题: 1370200

改进忽略列表设置

转到 设置(Settings) > 忽略列表(Ignore List) 。 DevTools 改进了设计以帮助您配置规则以忽略单个脚本或脚本模式

忽略列表选项卡。

Chromium 议题: 1356517

其他的更新

以下是此版本中一些值得注意的修复:

样式边栏中按空格自动完成 CSS 属性名称。 (1343316)

删除 Element 面板的页面路径/面包屑导览中的自动滚动。 (1369734)

下载 Chrome 预览版本

您可以考虑把 Chrome Canary 版, 开发者版(Dev)测试版(Beta) 设置为默认开发浏览器。这些预览版本能让你抢先体验处于 DevTools 开发阶段的新功能、测试最新的网络平台 API ,让您抢先在用户之前发现您网站上的问题!

联系 Chrome DevTools 团队

您可以透过一下渠道讨论这篇文章的新功能和改进,或一切关于 DevTools 的一切。

  • 提交建议或意见回馈:crbug.com.
  • 报告 DevTools 问题:打开 DevTools,按 更多选项图标   More   > 帮助 > 报告 DevTools 问题
  • 在推特上,发推文: @ChromeDevTools.
  • 在我们的 What's new in DevTools YouTube 视频底下留言。

更多 DevTools 的功能

欲查询完整的 DevTools 已发布的功能,请参考 What's New In DevTools 英文系列。以下是部分已翻译成中文的内容。

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Updated on 改进文章

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.