Chrome效能有了最大提升！ （Chrome87新特性解讀）

今天 Chrome 更新了 87 最新版，這是今年最後一次 Chrome 更新了，這個版本是多年來 Chrome 效能獲得最大提升的一次，開發者工具也進行了大幅度更新。

有用戶認為，原本Chrome 的性能問題詬病已久，然而在新Edge 出來了以後，性能突然就提升了，這顯然是谷歌方面受到了Edge 市場份額暴增帶來的壓力。

另外，在 Mac 上的 Chrome 也更新了圖標，這應該是為了適合 Big Sur 專門進行的設計。

原文：https://developers.google.com/web/updates/2020/10/devtools

PS：最新的Chrome 更新影片是日裔女的解說，這英文口語真是醉了...

1. 新的CSS Grid 偵錯工具

現在DevTools 對CSS 的Grid 有了更好的支持。

CSS grid debugging

當頁面上的HTML 元素具有display: grid 或display: inline-grid 時，可以在Elements 面板中看到它旁邊的一個Grid 標記。點擊標記可以切換頁面上 Grid 覆蓋的高亮顯示。

新的 Layout 子麵板有一個 Grid 標籤，提供了查看 Grid 的一些選項。

查看文件以了解更多資訊。

對應Chromium issue: 1047356

2. 新的WebAuthn 面板

現在，可以模擬身份驗證器並使用新的WebAuthn 選項卡調試Web 驗證API。

WebAuthn

如圖選擇 More options > More tools > WebAuthn 可以開啟 WebAuthn 面板。

WebAuthn tab

在 WebAuthn 標籤出現之前，Chrome 上不支援原生的 WebAuthn 偵錯。開發人員需要實體身份驗證器來測試他們的 Web 應用程式。

有了新的 WebAuthn 標籤，Web 開發人員現在可以模擬認證器，自訂它們的功能，並檢查它們的狀態，而不需要任何實體認證器。這使得調試體驗更加容易。

查看我們的文件以了解更多關於 WebAuthn 功能的資訊。

對應Chromium issue: 1034663

3. 開發者工具的面板現在支援垂直分割畫面

DevTools 現在支援將DevTools 工具面板移到頂部和底部，透過這種方式，可以同時分割畫面查看任兩個工具面板。

例如，如果想同時查看 Elements 和 Sources 面板，可以右鍵點擊 Sources 面板，並選擇移動到底部。

Move to bottom

類似地，可以將任何底部選項卡移到頂部，方法是右鍵單擊選項卡並選擇 Move to top。

Move to top

4. Elements 面板功能更新

4.1 在Styles 子麵板中查看Computed 側邊欄

現在可以切換Styles 面板中的Computed 側邊欄。

預設情況下，Styles 面板中的 Computed 側邊欄是折疊的，點擊按鈕可以切換展開狀態。

Computed sidebar pane

對應Chromium issue: 1073899

4.2 在Computed 面板中對CSS 屬性進行分組

現在可以在Computed 側邊欄中按類別對CSS 屬性進行分組。

有了這個新的分組特性，在 Computed 中尋找並選擇性地專注於一組相關 CSS 屬性變得更加容易。

在 Elements 面板上，選擇一個元素，按一下 Group 複選框，可以將 CSS 屬性分組/取消分組。

Grouping CSS properties

對應Chromium issues: 1096230, 1084673, 1106251

5. Lighthouse 更新Lighthouse 6.4

Lighthouse 面板現在更新到了Lighthouse 6.4，查​​看release notes 可以看到完整的新功能清單。

Lighthouse

Lighthouse 6.4 中的新功能：

1. Preload fonts：報告是否所有使用了font-display: optional 的字體檔案是否都有預先加載成

2. Valid sourcemaps：報告頁面上非第三方JS 的sourcemap 檔案是否正確

3. Large JavaScript library（實驗特性）：報告頁面上的大型JS 函式庫（例如：moment.js)

對應Chromium issue: 772558

6. 在Performance 面板中的事件線（Timings）上將標記出performance.mark() 事件

Performance 面板記錄的Timing 部分現在會標記Performance.mark() 事件。

Performance.mark events

#7. Network 面板新增resource-type、url 篩選條件

現在可以使用Network 面板中的resource-type 和url 關鍵字篩選網路請求。

例如，使用 resource-type: image 可以篩選出請求映像的網路請求。

resource-type filter

點擊更多的篩選條件，可以查看更多類似resource-type 和url 的篩選用法。

對應Chromium issues: 1121141, 1104188

8. Application 面板中Frames 子麵板相關的更新

8.1 支援展示 #COEP 和COOP 的向誰報告欄位

現在可以在Application 面板的Frames 子麵板的Security & Isolation 部分查看向終端報告的COEP （Cross-Origin Embedder Policy）和COOP（Cross-Origin Opener Policy）。

Reporting Api 定義了一個叫做Report-To 的新的HTTP Header，當網站中出現違反COEP （Cross-Origin Embedder Policy）和COOP#（Cross -Origin Opener Policy）的情況時，瀏覽器會傳送報告給這個頭部指定的位址。

reporting to endpoint

關於如何開啟COEP 和 COOP 來讓你的網站實現跨來源隔離（cross-origin isolated）可以查看這篇文章

對應Chromium issue: 1051466

8.2 展示COEP 和COOP 的report-only 模式

Devtools 對於COEP、COOP 為report-only 的情況，新增了標記展示

report-only label

觀看這個視頻，學習如何防止資訊外洩，以及如何開啟COOP 和COEP。

對應Chromium issue: 1051466

9. 移除More tools 選單中的Setting 按鈕

##More tools 選單中的Setting 已不建議使用，請從主面板開啟Setting。

Settings in the main panel

#對應Chromium issue: 1121312

##10. 實驗特性

#以下特性皆需要開啟Settings >  Experiments 下的相關選項

10.1 CSS Overview 面板中支援檢視、修復色彩對比問題

CSS Overview 面板展示了你的頁面中低色彩對比文字的色彩清單。

這個 Demo 頁面展示了一個低色彩對比的反面案例，打開這個 CSS Overview 面板可以查看到所有有問題的元素清單。

Low color contrast issues

#點擊清單中的某個元素可以開啟Elements 面板中的元素，DevTools 將提供自動色彩建議，幫助修復文本的低色彩對比問題。

對應 Chromium issue: 1120316

10.2 DevTools 支援自訂鍵盤快速鍵了

現在可以在 DevTools 中自訂鍵盤快速鍵。

進入 Settings > Shortcuts，將滑鼠停留在一個命令上，點擊編輯按鈕來自訂快捷鍵。

Customize keyboard shortcuts

要重設所有捷徑，請按一下 Restore default shortcuts 還原預設快速鍵。

對應 Chromium issue: 174309