【第2418期】Chrome 94:DevTools 新功能

前言

惊喜的是DevTools有中文版了。今日前端早读课文章由@流浪大法师翻译授权分享。

正文从这开始~~

设定您的 DevTools 用户界面语言

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

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

设备列表新增 Nest Hub 设备

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

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

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

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

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

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

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

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

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

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

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

控制台的边栏即将被弃用

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

关于本文

者:@流浪大法师
文:https://developer.chrome.com/zh/blog/new-in-devtools-94/

作者:@Jecelyn Yeen

原文:https://developer.chrome.com/en/blog/new-in-devtools-94/


点击查看前端早读课Vol.34周刊


为你推荐


【第2142期】Chrome浏览器Referrer-Policy默认值变更


【第1156期】Chrome DevTools - 性能监控


欢迎自荐投稿,前端早读课等你来。