作者 | 零一

來源 | 前端印象

???????大家好，收到了 Chrome 96 版本的更新推送，簡單看了一下，還是更新了幾個挺有趣的東西的，一起來看看到底都有啥~

先下載 Chrome Beta 版本才能體驗 Chrome 96 哈

Chrome Beta

我們順便來給每個功能打個分吧~ 滿分五顆星 ??????????

CSS Overview

我剛打開控制臺，第一個映入眼簾的就是 CSS Overview

CSS Overview

是啥呢？其實就是分析你當前頁面，生成一個CSS報告，用于幫助開發者分析頁面是否還有潛在的可以改善的CSS，例如 未使用的CSS、不匹配的字體、整體顏色使用情況、媒體查詢的數量 等等

說啥都不如試一遍

哈哈，特地轉成中文給你們演示。感覺這個功能生成的報告比較適合簡單分析并發現問題，其中 未使用的CSS 其實不是很絕對，因為有些 class 是動態加載的，那時才能應用上對應的CSS樣式

打分：??????

深色主題

這個我吹爆啊！！ 前段時間我還天天找一個好用的切換深色主題的瀏覽器插件，講真的，沒一個好用的，這不 Chrome 原生支持深色主題了！

來，一張動圖教你們怎么開啟~

開啟深色模式

是不是很酷，瀏覽器原生支持深色模式，各種頁面的兼容性肯定是最好的，反正我暫時沒有發現什么問題。（我的眼睛有救了T^T）

打分：??????????

以JS屬性復制CSS樣式

你們應該都有在瀏覽器復制樣式到編輯器里的操作吧

復制CSS樣式

看到了，復制出來的格式都是用于寫在 .css 文件中的，非常好用，每個屬性也都是以 ; 結尾的

而有些地方的CSS寫法就不是這樣的，就像 React 中的內聯 Style 屬性的對象寫法，如：

const?APP?=?()?=>?{return?(<div?style={{color:?'#fff',marginTop:?10,paddingLeft:?20,}}/>) }

要是把剛才復制的CSS粘貼進去，還得改駝峰、分號改逗號，px加引號 等等

而 Chrome 96 更新了一個菜單功能，可以直接復制到類似 React 內聯 Style 的樣式對象的格式

雖然說很多項目中都有代碼的格式化，但這個功能也可以說是很方便了~

打分：??????

Network 之 Payload 面板

Payload 面板是啥？其實就是我們經常在 Network 里看請求時的請求參數，儂，就是這個

其實就是請求參數，這也是我們關注最多的內容了，現在 Chrome 96 單獨把它抽離出來放在一個面板中

簡單粗暴的功能，再也不用點進去往下滑呀滑了~

打分：??????????

Reporting API

這是一個實驗性功能，意味著還需要一段時間的改善和試用，我們想要使用的話，必須在 Chrome devtool 的設置里打開，打開以后還需要重啟 devtool

開啟 Reporting API

開啟后在哪看呢？在這！

Reporting API

你們肯定關心它是干啥的，如其名，用來報告的，報告啥呢？其實就是幫你監控頁面，然后監測一些不太友好的東西，然后上報信息

什么是不太友好的東西？例如 線上錯誤、頁面的安全問題、已棄用API仍在使用、瀏覽器崩潰等等，這些情況 Reporting API 都會通通幫你上報，等你啥時候有空了，去報告里 review 一下，解決一下問題

對了，它都會上報哪些信息呢？

• Timestamp：上報時間

• body：報告數據

• type：上報類型

• url：生成報告的目標url

• user_agent：請求頭中的 User-Agent

我監測了幾個頁面，終于收集到一個報告了

上報信息

好了，本文就不展開介紹這個API的具體使用了，不過現在看來，這個功能好像挺不錯的哈~ 像是一個運行質量監控器

打分：???????? （還沒大面積使用，給四顆星，怕它驕傲）

最后

對于 Chrome 96 更新的這 5 個新功能，你最喜歡哪一個？歡迎在評論區留言 👏??????

往期推薦

云計算到底是誰發明的？

長跑11年，騰訊開源的變與不變

低代碼發展專訪系列之一：低代碼平臺產品的使用者都是誰？

內容整理志愿者招募了！

點分享

點收藏

點點贊

點在看

總結

以上是生活随笔為你收集整理的Chrome 96 又更新了 5 个巨巨巨好用的功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。