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

「新媒體」面板

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

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

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

Chromium 問題：1018414

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

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

舉例來說，你可以對元素按一下滑鼠右鍵，然後選取「擷取節點螢幕截圖」，擷取內容表格的螢幕截圖。

Chromium 問題：1100253

「問題」分頁更新

主控台面板上的「問題」警告列已改為一般訊息。

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

Chromium 問題：1096481、1068116、1080589

模擬缺少本機字型的情況

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

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

啟用「停用本機字型」後，開發人員工具會忽略 local() 字型，並從網路擷取這些字型。

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

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

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

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

Chromium 問題：384968

模擬不活躍使用者

開發人員可透過 Idle Detection API 偵測閒置使用者，並對閒置狀態變化做出反應。現在您可以使用開發人員工具，在「感應器」分頁中模擬使用者和螢幕的閒置狀態變化，不必等待實際的閒置狀態變化。你可以從「抽屜」開啟「感應器」分頁。

Chromium 問題：1090802

模擬 prefers-reduced-data

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

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

Chromium 問題：1096068

支援新的 JavaScript 功能

開發人員工具現在可進一步支援部分最新的 JavaScript 語言功能：

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

Chromium 問題：1086817、1080569

Lighthouse 面板中的 Lighthouse 6.2

Lighthouse 面板現在會執行 Lighthouse 6.2。如要查看完整的異動項目清單，請參閱版本資訊。

Lighthouse 6.2 的新稽核：

• 避免長時間在主執行緒上執行的工作。回報主執行緒上執行時間最長的工作，這項資訊有助於找出造成輸入延遲的主因。
• 可檢索的連結。請確認錨點元素的 href 屬性可連結適當的目的地，這樣才能檢索連結。
• 原寸圖片元素 - 檢查圖片元素是否已設定明確的 width 和 height。 明確指定圖片大小可減少版面配置轉移，並改善 CLS。
• 避免使用非合成動畫。回報無法順暢播放的非合成動畫，並減少 CLS。
• 監聽 unload 事件。回報 unload 事件。建議改用 pagehide 或 visibilitychange 事件，因為 unload 事件無法穩定觸發。

Lighthouse 6.2 版更新的稽核：

• 移除無用的 JavaScript。如果網頁有可公開存取的 JavaScript 來源對應，Lighthouse 現在會加強稽核。

Chromium 問題：772558

Service Worker 窗格中「其他來源」的項目已淘汰

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

先前，開發人員工具會在「應用程式」面板 >「服務工作人員」窗格下方，顯示巢狀清單。

Chromium 問題：807440

顯示篩選項目的保固摘要

現在在「涵蓋範圍」分頁中套用篩選器時，開發人員工具會動態重新計算並顯示涵蓋範圍資訊摘要。先前「涵蓋範圍」分頁一律會顯示所有涵蓋範圍資訊的摘要。

在下方範例中，請注意摘要一開始顯示 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

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

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

Chromium 問題：1093247

已開啟視窗的影格詳細資料

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

Chromium 問題：1107766

安全與隔離資訊 (COEP / COOP)

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

我們很快就會在影格詳細資料檢視畫面中新增更多安全性資訊。

Chromium 問題：1051466

「元素」和「網路」面板更新

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

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

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

Chromium 問題：1093227

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

「屬性」窗格已回歸，這項功能已在 Chrome 84 版中淘汰。在未來版本的開發人員工具中，我們將改善元素屬性的檢查工作流程。

Chromium 問題：1105205、1116085

網路面板中可供使用者閱讀的 X-Client-Data 標頭值

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

X-Client-Data HTTP 標頭包含實驗 ID 清單，以及瀏覽器中已啟用的 Chrome 旗標。原始標頭值是 Base64 編碼的序列化通訊協定緩衝區，因此看起來像是不透明的字串。為讓開發人員更清楚瞭解內容，開發人員工具現在會顯示解碼值。

Chromium 問題：1103854

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

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

在本範例中，'Noto Sans' 是安裝在本機的自訂字型。這會顯示在 CSS 完成清單中。先前則否。

Chromium 問題：1106221

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

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

先前開發人員工具有時會將類型變更為 Other。

Chromium 問題：997694

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

「樣式」窗格和「網路」面板中的篩選器文字方塊，以及「元素」面板中的 DOM 搜尋文字方塊，現在都有「清除」按鈕。按一下「清除」即可移除所有輸入文字。

Chromium 問題：1067184

下載預覽版頻道

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

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

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

• 如要提供意見回饋或提出功能要求，請前往 crbug.com。
• 如要回報開發人員工具的問題，請依序點選開發人員工具中的 more_vert「更多選項」 >「說明」 >「回報開發人員工具的問題」。
• 在 Twitter 訊息中標記 @ChromeDevTools。
• 在「開發人員工具最新消息」或「開發人員工具提示」YouTube 影片中留言。

開發人員工具新功能

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