立即登录

浏览器脚本运行时间长 新功能: Performance insights 面板

11/28 01:12:45

浏览器脚本运行时间长 新功能: Performance insights 面板

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

新功能: Performance insights 面板

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

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

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

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

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

vb脚本运行_浏览器脚本运行时间长_运行vb脚本

改进 Network Preview 的安全性

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

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

浏览器脚本运行时间长_vb脚本运行_运行vb脚本

改进了断点处的重新加载

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

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

控制台更新抛出错误事件

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

vb脚本运行_运行vb脚本_浏览器脚本运行时间长

Enter 提交实时表达式

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

运行vb脚本_浏览器脚本运行时间长_vb脚本运行

用户流记录可取消

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

运行vb脚本_浏览器脚本运行时间长_vb脚本运行

继承伪元素高亮显示

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

vb脚本运行_浏览器脚本运行时间长_运行vb脚本

其他亮点[Experimental] 复制 CSS

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

vb脚本运行_浏览器脚本运行时间长_运行vb脚本

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

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

vb脚本运行_运行vb脚本_浏览器脚本运行时间长

来源:【九爱网址导航www.fuzhukm.com】 免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

最新资讯