Chrome 102 更新一览

战场小包 行业动态 1月前 阅读 1366

近日,Chrome 102 版本发布,我们来一起看一下此次更新的具体内容。

新功能: Performance insights 面板

利用 Performance insights 面板,可以获取网站性能的可操作性和用例驱动的观察。打开面板,根据你的用例开启新的录制,例如下面我们来估计整个演示页面的负载。

image.png

录制完毕后,我们可以在 insights 中看到整个页面的负载分解,每个分解项目(例如阻止渲染请求、布局变换等)都可以点击查看详情。

该项功能目前处于测试阶段,可以帮助 Web 开发人员(尤其是非性能专家) 识别和修复潜在的性能问题。

新快捷方式: 明暗主题的模拟

样式窗中提供新快捷方式来更快的模拟浅色和深色主题功能,也就是 CSS 媒体功能 prefers-color-scheme

image.png

改进 Network Preview 的安全性

新版本的 Network Preview 的选项卡使用了 Content Security Policy (CSP),有效提高了该选项卡的安全性。

例如右面的屏幕快照为包含多种内容的页面,页面通过安全 https 进行加载,但样式表通过不安全的 http 加载。浏览器会默认拦截不安全的样式表请求,改进后, Network Preview 的选项卡将把不安全请求渲染为红色,具体可以参考左边的屏幕快照。

image.png

改进了断点处的重新加载

React 演示 中,如果给 ReactDOM 设置断点进行重新加载,当前脚本会进入无限循环模式。Sources面板也因此失效

此种情况下浏览器处于错误模式,继续执行 JavaScript 会带来很多问题,因此此次版本调试器在断点处重新加载奖终止脚本运行。

image.png

控制台更新

抛出错误事件

控制台执行脚本可以抛出错误事件,该事件可以被 window.onerror 处理程序捕获。

image.png

Enter 提交实时表达式

以往按下 Enter 键后,控制台会增加新行,该版本使用 Enter 可以提交实时表达式,如果想要添加新行,请改用ShiftEnter

image.png

用户流记录可取消

当前版本中,可以在录制期间取消用户流的录制。

image.png

继承伪元素高亮显示

在样式窗格中可以查看继承的高亮伪元素(例如::selection::spelling-error::grammar-error::highlight

image.png

其他亮点

  • Properties 面板默认显示具有值得访问器属性
  • 修复 Styles 面板将覆盖的 @support 规则显示错误的问题,将其显示为删除线
  • 修复了 Sources 面板中的因 CSS 格式化逻辑造成的多空行问题
  • 将控制台的递归扩展最大限制为 100,避免其被用于循环引用对象

[Experimental] 复制 CSS

Styles 面板中,绿色突显出 CSS 更改,鼠标悬停在该位置,单击旁边的新复制按钮可以复制 CSS 更改。还通过右键单击任何规则并选择 Copy all CSS changes 来跨声明复制所有 CSS 更改。

image.png

[Experimental] 浏览器之外选取颜色

该实验中, 于 Styles 面板可开启颜色选择器,使用吸管可以选取任意地方的颜色。

image.png

如果想了解更多讯息,请参考:developer.chrome.com/blog/new-in…

评论