近日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