近日Chrome更新了 87 最新版，這是今年最后一次 Chrome 更新了，這個(gè)版本是多年來 Chrome 性能獲得最大提升的一次，開發(fā)者工具也進(jìn)行了大幅度更新。

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

另外，在 Mac 上的 Chrome 還更新了圖標(biāo)，這應(yīng)該是為了適配 Big Sur 專門進(jìn)行的設(shè)計(jì)。

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

PS：最新的 Chrome 更新視頻是一個(gè)日裔女的解說，這英語口語真是醉了...

1. 新的 CSS Grid 調(diào)試工具

現(xiàn)在 DevTools 對 CSS 的 Grid 有了更好的支持。

CSS grid debugging

當(dāng)頁面上的 HTML 元素具有 display: grid 或 display: inline-grid 時(shí)，可以在 Elements 面板中看到它旁邊的一個(gè) Grid 標(biāo)記。單擊標(biāo)記可以切換頁面上 Grid 覆蓋的高亮顯示。

新的 Layout 子面板有一個(gè) Grid 標(biāo)簽，提供了查看 Grid 的一些選項(xiàng)。

查看文檔以了解更多信息。

對應(yīng) Chromium issue: 1047356 

2. 新的 WebAuthn 面板

現(xiàn)在，可以模擬身份驗(yàn)證器并使用新的 WebAuthn 選項(xiàng)卡調(diào)試 Web 身份驗(yàn)證 API。

WebAuthn

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

WebAuthn tab

在 WebAuthn 標(biāo)簽出現(xiàn)之前，Chrome 上不支持原生的 WebAuthn 調(diào)試。開發(fā)人員需要物理身份驗(yàn)證器來測試他們的 Web 應(yīng)用程序。

有了新的 WebAuthn 標(biāo)簽，Web 開發(fā)人員現(xiàn)在可以模擬認(rèn)證器，定制它們的功能，并檢查它們的狀態(tài)，而不需要任何物理認(rèn)證器。這使得調(diào)試體驗(yàn)更加容易。

查看我們的文檔了解更多關(guān)于 WebAuthn 特性的信息。

對應(yīng) Chromium issue: 1034663

3. 開發(fā)者工具的面板現(xiàn)在支持垂直分屏

DevTools 現(xiàn)在支持將 DevTools 工具面板移動到頂部和底部，通過這種方式，可以同時(shí)分屏查看任意兩個(gè)工具面板。

例如，如果想同時(shí)查看 Elements 和 Sources 面板，可以右鍵單擊 Sources 面板，并選擇移動到底部。

Move to bottom

類似地，可以將任何底部選項(xiàng)卡移動到頂部，方法是右鍵單擊選項(xiàng)卡并選擇 Move to top。

Move to top

4. Elements 面板功能更新

4.1 在 Styles 子面板中查看 Computed 側(cè)邊欄

現(xiàn)在可以切換 Styles 面板中的 Computed 側(cè)邊欄。

默認(rèn)情況下，Styles 面板中的 Computed 側(cè)邊欄是折疊的，單擊按鈕可以切換展開狀態(tài)。

Computed sidebar pane

對應(yīng) Chromium issue: 1073899

4.2 在 Computed 面板中對 CSS 屬性進(jìn)行分組

現(xiàn)在可以在 Computed 側(cè)邊欄中按類別對 CSS 屬性進(jìn)行分組。

有了這個(gè)新的分組特性，在 Computed 中查找和選擇性地關(guān)注一組相關(guān) CSS 屬性變得更加容易。

在 Elements 面板上，選擇一個(gè)元素，單擊 Group 復(fù)選框，可以對 CSS 屬性進(jìn)行分組/取消分組。

Grouping CSS properties

對應(yīng) Chromium issues: 1096230, 1084673, 1106251

5. Lighthouse 更新 Lighthouse 6.4

Lighthouse 面板現(xiàn)在更新到了 Lighthouse 6.4，查看 release notes 可以看到完整的新特性清單。

Lighthouse

Lighthouse 6.4 中的新特性：

1.  Preload fonts：報(bào)告是否所有使用了 font-display: optional 的字體文件是否都有預(yù)加載成
2.  Valid sourcemaps：報(bào)告頁面上非第三方 JS 的 sourcemap 文件是否正確
3.  Large JavaScript library（實(shí)驗(yàn)性特性）：報(bào)告頁面上的大型 JS 庫（比如：moment.js)

對應(yīng) Chromium issue: 772558

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

Performance 面板記錄的 Timing 部分現(xiàn)在會標(biāo)記 Performance.mark() 事件。

Performance.mark events

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

現(xiàn)在可以使用 Network 面板中的 resource-type 和 url 關(guān)鍵字篩選網(wǎng)絡(luò)請求。

例如，使用 resource-type: image 可以篩選出請求圖像的網(wǎng)絡(luò)請求。

resource-type filter

點(diǎn)擊更多的篩選條件，可以查看到更多類似于 resource-type 和 url 的篩選用法。

對應(yīng) Chromium issues: 1121141, 1104188

8. Application 面板中 Frames 子面板相關(guān)的更新

8.1 支持展示 COEP 和 COOP 的向誰報(bào)告字段

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

Reporting Api 定義了一個(gè)叫做 Report-To 的新的 HTTP Header，當(dāng)網(wǎng)站中出現(xiàn)違背 COEP （Cross-Origin Embedder Policy）和 COOP（Cross-Origin Opener Policy）的情況時(shí)，瀏覽器會向這個(gè)頭部指定的地址發(fā)送報(bào)告。

reporting to endpoint

關(guān)于如何開啟 COEP 和  COOP 來使你的網(wǎng)站實(shí)現(xiàn)跨源隔離（cross-origin isolated）可以查看這篇文章

對應(yīng) Chromium issue: 1051466

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

Devtools 對于 COEP、COOP 為 report-only 的情況，新增了標(biāo)記展示

report-only label

觀看這個(gè)視頻，學(xué)習(xí)如何防止信息泄漏，以及如何開啟 COOP 和 COEP。

對應(yīng) Chromium issue: 1051466

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

More tools 菜單中的 Setting 已不推薦使用，請從主面板打開 Setting。

Settings in the main panel

對應(yīng) Chromium issue: 1121312

10. 實(shí)驗(yàn)特性

以下特性均需要開啟 Settings >  Experiments 下的相關(guān)選項(xiàng)

10.1 CSS Overview 面板中支持查看、修復(fù)色彩對比度問題

CSS Overview 面板展示了你的頁面中低色彩對比文本的色彩列表。

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

Low color contrast issues

單擊列表中的某個(gè)元素可以打開 Elements 面板中的元素，DevTools 將提供自動顏色建議，幫助修復(fù)文本的低色彩對比度問題。

對應(yīng) Chromium issue: 1120316

10.2 DevTools 支持自定義鍵盤快捷鍵了

現(xiàn)在可以在 DevTools 中自定義鍵盤快捷鍵。

進(jìn)入 Settings > Shortcuts，將鼠標(biāo)懸停在一個(gè)命令上，點(diǎn)擊編輯按鈕來自定義快捷鍵。

Customize keyboard shortcuts

要重置所有快捷方式，請單擊 Restore default shortcuts 還原默認(rèn)快捷鍵。

對應(yīng) Chromium issue: 174309