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

「新增媒體」面板

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

在開發人員工具中的新媒體面板推出之前，系統可能會記錄影片播放器的相關資訊並進行偵錯 在「chrome://media-internals」中找到。

新版「媒體」面板提供了更簡單的方式，可以查看事件、記錄、屬性和影格時間軸 和影片播放器本身的相同瀏覽器分頁中解碼你可以在下方 更快發生潛在問題 (例如影格遺失的原因、JavaScript 如何與 以出乎意料的方式載入玩家)。

Chromium 問題：1018414

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

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

舉例來說，如要擷取內容表格的螢幕畫面，請在元素上按一下滑鼠右鍵 選取「擷取節點螢幕截圖」。

Chromium 問題：1100253

問題分頁更新

控制檯面板的問題警告列現已替換為一般訊息。

「問題」分頁現在預設會隱藏第三方 Cookie 問題。啟用新的 Include 第三方 Cookie 問題核取方塊，即可查看這些問題。

Chromium 問題：1096481、1068116、1080589

模擬缺少的本機字型

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

例如，如果字型是「Rubik」裝置已安裝在裝置上，且「@font-face src」規則會使用 視為 local() 字型，Chrome 會使用裝置中的本機字型檔案。

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

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

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

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

• 偵錯及評估網頁字型載入效能和最佳化
• 確認 CSS @font-face 規則的正確性
• 發現網路字型與本機版本之間的差異

Chromium 問題：384968

模擬不活躍的使用者

開發人員可以使用 Idle Detection API 偵測閒置使用者，並針對閒置狀態做出回應 並輸入變更內容您現在可以在「Sensors」分頁中使用開發人員工具，模擬以下兩者的閒置狀態變更： 而不必等待實際的閒置狀態變更。你可以開啟 導覽匣的「Sensors」分頁。

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。Lighthouse 現在可以強化稽核作業， 公開存取的 JavaScript 來源地圖。

Chromium 問題：772558

「其他來源」即將淘汰Service Workers 窗格中的

開發人員工具現已提供連結，你可以在新的來源中檢視其他來源的服務工作站完整清單 瀏覽器分頁 - chrome://serviceworker-internals/?devtools。

先前，開發人員工具會在「Application」面板下方顯示巢狀清單 >Service Worker 窗格。

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

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

開發人員工具現在會顯示每個影格的詳細資料。按一下「Frames」下方的某個框架，即可存取這個框架 「Application」面板中的選單。

Chromium 問題：1093247

開啟視窗的影格詳細資料

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

Chromium 問題：1107766

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

開發人員工具現在會顯示安全內容、Cross-Origin-Embedder-Policy (COEP) 和 畫面詳細資料中的 Cross-Origin-Opener-Policy (COOP)。

系統很快就會在頁框詳細資料檢視畫面中新增更多安全性資訊。

Chromium 問題：1051466

元素和網路面板更新

「Styles」窗格中的無障礙顏色建議

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

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

Chromium 問題：1093227

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

「屬性」窗格已恢復原狀，但已在 Chrome 第 84 版中淘汰。在日後的開發人員工具版本中 我們會改善檢查元素屬性的工作流程

Chromium 問題：1105205、1116085

「網路」面板中使用者可理解的 X-Client-Data 標頭值

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

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

Chromium 問題：1103854

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

編輯 font-family 時，匯入的字型會新增至 CSS 自動完成清單 「Styles」窗格中的屬性。

在此範例中，'Noto Sans' 是安裝在本機中的自訂字型。顯示位置 CSS 完成清單以前那並不是。

Chromium 問題：1106221

在網路面板中持續顯示資源類型

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

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

Chromium 問題：997694

清除「Elements」和「Network」面板中的按鈕

「Styles」窗格和「Network」面板中的篩選器文字方塊，以及 DOM 搜尋文字 「Elements」面板中的方塊，現已提供「Clear」按鈕。按一下「清除」後，系統便會移除 輸出內容

Chromium 問題：1067184

下載預覽頻道

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

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

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

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

開發人員工具新功能

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