What's 開發人員工具的新功能 (Chrome 77)

Kayce Basques

複製元素的樣式

在 DOM 樹狀結構中按一下節點的滑鼠右鍵，將該 DOM 節點的 CSS 複製到剪貼簿。

複製樣式。

圖 1. 複製元素樣式。

感謝 Adam Argyle 和 VisBug 提供靈感。

以視覺化方式顯示版面配置位移

假設您正在最愛的網站上閱讀新聞文章。閱讀網頁時，內容會跳來跳去，導致你一直找不到閱讀位置。這種問題稱為版面配置移位。這種情況通常會在圖片和廣告載入完成時發生。網頁並未為圖片和廣告保留任何空間，因此瀏覽器必須將所有其他內容移到下方，騰出空間。解決方法是使用預留位置。

開發人員工具現可協助您偵測版面配置位移：

  1. 開啟指令選單。
  2. 開始輸入 Rendering。
  3. 執行「Show Rendering」指令。
  4. 勾選「Layout Shift Regions」核取方塊。您與網頁互動時，版面配置位移會以藍色醒目顯示。

版面配置位移。

圖 2. 版面配置位移。

Chromium 問題 #961846

「Audits」面板中的 Lighthouse 5.1

稽核面板現在執行 Lighthouse 5.1。新的稽核項目包括：

新的「稽核」面板 UI。

圖 3. 新的「稽核」面板 UI。

Lighthouse 5.1 的 Node 和 CLI 版本有 3 項值得一試的新功能：

  • 成效預算：指定網頁不得超過的要求次數和檔案大小，避免網站隨著時間推移而退步。
  • 外掛程式：運用自訂稽核功能擴充 Lighthouse 功能。
  • Stack Pack。新增針對特定技術堆疊量身打造的稽核項目。WordPress 堆疊包會先出貨。React 和 AMP 堆疊包正在開發中。

OS 主題同步

如果您使用的是作業系統的深色主題，DevTools 會自動切換成自己的深色主題。

開啟中斷點編輯器的鍵盤快速鍵

在「來源」面板的編輯器中，按下 Control + Alt + B 鍵或 Command + Option + B 鍵 (Mac)，即可開啟「中斷點編輯器」。使用中斷點編輯器建立記錄點和條件中斷點。

中斷點編輯器。

圖 4. 中斷點編輯器。

在「網路」面板中預先擷取快取

從預先擷取快取載入資源時，Network 面板的「Size」欄現在會顯示 (prefetch cache)。預先擷取是一種較新的網頁平台功能，可加快後續網頁的載入速度。Can I use... 報告指出，截至 2019 年 7 月，全球 83.33% 的瀏覽器都支援這個功能。

「Size」欄顯示資源來自預先擷取快取。

圖 5. 「Size」欄顯示 prefetch2.html 和 prefetch2.css 來自 (prefetch cache)。

請參閱預先擷取示範，瞭解如何使用這項功能。

Chromium 問題 #935267

查看物件時的私人資源

主控台現在會在物件預覽畫面中顯示私人類別欄位。

檢查物件時，控制台現在會顯示私人欄位，例如「#color」。

圖 6. 在檢查物件時，左側的舊版 Chrome 不會顯示 #color 欄位，而右側的新版會顯示。

「應用程式」面板中的通知和推播訊息

「應用程式」面板的「背景服務」部分現在支援推送訊息和通知。當伺服器將資訊傳送至服務工作者時，就會發生推播訊息。當服務工作者或網頁指令碼向使用者顯示資訊時，就會出現通知。

如同 Chrome 76 的背景擷取和背景同步功能，一旦開始記錄，這個頁面上的推播訊息和通知就會記錄 3 天，即使關閉網頁或 Chrome 也一樣。

新的「通知」和「推送訊息」窗格。

圖 7. 「應用程式」面板中的新「推播訊息」和「通知」窗格。

Chromium 問題 #927726

下載預覽管道

建議您將 Chrome Canary、開發人員版或Beta 版設為預設開發人員版瀏覽器。這些預覽管道可讓您存取最新的 DevTools 功能，測試最新的網路平台 API，並在使用者發現問題前，協助您找出網站的問題！

與 Chrome 開發人員工具團隊聯絡

請使用下列選項討論新功能、更新或任何與開發人員工具相關的內容。

開發人員工具的新功能

DevTools 新功能系列文章中涵蓋的所有內容清單。