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

Jecelyn Yeen

「新媒體」面板

開發人員工具現在會在媒體面板中顯示媒體播放器資訊。

「新媒體」面板

在開發人員工具推出新的媒體面板之前，您可以在 chrome://media-internals 中找到有關影片播放器的記錄和偵錯資訊。

新的「媒體」面板提供更簡單的方式，讓您在與影片播放器相同的瀏覽器分頁中，查看事件、記錄、屬性和影格解碼的時間軸。您可以即時查看並檢查潛在的問題 (例如為何會發生影格遺失的情形，以及為何 JavaScript 會以非預期的方式與播放器互動)。

Chromium 問題：1018414

透過「元素」面板內容選單擷取節點螢幕截圖

你現在可以透過「元素」面板中的內容選單擷取節點螢幕截圖。

舉例來說，您可以按一下元素的滑鼠右鍵，然後選取「擷取節點螢幕截圖」，即可擷取目錄的螢幕截圖。

擷取節點螢幕截圖

Chromium 問題：1100253

「Issues」分頁更新

主控台面板中的「Issues」警告列現在已改為一般訊息。

控制台訊息中的錯誤

系統現在會預設隱藏「Issues」分頁中的第三方 Cookie 問題。勾選新的「含有第三方 Cookie 問題」核取方塊即可查看這些問題。

「第三方 Cookie 問題」核取方塊

Chromium 問題：1096481、1068116、1080589

模擬缺少的本機字型

開啟「算繪」分頁，然後使用新的「停用本機字型」功能，模擬 @font-face 規則中缺少的 local() 來源。

舉例來說，如果裝置上已安裝「Rubik」字型，且 @font-face src 規則將其用作 local() 字型，Chrome 就會使用裝置上的本機字型檔案。

啟用「Disable local fonts」後，DevTools 會忽略 local() 字型，並從網路擷取這些字型。

模擬缺少的本機字型

開發人員和設計人員在開發過程中，通常會使用同一個字型的兩個不同副本：

  • 設計工具的本機字型，以及
  • 程式碼的網路字型

停用本機字型可讓您更輕鬆地執行以下操作：

  • 偵錯及評估字型載入效能和最佳化
  • 驗證 CSS @font-face 規則是否正確
  • 找出網路字型與本機版本之間的差異

Chromium 問題：384968

模擬不活躍使用者

閒置偵測 API 可讓開發人員偵測閒置使用者，並在閒置狀態變更時做出反應。您現在可以使用 DevTools 模擬「Sensors」分頁中的閒置狀態變更，同時模擬使用者狀態和螢幕狀態，而不用等待實際閒置狀態變更。您可以從Drawer 開啟「Sensors」分頁。

模擬不活躍使用者

Chromium 問題：1090802

模擬 prefers-reduced-data

prefers-reduced-data 媒體查詢會偵測使用者是否偏好以較少資料呈現網頁的替代內容。

您現在可以使用開發人員工具模擬 prefers-reduced-data 媒體查詢。

模擬 prefers-reduced-data

Chromium 問題：1096068

支援新的 JavaScript 功能

DevTools 現在可更妥善地支援部分最新的 JavaScript 語言功能：

  • 邏輯指派運算子：開發人員工具現在支援在控制台和「來源」面板中使用新運算子 &&=、||= 和 ??= 進行邏輯指派。
  • 美化排版的數字分隔符：開發人員工具現在會正確美化排版「來源」面板中的數字分隔符。

Chromium 問題：1086817、1080569

Lighthouse 6.2 在 Lighthouse 面板中

Lighthouse 面板目前執行 Lighthouse 6.2。如需完整的變更清單，請參閱版本資訊。

取消調整圖片大小

Lighthouse 6.2 中的新稽核：

  • 避免長時間在主執行緒上執行的工作。回報主執行緒上執行時間最長的工作，這項資訊有助於找出造成輸入延遲的主因。
  • 可檢索的連結。檢查錨點元素的 href 屬性是否連結至適當的目的地，這樣才能找到連結。
  • 未設定大小的圖片元素：檢查圖片元素是否已設定明確的 width 和 height。明確的圖片大小可減少版面配置轉移並改善 CLS。
  • 避免使用非合成的動畫。回報非合成的動畫，這些動畫會出現卡頓情形，並降低 CLS。
  • 監聽 unload 事件。回報 unload 事件。unload 事件無法可靠地觸發，因此建議改用 pagehide 或 visibilitychange 事件。

Lighthouse 6.2 中的更新稽核：

  • 移除未使用的 JavaScript。如果網頁有可供公開存取的 JavaScript 來源對應，Lighthouse 會強化稽核作業。

Chromium 問題：772558

停用「Service Workers」窗格中的「其他來源」清單

開發人員工具現在提供連結，可在新的瀏覽器分頁 (chrome://serviceworker-internals/?devtools) 中查看其他來源的 Service Worker 完整清單。

先前，DevTools 會在「Application」面板 >「Service workers」窗格下方，顯示巢狀清單。

連結至其他來源

Chromium 問題：807440

顯示篩除項目的涵蓋率摘要

在「涵蓋率」分頁中套用篩選器時，DevTools 會重新計算並動態顯示涵蓋率資訊摘要。先前「覆蓋率」分頁一律會顯示所有覆蓋率資訊的摘要。

在下方範例中，請注意摘要一開始顯示 446 kB of 2.0 MB (22%) used so far. 1.5 MB unused.，然後在套用 CSS 篩選器後顯示 57 kB of 604 kB (10%) used so far. 546 kB unused.。

篩除項目的涵蓋率摘要

Chromium 問題：1061385

應用程式面板中的新影格詳細資料檢視畫面

開發人員工具現在會顯示每個影格的精細檢視畫面。如要存取該應用程式，請按一下「應用程式」面板中「Frames」選單下方的「Frames」選單。

應用程式面板中的新影格詳細資料檢視畫面

Chromium 問題：1093247

已開啟視窗的框架詳細資料

開發人員工具現在也會在框架樹狀結構下方顯示已開啟的視窗 / 彈出式視窗。已開啟視窗的框架詳細資料檢視畫面包含其他安全性資訊。

已開啟的視窗框架詳細資料

Chromium 問題：1107766

安全性和隔離資訊 (COEP / COOP)

開發人員工具現在會在框架詳細資料中顯示安全內容、跨來源嵌入者政策 (COEP) 和跨來源開啟者政策 (COOP)。

安全性和隔離資訊

我們很快就會在裝置詳細資料檢視畫面中加入更多安全性資訊。

Chromium 問題：1051466

Elements 和 Network 面板更新

在「樣式」窗格中提供無障礙色彩建議

開發人員工具現在會針對低對比度文字提供顏色建議。

在下方範例中，h1 的文字對比度偏低。如要修正這個問題，請在「樣式」窗格中開啟 color 屬性的顏色挑選器。展開「對比度」部分後，開發人員工具會提供 AA 和 AAA 顏色建議。按一下建議的顏色即可套用。

Chromium 問題：1093227

在「元素」面板中恢復「屬性」窗格

屬性窗格已重新加入，該窗格已在 Chrome 84 中淘汰。在未來的 DevTools 版本中，我們會改善檢查元素屬性的工作流程。

「元素」面板中的「屬性」窗格

Chromium 問題：1105205、1116085

網路面板中人類可讀的 X-Client-Data 標頭值

在「Network」面板中檢查網路資源時，開發人員工具現在會將「Headers」窗格中的任何 X-Client-Data 標頭值格式化為程式碼。

X-Client-Data HTTP 標頭包含在瀏覽器中啟用的實驗 ID 和 Chrome 標記清單。原始標頭值看起來像是不明確的字串，因為它們是經過 base-64 編碼的序列化 通訊協定緩衝區。為了讓開發人員更清楚瞭解內容，DevTools 現已顯示解碼值。

人類可讀的 `X-Client-Data` 標頭值

Chromium 問題：1103854

在「樣式」窗格中自動完成自訂字型

在「樣式」窗格中編輯 font-family 屬性時，現在會將匯入的字體面加入 CSS 自動完成清單。

在這個範例中，'Noto Sans' 是安裝在本機的字型。會顯示在 CSS 完成清單中。先前並非如此。

自動完成自訂字型

Chromium 問題：1106221

在「網路」面板中一致顯示資源類型

開發人員工具現在會一律顯示與原始網路要求相同的資源類型，並在發生重新導向 (狀態 302) 時，將 / Redirect 附加至「Type」欄值。

先前 DevTools 有時會將類型變更為 Other。

顯示重新導向資源類型

Chromium 問題：997694

清除「元素」和「網路」面板中的按鈕

「Styles」窗格和「Network」面板中的篩選器文字方塊，以及「Elements」面板中的 DOM 搜尋文字方塊，現在都已提供「Clear」按鈕。按一下「清除」即可移除您輸入的任何文字。

清除「元素」和「網路」面板中的按鈕

Chromium 問題：1067184

下載預覽管道

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

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

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

開發人員工具的新功能

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