背景
Chrome 團隊今年釋出了不少新的功能，幫助開發者提升網頁開發體驗。
在最近的 Google 開發者大會上，介紹了最新的七大功能，它們分別是:
- 支援css-in-js的框架的樣式編輯
- 模擬時區功能
- Lighthouse 量化使用者體驗
- Issues 皮膚
- 媒體皮膚
- 一件修復文字的色彩對比
- 及時模擬色覺障礙
我在週末整理了一下這些內容， 非常詳細。
下面我們就一起來個看看每個功能的細節吧。
正文
1. 支援css-in-js的框架的樣式編輯
看到這個功能的時候， 你可能會好奇， Chrome Devtool 不是早就可以編輯css了嗎？
沒錯，但是原本支援的是「 普通的css 」, 不是 「css-in-js」.
現在，“樣式”窗格對編輯使用CSS物件模型（CSSOM）API建立的樣式提供了更好的支援 。
許多 CSS-in-JS框架和庫都在底層使用CSSOM API來構造樣式。
例如，（CSSOM API）h1新增的樣式CSSStyleSheet以前不可編輯。
因為它是css-in-js的程式碼。
但是現在可以在“樣式”窗格中進行編輯了：
動態演示：
2. 模擬時區功能
Chrome Devtool 能幫你模擬時區， 有了這個功能， 你就能很方便的測試國際化相關的一些功能。
比如：
在馬來西亞的時間顯示為：
如果想看在倫敦的時間， 就可以修改控制檯的設定為倫敦：
顯示的時間就改為倫敦時間了：
很方便吧～
開啟這個皮膚的方法為：
選擇location 就可以了：
3. Lighthouse 量化使用者體驗
Lighthouse 推出了新的體驗量化方式：Core Web Vitals.
你可以開啟lightHouse 皮膚， 生成報告來檢視：
示例：
想要了解更多關於 Core Web Vitals的資訊， 可以關注：
4. Issues 皮膚
大家是否對開發皮膚中的警告資訊感到厭煩呢？ 比如：
新的 Issues 標籤 的主要目的是：整合瀏覽器， javascript 庫， 框架的各種警告與異常資訊， 給大家一些修復建議。
開啟devtool, 重新整理網頁，如果有警告資訊的話， 會只顯示一條View issues 連結， 如圖：
點選這個連結， 才會看到全部的 issues 列表， 也可以點選具體的某個 issue 檢視具體的資訊：
有了這個功能， 整個皮膚就更清爽了。
5. 媒體皮膚
新的媒體皮膚提供了一站式的資源與資訊， 讓你能更快的除錯媒體問題。
瀏覽一個有視訊流的網站， 開啟媒體面版，
可以看到不同的分類，每一個類別下包含了具體詳細的媒體資訊。
你甚至可以下載視訊，更方便的去排查問題：
6. 一件修復文字的色彩對比
devtool 會根據你的背景與字型顏色，自動提供文字的色彩對比建議， 比如：
我們看到， devtool 提供了 AA 與 AAA 兩個色彩建議， 任意點選其中一個， 就是修復後的顏色：
是不是很棒～
7. 及時模擬色覺障礙
你可以利用 devtool 來模擬視覺障礙。
地球上大約有3億人有不同程度的色覺障礙
身為網頁開發者的我們， 如有能有工具輔助我我們在開發時找出色覺障礙的問題， 這不是很好嗎？
先給大家介紹一下視覺障礙與色覺障礙。
視覺障礙的不同型別：
模糊視線
全色盲
紅色盲
有了視覺模擬的功能， 就可以更方面的我們去設定無障礙資源， 有效的檢測網頁的色彩對比度：
這個功能，能幫你更好的完善網頁的無障礙資源， 改善使用者體驗。
What's More
除了以上這些， 還有更多的新功能等待你去探索：
篇幅關係，就不一一介紹。
福利大放送
提供一個 google 研發的部落格， 不定時釋出開發心得與分享， 不容錯過～～
總結
內容大概就這麼多， 希望對大家有所幫助～