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

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

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

新功能: Performance insights 面板

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

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

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

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

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

改进 Network Preview 的安全性

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

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

改进了断点处的重新加载

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

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

控制台更新抛出错误事件

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

Enter 提交实时表达式

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

用户流记录可取消

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

继承伪元素高亮显示

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

其他亮点[Experimental] 复制 CSS

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

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

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

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