小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
本文同时参与 「掘力星计划」,赢取创作大礼包,挑战创作激励金
谷歌浏览器一直在提示更新,提示了好久,一直没更,最近终于给它更到最新版本了,一起来看看都更了些啥吧!
前言
👉 我当前更到最新版本是:Chrome 94;
👉 本文说的主要也是:Chrome 94控制台的更新点
👉 带【看】字的就是给想偷懒的你画的重点了🤣
正文
1、【看】设定你的 DevTools 用户界面语言
Chrome DevTools 现在支持超过 80 种语言,允许你设定自己喜欢的语言!
-
打开设置,然后点击偏好下的语言下拉菜单。(拉到最后是【中文】)
-
选择自己喜欢的语言后,重新加载 DevTools(就是把控制台关掉,在打开)。
都没注意过,之前不能直接设置其他语言吗?🧐
2、帧(Frame)详情页获取 origin trials 信息
你现在可以从应用面板的帧(frame)详情页那里获取网站的 origin trials 信息。Origin trials允许你提前尝试正处于实验阶段的新功能。通过注册参加 Origin trials, 你就可以在该新功能还未放给所有用户之前, 利用该功能进行限时的产品开发。
打开有注册参加 origin trials 的网页(参考 demo 页面)。在应用面板那里,滚动至帧区域,选中 top frame。
3、设备列表新增 Nest Hub 设备
你现在可以在设备模式下模拟 Nest Hub 以及 Nest Hub Max 的尺寸。
点击 切换设备工具栏图标 ,在设备列表里选择 Nest Hub 或者 Nest Hub Max 设备。
Nest Hub 是什么?
Nest Hub是一个集成的智能显示,它与智能家居配件一起工作,播放音乐和视频,并显示您的最新照片。 有了Google助理, Nest Hub还可以让您知道谁在门口,找到您的下一个食谱,控制您的智能灯。
4、【看】新的 CSS 容器查询(Container queries)徽章
DevTools 在容器元素(Container elements,指的是那些匹配 @container
@规则的祖先元素)的旁边,新增了容器徽章。点击该徽章,网页将突出显示选中容器元素,以及该容器所有的后代元素。
5、【看】利用新的复选框反转过滤网络请求的条件
你在网络面板那里,使用新的反转复选框,反转过滤条件。
比如我示例中,过滤文本框输入status-code:200
,看到的是状态码为 200的网络请求。
点了反转,状态码不是200的就被过滤出来了
6、 控制台的边栏即将被弃用
控制台的左边栏将会被移除。该边栏里的过滤界面将会被移动到工具栏里。
7、在问题选项卡以及网络面板那里显示原生 Set-Cookie
响应头
DevTools 现在可以在问题选项卡那里显示原生(raw) Set-Cookie
响应头(response headers)。
此前,DevTools 并不会在网络面板那里显示异常 cookie(不正确的 Set-Cookie
响应头)。
现在,通过网络面板新增的 response-header-set-cookie
过滤条件,用户可以过滤掉含有原生 Set-Cookie
的响应。DevTools 也会把问题选项卡里面的原生 Set-Cookie
响应头给链接到网络面板。
8、【看】在控制台里显示原生访问器为自己的属性
控制台现在会将原生访问器(native accessors)始终显示为它们自己的属性(own properties)。
例如说,此前在控制台计算 new Int8Array([1, 2, 3])
表达式时,原生访问器(如 length、byteOffset)并没有在预览中展示。经过这次更新,原生访问器会在预览中展示,并且在展开时会提前计算出结果。
9、正确输出带有 #sourceURL 行内脚本的错误堆栈信息
DevTools 现在可以正确解析带有 #sourceURL 的内联脚本(inline scripts),并且还能针对调试这种情况,输出正确的错误堆栈信息。
此前,DevTools 会错误输出带有 #sourceURL 的内联脚本的位置信息。这是由于之前的位置输出是对应该 #sourceURL 所在的 <script>
标签。正确的位置输出应该是要对应该文档。
10、更改计算样式边栏里面元素的颜色格式
现在可以通过 Shift + 点击颜色预览,来更改计算样式边栏里的元素颜色格式。
11、使用原生的 HTML 提示框替换自定义提示框
DevTools 现在针对所有的组件都采用原生 HTML 提示框,此前,DevTools 一直都是使用内部开发的自定义提示框,这是碍于原生的 HTML 提示框缺乏自定义风格(Styling)支持,因此 DevTools 使用自定义提示框的支持。
不幸的是,维护自定义提示框的实现是一件很棘手的事。我们经常会遇到一些很复杂的 bugs。
在重新评估自定义提示框带来的好处之后,我们认为原生的 HTML 提示框对于 DevTools 来说已经足够了。采用原生提示框可以避免用户遇到各式各样的问题。
其他
想看当前浏览器的版本
想看当前版本更新了什么
参考资料
🎨【点赞】【关注】不迷路,更多前端干货等你解锁
往期推荐