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

今天 Chrome 更新了最新版本 Chrome89，新版本在啟動、響應速度上更快，同時 CPU 占用率大幅下降。

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

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

下面來具體看看更新了哪些內容。

1. Elements 面板相關更新

支持選擇 CSS 的 :target 偽類

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

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

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

對應 Chromium issue: 1156628

復制 DOM 元素的新選項

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

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

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

對應 Chromium issue: 1150797, 1150797

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

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

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

對應 Chromium issue: 1147016

復制 CSS 屬性的新選項

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

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

類的復制選項:

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

屬性的復制選項:

• Copy declaration：復制當前行的聲明；
• Copy property：復制當前行的屬性；
• Copy value：復制當前行的值。

對應 Chromium issue: 1152391

2. Network 面板相關升級

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

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

對應 Chromium issue: 1122580

在 Network 面板中查看 WebTransport 連接

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

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

對應 Chromium issue: 1152290

“Online” 改為 “No throttling”

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

對應 Chromium issue: 1028078

3. Console、Sources、Styles 面板中新的復制選項

Console、Sources 面板中復制對象的新選項

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

對應 Chromium issues: 1149859, 1148353

Sources、Styles 面板中復制文件名的新選項

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

1. 在 Sources 面板的文件名
2. 在 Elements 面板中的 Styles 標簽的文件名

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

對應 Chromium issue: 1155120

4. 對可信類型（Trusted Types）的調試支持

可信類型斷點

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

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

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

對應 Chromium issue: 1142804

在 Issues 選項卡中鏈接 Sources 面板中的提示框

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

對應 Chromium issue: 1150883

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

現(xiàn)在可以捕獲一個包括視口外的內容完整的節(jié)點屏幕截圖。在此之前，屏幕截圖因為無法截取視口外的內容而得不到完整的截圖。

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

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

對應 Chromium issue: 1003629

6. Network 面板中新增的 Trust Tokens 選項卡

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

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

進一步的調試支持將在 Chrome 下一個版本中提供。

對應 Chromium issue: 1126824

7. Lighthouse 面板升級到 Lighthouse7

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

對應 Chromium issue: 772558

8. Cookies 相關更新

顯示 url 解碼后的 cookie 的新選項

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

轉到 Application 面板并選擇左側的 Cookies 選項。選擇列表中的任何 cookie。啟用新的 Show URL decoded 復選框可以查看解碼后的 cookie。

對應 Chromium issue: 997625

只清除過濾后的 cookie

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

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

對應 Chromium issue: 978059

清除 Storage 窗格中第三方 cookies 的新選項

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

對應 Chromium issue: 1012337

9. 為自定義設備編輯 User-Agent Client Hints

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

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

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

對應 Chromium issue: 1073909

10. Frames 面板更新

在 Frames 面板中的 Service Workers 信息

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

在 Application 面板中，在 Service Workers 選項中選擇一個 Service Worker 以查看詳細信息。

對應 Chromium issue: 1122507

Frames 面板中顯示內存統(tǒng)計信息

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

performance.measureMemory() API 可以統(tǒng)計當前整個網(wǎng)頁的內存使用量，可以在這篇文章中學習使用這個 API 的使用。

對應 Chromium issue: 1139899

11. 在 Issues 標簽中提供反饋

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

12. Performance 面板的掉幀提示

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

對應 Chromium issue: 1075865

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

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

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

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

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

對應 Chromium issue: 1054281

14. 實驗性新特性

使用 Puppeteer Recorder 自動化瀏覽器測試

要啟用該實驗性新特性，請選中 Settings > Experiments 下的 Recorder 復選框

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

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

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

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

請注意，這是一個早期階段的實驗特性，以后這個功能可能會有所變更。

對應 Chromium issue: 1144127

Styles 面板中的字體編輯器

要啟用該實驗性新特性，請選中 Settings > Experiments 下的 Enable new Font Editor tools within Styles pane 復選框

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

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

對應 Chromium issue: 1093229

CSS flexbox 調試工具

要啟用該實驗性新特性，請選中 Settings > Experiments 下的 Enable CSS Flexbox debugging features 復選框

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

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

對應 Chromium issue: 1139949

新的 CSP Violations 標簽

要啟用該實驗性新特性，請選中 Settings > Experiments 下的 Show CSP Violations view 復選框

在新的 CSP Violations 標簽中查看所有內容安全策略（CSP）違規(guī)。這個新標簽是一個實驗性特性，用來方便的處理存在大量 CSP 與可信類型報錯的頁面。

對應 Chromium issue: 1137837

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

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

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

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

對應 Chromium issue: 1121900