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

新功能: Performance insights 面板

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

如果想了解更多讯息，请参考：
https://developer.chrome.com/blog/new-in-devtools-102

声明：本站文章，有些原创，有些转载，如发现侵权侵请联系删除。本站所有原创帖均可复制、搬运，开网站就是为了大家一起乐乐，不在乎版权。对了，本站小水管，垃圾服务器，请不要采集，吐槽君纯属用爱发电，经不起折腾。