Chrome 89 新功能一覽，性能提升明顯，大量 DevTools 新特性！

今天 Chrome 更新了最新版本 Chrome89，新版本在啟動(dòng)、響應(yīng)速度上更快，同時(shí) CPU 占用率大幅下降。

比如，提供前進(jìn)后退緩存（20%的頁面可瞬時(shí)進(jìn)退）等特性，號稱啟動(dòng)速度快了 25%、載入頁面速度快了 7%、CPU 占用減少了 5 倍、可增加額外 1.25 小時(shí)續(xù)航，內(nèi)存占用量也優(yōu)化了。

原文：https://developers.google.com/web/updates/2021/01/devtools

下面來具體看看更新了哪些內(nèi)容。

1. Elements 面板相關(guān)更新

支持選擇 CSS 的 :target 偽類

現(xiàn)在可以使用 DevTools 選中和檢查 :target 狀態(tài)。

在 Elements 面板中，選擇一個(gè)元素，可以在右側(cè)切換 :target。

當(dāng) URL 中的 hash 和 DOM 元素的 id 相同時(shí)，將觸發(fā)該元素的 :target 偽類?？梢渣c(diǎn)擊這個(gè) Demo 看看效果，這個(gè)新的 DevTools 特性可以讓你測試這些樣式，而不必一直手動(dòng)更改 URL。

對應(yīng) Chromium issue: 1156628

復(fù)制 DOM 元素的新選項(xiàng)

右鍵單擊元素面板中的一個(gè)元素，選擇 Duplicate element，將在其下面快速創(chuàng)建一個(gè)新元素。

或者，你可以使用鍵盤快捷鍵復(fù)制元素：

• Mac: Shift + Option + ??
• Window/ Linux: Shift + Alt + ??

對應(yīng) Chromium issue: 1150797, 1150797

自定義 CSS 屬性的顏色選擇器

在 Elements 面板的 Styles 窗格現(xiàn)在可以顯示自定義 CSS 屬性的顏色選擇器。

此外，按住 Shift 鍵并單擊顏色選擇器，可以切換顏色值的 RGBA、 HSLA 和 Hex 表示。

對應(yīng) Chromium issue: 1147016

復(fù)制 CSS 屬性的新選項(xiàng)

你現(xiàn)在可以用新的快捷方式更快地復(fù)制 CSS 屬性。

在 Elements 面板中，選擇一個(gè)元素。然后，在 Styles 窗格中右鍵單擊 CSS 類或 CSS 屬性以復(fù)制該值。

類的復(fù)制選項(xiàng):

• Copy selector：復(fù)制當(dāng)前選擇器名稱；
• Copy rule：復(fù)制當(dāng)前選擇器的規(guī)則；
• Copy all declarations：復(fù)制當(dāng)前規(guī)則下的所有聲明，包括無效屬性和帶前綴的屬性。

屬性的復(fù)制選項(xiàng):

• Copy declaration：復(fù)制當(dāng)前行的聲明；
• Copy property：復(fù)制當(dāng)前行的屬性；
• Copy value：復(fù)制當(dāng)前行的值。

對應(yīng) Chromium issue: 1152391

2. Network 面板相關(guān)升級

保持記錄網(wǎng)絡(luò)日志

DevTools 現(xiàn)在始終保持記錄網(wǎng)絡(luò)日志（Record network log）設(shè)置。以前，每當(dāng)頁面重新加載時(shí)，DevTools 都會(huì)重置用戶的選擇。

對應(yīng) Chromium issue: 1122580

在 Network 面板中查看 WebTransport 連接

網(wǎng)絡(luò)面板現(xiàn)在顯示 WebTransport 連接。

WebTransport 是一個(gè)新的 API，可以提供低延遲的客戶端與服務(wù)端的雙向消息傳遞。

對應(yīng) Chromium issue: 1152290

“Online” 改為 “No throttling”

網(wǎng)絡(luò)模擬選項(xiàng) Online 現(xiàn)在被重命名為 No Throttling。

對應(yīng) Chromium issue: 1028078

3. Console、Sources、Styles 面板中新的復(fù)制選項(xiàng)

Console、Sources 面板中復(fù)制對象的新選項(xiàng)

現(xiàn)在可以使用 Console 和 Sources 面板中的新選項(xiàng)來快捷復(fù)制對象值。這非常方便，尤其是當(dāng)需要復(fù)制一個(gè)比較大的對象（例如一個(gè)長數(shù)組）時(shí)。

對應(yīng) Chromium issues: 1149859, 1148353

Sources、Styles 面板中復(fù)制文件名的新選項(xiàng)

你現(xiàn)在可以通過右鍵點(diǎn)擊復(fù)制文件名：

1. 在 Sources 面板的文件名
2. 在 Elements 面板中的 Styles 標(biāo)簽的文件名

從上下文菜單中選擇 Copy file name 以復(fù)制文件名。

對應(yīng) Chromium issue: 1155120

4. 對可信類型（Trusted Types）的調(diào)試支持

可信類型斷點(diǎn)

現(xiàn)在可以在 Source 面板中設(shè)置斷點(diǎn)和捕獲可信類型違規(guī)的異常。

可信類型（Trusted Types） API 有助于防止基于 DOM 的跨站腳本攻擊（XSS）。點(diǎn)擊這里了解如何使用可信類型來避免 XSS 攻擊。

你可以自己試試這個(gè)演示頁面中嘗試一下，在 Sources 面板中，打開右側(cè)調(diào)試器。展開 CSP Violation Breakpoints 部分，并啟用 Trusted Type violations 復(fù)選框來在異常發(fā)生時(shí)暫停 script 運(yùn)行。

對應(yīng) Chromium issue: 1142804

在 Issues 選項(xiàng)卡中鏈接 Sources 面板中的提示框

現(xiàn)在，Sources 面板在違反 Trusted Type 的代碼行旁邊顯示了一個(gè)警告圖標(biāo)，將鼠標(biāo)懸停在這個(gè)圖標(biāo)上時(shí)可以預(yù)覽異常。單擊它展開 Issues 選項(xiàng)卡，選項(xiàng)卡提供了關(guān)于異常的更多細(xì)節(jié)，以及如何修復(fù)異常的提示。

對應(yīng) Chromium issue: 1150883

5. 支持超出視口的元素截圖

現(xiàn)在可以捕獲一個(gè)包括視口外的內(nèi)容完整的節(jié)點(diǎn)屏幕截圖。在此之前，屏幕截圖因?yàn)闊o法截取視口外的內(nèi)容而得不到完整的截圖。

整個(gè)瀏覽器頁面的截圖現(xiàn)在也可以得到同樣的完整截圖。

在 Element 面板中，右鍵單擊一個(gè) DOM 元素并選擇 Capture node screenshot 可以使用元素截圖功能。

對應(yīng) Chromium issue: 1003629

6. Network 面板中新增的 Trust Tokens 選項(xiàng)卡

使用新的 Trust Tokens 選項(xiàng)卡檢查網(wǎng)絡(luò)請求的可信類型。

Trust Token 是一個(gè)新的 API，可以在不需要被動(dòng)跟蹤幫助打擊網(wǎng)絡(luò)詐騙、區(qū)分機(jī)器人和真人。

進(jìn)一步的調(diào)試支持將在 Chrome 下一個(gè)版本中提供。

對應(yīng) Chromium issue: 1126824

7. Lighthouse 面板升級到 Lighthouse7

Lighthouse 現(xiàn)在升級到了 Lighthouse7，點(diǎn)擊這里了解具體變更明細(xì)。

對應(yīng) Chromium issue: 772558

8. Cookies 相關(guān)更新

顯示 url 解碼后的 cookie 的新選項(xiàng)

現(xiàn)在，可以在 Cookies 窗格中查看 url 解碼后的 cookie 值。

轉(zhuǎn)到 Application 面板并選擇左側(cè)的 Cookies 選項(xiàng)。選擇列表中的任何 cookie。啟用新的 Show URL decoded 復(fù)選框可以查看解碼后的 cookie。

對應(yīng) Chromium issue: 997625

只清除過濾后的 cookie

Cookies 選項(xiàng)窗格中的 Clear all cookies 按鈕現(xiàn)在被 Clear filtered cookies 按鈕取代。

在 Application > Cookies 窗格中，在文本框中輸入文本以過濾 cookie。下圖我們使用 PREF 過濾列表。單擊 Clear filtered cookies 按鈕刪除可見的 cookie。清除過濾文本后，你將看到其他 cookie 仍然保留在列表中。以前，你只能選擇清除所有 cookie。

對應(yīng) Chromium issue: 978059

清除 Storage 窗格中第三方 cookies 的新選項(xiàng)

當(dāng)清除 Storage 窗格中的站點(diǎn)數(shù)據(jù)時(shí)，DevTools 現(xiàn)在默認(rèn)情況下只清除本站 cookie。選中 including third-party cookies 復(fù)選框后，瀏覽器也會(huì)清除第三方 cookies。

對應(yīng) Chromium issue: 1012337

9. 為自定義設(shè)備編輯 User-Agent Client Hints

現(xiàn)在可以編輯自定義設(shè)備的 User-Agent Client Hints。

進(jìn)入 Settings > Devices，然后點(diǎn)擊 Add custom device。展開 User agent client hints 部分來編輯客戶端提示。

User-Agent Client Hints 是字符串形式 User-Agent 的替代，它使得開發(fā)人員可以以更符合人體工程學(xué)的方式訪問 User-Agent 的信息，并且有利于保護(hù)用戶隱私。

對應(yīng) Chromium issue: 1073909

10. Frames 面板更新

在 Frames 面板中的 Service Workers 信息

DevTools 現(xiàn)在獨(dú)立顯示 Service Workers 信息。

在 Application 面板中，在 Service Workers 選項(xiàng)中選擇一個(gè) Service Worker 以查看詳細(xì)信息。

對應(yīng) Chromium issue: 1122507

Frames 面板中顯示內(nèi)存統(tǒng)計(jì)信息

新的 performance.measureMemory() API 可用狀態(tài)現(xiàn)在顯示在 API availability 選項(xiàng)下。

performance.measureMemory() API 可以統(tǒng)計(jì)當(dāng)前整個(gè)網(wǎng)頁的內(nèi)存使用量，可以在這篇文章中學(xué)習(xí)使用這個(gè) API 的使用。

對應(yīng) Chromium issue: 1139899

11. 在 Issues 標(biāo)簽中提供反饋

如果你想改善一個(gè)問題的消息，轉(zhuǎn)到 Console > Issues 標(biāo)簽，或者 More Settings > More tools > Issues 來打開 Issues 標(biāo)簽。展開一個(gè) Issues 消息，并單擊 Is the issue message helpful to you? ，然后你可以在彈出窗口中提供反饋。

12. Performance 面板的掉幀提示

在 Performance 面板中分析加載性能時(shí)，F(xiàn)rames 現(xiàn)在將掉幀部分標(biāo)記為紅色。將鼠標(biāo)懸停在上面，可以看到幀速率。

對應(yīng) Chromium issue: 1075865

13. 在設(shè)備模式下模擬雙屏和可折疊屏幕

現(xiàn)在可以在 DevTools 中模擬雙屏幕和可折疊設(shè)備。

在啟用設(shè)備模式后，選擇 Surface Duo 或三星 Galaxy Fold 其中一個(gè)設(shè)備。

單擊新的 span 圖標(biāo)可以在單屏幕或折疊屏幕與雙屏幕或折疊式體式之間切換。

啟用 Web Platform 實(shí)驗(yàn)特性后，可以使用 CSS 的 screen-spanning 特性和 JavaScript 的 getWindowSegments API。右邊的實(shí)驗(yàn)小圖標(biāo)顯示了 Experimental Web Platform features 開關(guān)狀態(tài)，如果圖標(biāo)高亮則表示開關(guān)已被打開。在瀏覽器中訪問 chrome://flags 可以切換這個(gè)開關(guān)。

對應(yīng) Chromium issue: 1054281

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

使用 Puppeteer Recorder 自動(dòng)化瀏覽器測試

要啟用該實(shí)驗(yàn)性新特性，請選中 Settings > Experiments 下的 Recorder 復(fù)選框

現(xiàn)在，DevTools 可以基于你與瀏覽器的交互來生成 Puppeteer 腳本，便于你進(jìn)行自動(dòng)化瀏覽器測試。Puppeteer 是一個(gè) Node.js 庫，它提供了一個(gè)高級 API 來通過 DevTools 協(xié)議控制 Chrome 或 Chromium。

進(jìn)入這個(gè)演示頁面，在 DevTools 中打開 Sources 面板，選擇左上的 Recording 選項(xiàng)卡，添加一個(gè)新的記錄并命名（例如 test01.js）。

點(diǎn)擊底部的 Record 按鈕開始記錄交互，試著填寫屏幕上的表格?？梢钥吹?Puppeteer 命令被相應(yīng)地附加到文件中。再次點(diǎn)擊 Record 按鈕停止錄制。

要運(yùn)行該腳本，請遵循 Puppeteer 官網(wǎng)的指南。

請注意，這是一個(gè)早期階段的實(shí)驗(yàn)特性，以后這個(gè)功能可能會(huì)有所變更。

對應(yīng) Chromium issue: 1144127

Styles 面板中的字體編輯器

要啟用該實(shí)驗(yàn)性新特性，請選中 Settings > Experiments 下的 Enable new Font Editor tools within Styles pane 復(fù)選框

Styles 面板中新的字體編輯器是一個(gè)字體相關(guān)的屬性編輯功能，以幫助開發(fā)者為網(wǎng)頁找到更合適的排版。

彈出窗口提供了一個(gè)簡潔的用戶界面，可以使用一系列直觀的輸入動(dòng)態(tài)地操作字體。

對應(yīng) Chromium issue: 1093229

CSS flexbox 調(diào)試工具

要啟用該實(shí)驗(yàn)性新特性，請選中 Settings > Experiments 下的 Enable CSS Flexbox debugging features 復(fù)選框

從上次發(fā)布以來，DevTools 增加了對 flexbox 調(diào)試的支持。

DevTools 現(xiàn)在繪制了一條指導(dǎo)線，更好地可視化 align-items 屬性。同時(shí)也更好的支持了 gap 屬性。在這里的例子中，設(shè)置了 gap: 12px; ,注意下圖縫隙的陰影圖案。

對應(yīng) Chromium issue: 1139949

新的 CSP Violations 標(biāo)簽

要啟用該實(shí)驗(yàn)性新特性，請選中 Settings > Experiments 下的 Show CSP Violations view 復(fù)選框

在新的 CSP Violations 標(biāo)簽中查看所有內(nèi)容安全策略（CSP）違規(guī)。這個(gè)新標(biāo)簽是一個(gè)實(shí)驗(yàn)性特性，用來方便的處理存在大量 CSP 與可信類型報(bào)錯(cuò)的頁面。

對應(yīng) Chromium issue: 1137837

新的顏色對比度算法-先進(jìn)感知對比度算法(APCA)

要啟用該實(shí)驗(yàn)性新特性，請選中 Settings > Experiments 下的 Enable new Advanced Perceptual Contrast Algorithm (APCA) replacing previous contrast ratio and AA/AAA guidelines 復(fù)選框

先進(jìn)感知對比度算法（APCA）正在取代顏色選擇器中的 AA/AAA 對比度提示。

APCA 是在現(xiàn)代色覺研究的基礎(chǔ)上發(fā)展起來的一種新的計(jì)算對比度的方法。與 AA/AAA 相比，APCA 更依賴于上下文。對比度是根據(jù)文本的空間屬性（字體重量和大?。㈩伾ㄎ谋竞捅尘爸g可感知的明度差）和上下文（環(huán)境光線、環(huán)境、文本的預(yù)期目的）來計(jì)算的。

對應(yīng) Chromium issue: 1121900