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

Jecelyn Yeen

「新增媒體」面板

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

「新增媒體」面板

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

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

Chromium 問題：1018414

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

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

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

擷取節點螢幕截圖

Chromium 問題：1100253

問題分頁更新

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

控制台訊息中的問題

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

第三方 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 編碼，因此看起來像不透明字串。 序列化的通訊協定緩衝區。為了讓開發人員更清楚瞭解內容，開發人員工具的作用是 現在會顯示已解碼的值

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

Chromium 問題：1103854

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

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

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

自動完成自訂字型

Chromium 問題：1106221

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

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

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

顯示重新導向資源類型

Chromium 問題：997694

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

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

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

Chromium 問題：1067184

下載預覽頻道

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

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

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

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

開發人員工具新功能

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