Chrome 96又更新了5個巨巨巨好用的功能
收到了 Chrome 96 版本的更新推送，簡單看了一下，還是更新了幾個挺有趣的東西的，一起來看看到底都有啥~
先下載 Chrome Beta 版本才能體驗 Chrome 96 哈
我們順便來給每個功能打個分吧~ 滿分五顆星 ??????????
CSS Overview
我剛打開控制臺，第一個映入眼簾的就是 CSS Overview
是啥呢？其實就是分析你當前頁面，生成一個CSS報告，用于幫助開發(fā)者分析頁面是否還有潛在的可以改善的CSS，例如 未使用的CSS、不匹配的字體、整體顏色使用情況、媒體查詢的數(shù)量 等等
說啥都不如試一遍
哈哈，特地轉(zhuǎn)成中文給你們演示。感覺這個功能生成的報告比較適合簡單分析并發(fā)現(xiàn)問題，其中 未使用的CSS 其實不是很絕對，因為有些 class 是動態(tài)加載的，那時才能應(yīng)用上對應(yīng)的CSS樣式
打分：??????
深色主題
這個我吹爆?。?！ 前段時間我還天天找一個好用的切換深色主題的瀏覽器插件，講真的，沒一個好用的，這不 Chrome 原生支持深色主題了！
來，一張動圖教你們怎么開啟~
是不是很酷，瀏覽器原生支持深色模式，各種頁面的兼容性肯定是最好的，反正我暫時沒有發(fā)現(xiàn)什么問題。（我的眼睛有救了T^T）
打分：??????????
以JS屬性復(fù)制CSS樣式
你們應(yīng)該都有在瀏覽器復(fù)制樣式到編輯器里的操作吧
看到了，復(fù)制出來的格式都是用于寫在 .css 文件中的，非常好用，每個屬性也都是以 ; 結(jié)尾的
而有些地方的CSS寫法就不是這樣的，就像 React 中的內(nèi)聯(lián) Style 屬性的對象寫法，如：
const?APP?=?()?=>?{
??return?(
????<div?
??????style={{
????????color:?'#fff',
????????marginTop:?10,
????????paddingLeft:?20,
??????}}
????/>
??)
}
要是把剛才復(fù)制的CSS粘貼進去，還得改駝峰、分號改逗號，px加引號 等等
而 Chrome 96 更新了一個菜單功能，可以直接復(fù)制到類似 React 內(nèi)聯(lián) Style 的樣式對象的格式
雖然說很多項目中都有代碼的格式化，但這個功能也可以說是很方便了~
打分：??????
Network 之 Payload 面板
Payload 面板是啥？其實就是我們經(jīng)常在 Network 里看請求時的請求參數(shù)，儂，就是這個
其實就是請求參數(shù)，這也是我們關(guān)注最多的內(nèi)容了，現(xiàn)在 Chrome 96 單獨把它抽離出來放在一個面板中
簡單粗暴的功能，再也不用點進去往下滑呀滑了~
打分：??????????
Reporting API
這是一個實驗性功能，意味著還需要一段時間的改善和試用，我們想要使用的話，必須在 Chrome devtool 的設(shè)置里打開，打開以后還需要重啟 devtool
開啟后在哪看呢？在這！
你們肯定關(guān)心它是干啥的，如其名，用來報告的，報告啥呢？其實就是幫你監(jiān)控頁面，然后監(jiān)測一些不太友好的東西，然后上報信息
什么是不太友好的東西？例如 線上錯誤、頁面的安全問題、已棄用API仍在使用、瀏覽器崩潰等等，這些情況 Reporting API 都會通通幫你上報，等你啥時候有空了，去報告里 review 一下，解決一下問題
對了，它都會上報哪些信息呢？
Timestamp：上報時間 body：報告數(shù)據(jù) type：上報類型 url：生成報告的目標url user_agent：請求頭中的 User-Agent
我監(jiān)測了幾個頁面，終于收集到一個報告了
好了，本文就不展開介紹這個API的具體使用了，不過現(xiàn)在看來，這個功能好像挺不錯的哈~ 像是一個運行質(zhì)量監(jiān)控器
打分：???????? （還沒大面積使用，給四顆星，怕它驕傲）
最后
對于 Chrome 96 更新的這 5 個新功能，你最喜歡哪一個？歡迎在評論區(qū)留言 ??