【譯】Chrome77 Devtools有哪些新功能？

複製元素樣式

咱們能夠在打開開發者工具後，鼠標右擊某個dom樹中的節點，選擇Copy -> Copy Styles便可將dom元素的樣式複製到剪貼板中。

可視化佈局變換

此功能可能會致使屏幕閃爍不少，若是您容易復發光敏性癲癇，可能不適合您。

假設咱們正在本身喜歡的網站上閱讀新聞文章，當咱們正在閱讀該頁面時，會發現內容位置不停的在變化跳躍，這個就叫作佈局變換。它一般在圖像和廣告完成加載時發生。 該頁面沒有爲圖像或廣告預留任何空間，所以瀏覽器必須將全部其餘內容向下移動來爲它們騰出空間。這種狀況的解決方案是使用佔位符。

如今開發者工具能夠幫助咱們檢測佈局變換（詳見issue#961846）：

勾選Rendering菜單中的Layout Shift Regions選項，即可以在頁面進行交互時，檢測到佈局變換，此時發生佈局變換的內容會以藍色突出顯示。

如何打開菜單欄Rendering並勾選Layout Shift Regions？

• 方式一

1. 打開命令菜單（mac osx快捷鍵: Alt + p, windows快捷鍵: ctrl + p）
2. 鍵入Rendering
3. 執行Show Rendering命令
4. 勾選Layout Shift Regions

• 方式二

1. 點擊開發者工具右上角菜單欄入口

2. 選擇more tools -> Rendering
3. 勾選Layout Shift Regions

Audits面板運行Lighthoust5.1

這個更新其實是在Chrome 76中發佈的。咱們沒有在DevTools的新功能（Chrome 76）中介紹它，因此咱們如今介紹它。

Audits面板如今運行Lighthouse 5.1。新審查包括：

Lighthouse是一個開源的自動化工具，以此分析Web應用程序和網頁，收集現代性能指標和開發人員最佳實踐的見，來提高web應用程序的性能和質量。

• 經過檢查開發者是否提供了有效的apple-touch-icon圖標，來肯定是否能夠將PWA添加到iOS主屏幕。

• 保留請求數和文件大小。報告各類類別的網絡請求和文件大小的總數，例如文檔，腳本，樣式表，圖像等。

• 最大FID（First Input Delay）潛在時長。衡量用戶的首頁交互與瀏覽器對該交互的響應之間的最大潛在時間，簡單講就是用戶首次與站點交互時（即單擊連接，點擊按鈕或使用自定義的由JavaScript驅動的控件）到瀏覽器實際可以作出響應的最大時長。

打開斷點編輯器的鍵盤快捷鍵

在開發者工具Sources面板的編輯器中鼠標聚焦時按Control + Alt + B或Command + Option + B（Mac） 以打開「斷點編輯器」。而後使用斷點編輯器來建立日誌斷點和條件斷點。

Network面板預緩存

當從prefetch cache加載一個資源時，Network面板的Size列將會顯示（prefetch cache）。 Prefetch即預提取，是一種新鮮的web特性，用於後續頁面的加速加載。

Prefetch就是經過告知瀏覽器將來跳轉或用戶互動將用到的資源，例如，若是用戶作出咱們指望的行爲，則表示其可能稍後才須要某資源。 當前頁面完成加載後，且帶寬可用的狀況下，這些資源將在 Chrome 中以 Lowest 優先級被提取。這意味着，prefetch 最適合搶佔用戶下一步可能進行的操做併爲其作好準備，例如檢索結果列表中首個產品的詳情頁面或檢索分頁內容的下一頁。

Can I Use...中顯示自2019年7月以來，它在全球83.33％的瀏覽器中都獲得了支持。

這兒有一個Prefetch Demo

查看對象的私有屬性

Console（控制檯）面板如今能夠顯示其對象的私有類屬性。

左側的舊版Chrome在檢查對象時不顯示#color字段，而右側的新版本則顯示#color字段。

Application 面板中的通知和消息推送

Application面板的Background Services部分如今支持「Notifications」和 「Push Messaging」。

當服務器向service worker發送消息時會出如今Push Messaging，當service worker或頁面腳本給用戶push消息時會出如今Notifications。

與Chrome 76特性中的Background Fetch和Background Sync同樣，一旦你開始錄製，即便頁面被關閉，甚至Chrome被關閉，此頁面上的Push Messages和Notifications也會被記錄3天。

下載Chrome Canary版本做爲你的默認瀏覽器開發版，Canary會爲你提供最新的DevTools功能。

文章如有翻譯紕漏，請指正，謝謝！