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

Jecelyn Yeen

「新增媒體」面板

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

「新增媒體」面板

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

新的媒體面板可讓您在與影片播放器本身的相同瀏覽器分頁中，以更輕鬆的方式查看事件、記錄、屬性，以及影格解碼時間軸。您可以更快即時查看並檢查潛在問題，例如出現影格遺失的原因、JavaScript 如何以非預期方式與玩家互動。

Chromium 問題：1018414

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

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

舉例來說，您可以擷取內容資料表的螢幕截圖，方法是在元素上按一下滑鼠右鍵，然後選取「Capture node screenshot」。

擷取節點螢幕截圖

Chromium 問題：1100253

問題分頁更新

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

控制台訊息中的問題

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

第三方 Cookie 問題核取方塊

Chromium 問題：1096481、1068116、1080589

模擬缺少的本機字型

開啟「Rendering」分頁，然後使用新的「停用本機字型」功能，模擬 @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。如果網頁包含可公開存取的 JavaScript 來源對應，Lighthouse 現在可以強化稽核作業。

Chromium 問題：772558

Service Workers 窗格中的「其他來源」清單淘汰

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

先前開發人員工具會在「Application」面板 >「Service worker」窗格中以巢狀方式顯示清單。

連結至其他來源

Chromium 問題：807440

顯示已篩選項目的涵蓋範圍摘要

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

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

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

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

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

Chromium 問題：1093247

開啟視窗的影格詳細資料

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

已開啟視窗頁框詳細資料

Chromium 問題：1107766

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

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

安全性與隔離資訊

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

Chromium 問題：1051466

元素和網路面板更新

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

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

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

Chromium 問題：1093227

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

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

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

Chromium 問題：1105205、1116085

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

在「網路」面板中檢查網路資源時，DevTools 現在會將「標頭」窗格中的所有 X-Client-Data 標頭值設為程式碼格式。

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

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

Chromium 問題：1103854

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

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

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

自動完成自訂字型

Chromium 問題：1106221

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

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

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

顯示重新導向資源類型

Chromium 問題：997694

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

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

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

Chromium 問題：1067184

下載預覽頻道

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

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

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

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

開發人員工具新功能

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 指南

Chrome 110

Chrome 指南

Chrome 108

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Google 瀏覽器 93

Chrome 92 版

Chrome 91

Chrome 90

Google Chrome 89

Google Chrome 88

Chrome 87

Chrome 86 版

Chrome 85 版

Google Chrome 84

Chrome 83 版

Chrome 82 版

Chrome 82 已取消。

Chrome 81 版

Google Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72 版

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63 版

Chrome 62 版

Chrome 61 版

Chrome 60 版

Chrome 59