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

Kayce Basques
Kayce Basques
X GitHub

複製元素的樣式

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

複製樣式。

圖 1. 複製元素樣式。

感謝 Adam Argyle 和 VisBug 提供靈感。

顯示版面配置位移

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

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

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

版面配置位移。

圖 2. 版面配置位移。

Chromium 問題 #961846

稽核面板中的 Lighthouse 5.1

「稽核」面板現在會執行 Lighthouse 5.1。新稽核包括：

  • 提供有效的 apple-touch-icon。檢查 PWA 是否可新增至 iOS 主畫面。
  • 降低要求數量和檔案大小。回報各類別的網路要求總數和檔案大小，例如文件、指令碼、樣式表、圖片等。
  • 首次輸入延遲時間最長預估值。測量使用者首次與網頁互動到瀏覽器回應該項互動之間，最長可能經過的時間。請注意，這項指標會取代「預估輸入延遲時間」指標。「可能的最長首次輸入延遲時間」不會納入「效能」類別分數的計算。

新版「稽核」面板使用者介面。

圖 3. 新版「稽核」面板使用者介面。

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

  • 成效預算。指定網頁不得超過的要求數量和檔案大小，防止網站隨時間退步。
  • 外掛程式。使用自訂稽核擴充 Lighthouse。
  • Stack Pack。新增專為特定技術堆疊量身打造的稽核。WordPress Stack Pack 最先出貨。React 和 AMP Stack Pack 正在開發中。

同步處理作業系統主題

如果您使用作業系統的深色主題，開發人員工具現在會自動切換為自己的深色主題。

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

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

中斷點編輯器。

圖 4. 中斷點編輯器。

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

如果資源是從預先擷取快取載入，網路面板的「大小」欄現在會顯示 (prefetch cache)。預先擷取是網頁平台的新功能，可加快後續網頁載入速度。Can I use... 報表顯示，截至 2019 年 7 月，全球有 83.33% 的瀏覽器支援這項功能。

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

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

如要試用，請參閱預先擷取示範。

Chromium 問題 #935267

查看物件時的私人屬性

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

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

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

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

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

與 Chrome 76 的 Background Fetch 和 Background Sync 功能相同，開始錄製後，系統會記錄這個頁面上的 Push Message 和通知 3 天，即使頁面和 Chrome 關閉也一樣。

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

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

Chromium 問題 #927726

下載預覽版頻道

建議使用 Chrome Canary、開發人員版或 Beta 版做為預設開發瀏覽器。透過這些搶先體驗管道，您可以存取最新的開發人員工具功能、測試最先進的網頁平台 API，並在使用者發現問題前找出網站上的問題！

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

如要討論開發人員工具的新功能、更新或其他相關事項，請使用下列選項。

開發人員工具新功能

「開發人員工具新功能」系列涵蓋的所有主題清單。