DevTools 新功能(Chrome 94)

Published on Updated on

Translated to: English, Español, Português, 한국어, Pусский, 日本語

感谢流浪大法师提供的翻译。

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

设定您的 DevTools 用户界面语言

Chrome DevTools 现在支持超过 80 种语言,允许您设定自己喜欢的语言!

打开设置,然后点击偏好下的语言下拉菜单。选择自己喜欢的语言后,重新加载 DevTools。

在设置里更改语言

Chromium 议题:1163928

设备列表新增 Nest Hub 设备

您现在可以在设备模式下模拟 Nest Hub 以及 Nest Hub Max 的尺寸。

点击 切换设备工具栏图标   切换设备工具栏  ,在设备列表里选择 Nest Hub 或者 Nest Hub Max 设备。

设备模式下的 Nest Hub 设备

Chromium 议题:1223525

帧(Frame)详情页获取 origin trials 信息

您现在可以从应用面板的帧(frame)详情页那里获取网站的 origin trials 信息。

Origin trials 允许您提前尝试正处于实验阶段的新功能。通过注册参加 Origin trials, 您就可以在该新功能还未放给所有用户之前, 利用该功能进行限时的产品开发。

打开有注册参加 origin trials 的网页(参考 demo 页面)。在应用面板那里,滚动至区域,选中 top frame。

Frame 详情页获取 origin trials 信息

Chromium 议题:607555

新的 CSS 容器查询(Container queries)徽章

DevTools 在容器元素(Container elements,指的是那些匹配 @container @规则的祖先元素)的旁边,新增了容器徽章。点击该徽章,网页将突出显示选中容器元素,以及该容器所有的后代元素。

CSS 容器查询徽章

Chromium 议题:1146422

利用新的复选框反转过滤网络请求的条件

您在网络面板那里,使用新的反转复选框,反转过滤条件。

比如说,您可以在过滤文本框里输入 “status-code: 404” ,查看那些状态码为 404 的网络请求。点击反转复选框,可反转过滤条件(显示那些状态码为不是 404 的网络请求)。

反转网络请求过滤条件

Chromium 议题:1054464

控制台的边栏即将被弃用

控制台的左边栏将会被移除。该边栏里的过滤界面将会被移动到工具栏里。如果您有任何疑虑或者反馈,可以通过这个议题追踪器来让我们知道。

控制台边栏的弃用信息

Chromium 议题:1232937

在问题选项卡以及网络面板那里显示原生 Set-Cookie 响应头

DevTools 现在可以在问题选项卡那里显示原生(raw) Set-Cookie 响应头(response headers)。

此前,DevTools 并不会在网络面板那里显示异常 cookie(不正确的 Set-Cookie 响应头)。现在,通过网络面板新增的 response-header-set-cookie 过滤条件,用户可以过滤掉含有原生 Set-Cookie 的响应。DevTools 也会把问题选项卡里面的原生 Set-Cookie 响应头给链接到网络面板。

在问题选项卡以及网络面板那里显示原生 Set-Cookie 响应头

Chromium 议题:1179186

在控制台里显示原生访问器为自己的属性

控制台现在会将原生访问器(native accessors)始终显示为它们自己的属性(own properties)。

例如说,此前在控制台计算 new Int8Array([1, 2, 3]) 表达式时,原生访问器(如 length、byteOffset)并没有在预览中展示。经过这次更新,原生访问器会在预览中展示,并且在展开时会提前计算出结果。

控制台会将原生访问器访问所得到的结果展示成它们自己的属性

Chromium 议题:1076820, ​​1199247

正确输出带有 #sourceURL 行内脚本的错误堆栈信息

DevTools 现在可以正确解析带有 #sourceURL 的行内脚本(inline scripts),并且还能针对调试这种情况,输出正确的错误堆栈信息。

此前,DevTools 会错误输出带有 #sourceURL 的行内脚本的位置信息。这是由于之前的位置输出是对应该 #sourceURL 所在的 <script> 标签。正确的位置输出应该是要对应该文档。

处理带有 #sourceURL 的行内脚本,给出合适的错误堆栈信息

Chromium 议题: 1183990, ​​578269

更改计算样式边栏里面元素的颜色格式

您现在可以通过 Shift + 点击颜色预览,来更改计算样式边栏里的元素颜色格式。

通过 Shift + 点击的方式更改**计算样式**里面的元素颜色格式

Chromium 议题: 1226371

使用原生的 HTML 提示框替换自定义提示框

DevTools 现在针对所有的组件都采用原生 HTML 提示框(native HTML tooltips)。此前,DevTools 一直都是使用内部开发的自定义提示框,这是碍于原生的 HTML 提示框缺乏自定义风格(Styling)支持,因此 DevTools 使用自定义提示框的支持。

不幸的是,维护自定义提示框的实现是一件很棘手的事。我们经常会遇到一些很复杂的 bugs。

在重新评估自定义提示框带来的好处之后,我们认为原生的 HTML 提示框对于 DevTools 来说已经足够了。采用原生提示框可以避免用户遇到各式各样的问题。

DevTools 提示框

Chromium 议题: 1223391

[实验阶段] 隐藏问题选项卡里面的问题

请勾选位于 设置 > 实验 下的 启用隐藏问题菜单 多选框,以启用此实验功能。

隐藏问题菜单是一个处于实验阶段的新功能。启用这个功能能让您隐藏问题选项卡里面的问题。这样的话,您就可以只专注于当前对您而言最重要的问题。

问题选项卡里面,将鼠标悬停在某个问题上,点击右侧的问题菜单栏  更多  ,选择“隐藏问题”选项将其隐藏。

处于实验阶段的隐藏问题的菜单

Chromium 议题: 1175722

下载 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 95

Chrome 94

Chrome 93

Chrome 92

Last updated: Improve article

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