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

Kayce Basques

複製元素的樣式

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

複製樣式。

圖 1. 複製元素樣式。

感謝 Adam Argyle 和 VisBug 的靈感。

以視覺化方式呈現版面配置位移

假設你在喜愛的網站上閱讀新聞報導。閱讀頁面時 也讓內容從頭到尾放棄閱讀。這稱為版面配置問題 。這種情況通常是在圖片和廣告載入完畢後，網頁未保留任何空間 因此，瀏覽器必須將其他內容向下移， 具體做法是指示 Kubernetes 建立並維護 一或多個代表這些 Pod 的物件解決方法是使用預留位置。

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

  1. 開啟「指令選單」。
  2. 開始輸入 Rendering。
  3. 執行「Show Rendering」指令。
  4. 勾選「Layout Shift Regions」核取方塊。當你與頁面互動時，系統會在你與頁面互動時平移版面配置 以藍色標明

版面配置位移。

圖 2：版面配置位移。

Chromium 問題 #961846

稽核面板中的 Lighthouse 5.1

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

  • 提供有效的 apple-touch-icon。檢查是否能將 PWA 新增至 iOS 主畫面。
  • 減少要求數量和檔案大小：回報網路要求總數，以及 各種類別的檔案大小，例如文件、指令碼、樣式表和圖片等等。
  • 最大可能的首次輸入延遲時間。評估使用者在兩個 Pod 之間相隔的最長時間 以及瀏覽器對該互動的回應。請注意，這個指標 會取代「預估輸入延遲時間」指標。最大潛在首次輸入延遲時間不會因素 區分為成效類別分數

新的「Audits」(稽核) 面板 UI。

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

Lighthouse 5.1 版的 Node 及 CLI 版本有 3 項主要功能，值得您一探究竟：

  • 效能預算：指定要求以防止網站在一段時間後迴歸 網頁的大小和檔案大小
  • 外掛程式。使用專屬稽核功能擴充 Lighthouse。
  • Stack Packs。加入專為特定技術堆疊量身打造的稽核報告。WordPress 堆疊套件 首度出貨。React 和 AMP Stack Packs 仍在開發階段。

OS 主題同步處理

如果你正在使用 OS 的深色主題，開發人員工具現在會切換為自身的深色主題 。

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

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

中斷點編輯器。

圖 4. Breakpoint 編輯器。

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

「Network」面板的「Size」資料欄現在會顯示 (prefetch cache)， 預先擷取快取預先擷取是全新的網路平台功能，可加快後續網頁的速度 載入。可以使用...：截至 2019 年 7 月，已有 83.33% 的全球瀏覽器支援這項功能。

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

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

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

Chromium 問題 #935267

查看物件時的私有屬性

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

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

圖 6. 舊版 Chrome 檢查#color 物件，而右側的新版本則會有。

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

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

啟動後，如同 Chrome 76 的背景擷取和背景同步功能 錄製、推送訊息和通知在這個頁面上會記錄 3 天，即使在該網頁上 也會關閉，甚至是 Chrome 關閉時也是如此。

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

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

Chromium 問題 #927726

下載預覽頻道

建議您使用 Chrome Canary、Dev 或 Beta 版做為預設的開發瀏覽器。透過這些預覽版本，您可以存取開發人員工具中的最新功能、測試最先進的網路平台 API，以及找出網站的問題，以免使用者發現問題。

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

請使用下列選項，討論貼文中的新功能和異動，或與開發人員工具相關的其他事項。

  • 歡迎透過 crbug.com 提出建議或意見。
  • 使用「更多選項」更多 > 回報開發人員工具問題說明 >在開發人員工具中回報開發人員工具問題。
  • 前往 @ChromeDevTools 張貼 Tweet。
  • 歡迎在「開發人員工具」推出「最新消息」YouTube 影片或「開發人員工具秘訣」YouTube 影片留言。

開發人員工具新功能

「開發人員工具新功能」系列中的所有文章清單。