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

新增媒體面板

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

新增媒體面板

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

透過全新的「媒體」面板,您可以在與影片播放器相同的瀏覽器分頁中,輕鬆查看事件、記錄、屬性和影格解碼時間軸。您可以更快檢視及檢查潛在問題,例如發生捨棄影格的原因、JavaScript 以非預期的方式與播放器互動的原因。

Chromium 問題:1018414

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

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

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

擷取節點螢幕截圖

Chromium 問題:1100253

「問題」分頁最新消息

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

控制台訊息問題

第三方 Cookie 問題現已預設為在「問題」分頁中隱藏。啟用新的「包含第三方 Cookie 問題」核取方塊即可查看。

第三方 Cookie 問題核取方塊

Chromium 問題:109648110681161080589

模擬缺少的本機字型

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

舉例來說,如果「Rubik」字型已安裝在裝置上,而 @font-face src 規則使用做為 local() 字型,Chrome 會使用裝置中的本機字型檔案。

啟用「Disable localFont」時,開發人員工具會忽略 local() 字型,並從網路擷取。

模擬缺少的本機字型

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

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

停用本機字型可讓您更輕鬆地進行以下作業:

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

Chromium 問題:384968

模擬不活躍使用者

Idle Detection API 可讓開發人員偵測不活躍使用者,並針對閒置狀態變更做出回應。您現在可以使用開發人員工具模擬「Sensors」分頁中的使用者狀態和螢幕狀態變更,不必等待實際的閒置狀態變更。您可以從「Drawer」中開啟「Sensors」分頁。

模擬不活躍使用者

Chromium 問題:1090802

模擬 prefers-reduced-data

prefers-reduced-data 媒體查詢會偵測使用者偏好是否偏好使用較少資料轉譯頁面的其他內容。

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

模擬偏好資料較少的資料

Chromium 問題:1096068

支援新的 JavaScript 功能

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

  • 邏輯指派運算子 - 開發人員工具現在支援透過「Console」和「Source」面板中的新運算子 &&=||=??= 進行邏輯指派。
  • 美化排版數字分隔符 - 開發人員工具現在可正確列印「來源」面板中的數字分隔符。

Chromium 問題:10868171080569

Lighthouse 面板 6.2 號

Lighthouse 面板現在正在執行 Lighthouse 6.2。如需完整的異動清單,請參閱版本資訊

取消大小圖片

Lighthouse 6.2 的新稽核功能:

  • 避免長時間的主要執行緒工作。回報主要執行緒上最長的工作,有助於找出最壞的輸入延遲。
  • 連結可供檢索。檢查錨定元素的 href 屬性是否連結至適當的目的地,以便找到連結。
  • 未調整大小的圖片元素:檢查圖片元素上是否已設定明確的 widthheight。明確圖片大小可減少版面配置位移,並改善 CLS。
  • 避免使用非合成動畫。回報會出現卡頓並減少 CLS 的非合成動畫
  • 監聽 unload 事件。回報 unload 事件。建議您改用 pagehidevisibilitychange 事件,因為 unload 事件無法穩定觸發。

Lighthouse 6.2 更新稽核功能:

  • 移除未使用的 JavaScript。如果網頁具備可公開存取的 JavaScript 來源對應,Lighthouse 現在會強化稽核功能。

Chromium 問題:772558

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

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

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

連結至其他來源

Chromium 問題:807440

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

開發人員工具現在會在「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

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

開發人員工具現在會顯示每個影格的詳細檢視畫面。在「Applications」面板中的「Frames」選單下方,按一下一個框架,即可存取。

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

Chromium 問題:1093247

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

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

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

Chromium 問題:1107766

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

開發人員工具現在會在影格詳細資料中顯示安全內容:Cross-Origin-Embedder-Policy (COEP) 和跨源開啟器政策 (COOP)

安全性和隔離資訊

影格詳細資料檢視畫面很快就會加入更多安全性資訊。

Chromium 問題:1051466

元素和網路面板更新

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

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

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

Chromium 問題:1093227

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

「屬性」窗格已恢復正常運作,因此已在 Chrome 第 84 版中淘汰。在日後的開發人員工具版本中,我們將改善檢查元素屬性的工作流程。

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

Chromium 問題:11052051116085

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

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

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

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

Chromium 問題:1103854

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

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

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

自動完成自訂字型

Chromium 問題:1106221

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

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

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

顯示重新導向資源類型

Chromium 問題:997694

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

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

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

Chromium 問題:1067184

下載預覽管道

考慮使用 Chrome Canary 版開發人員版Beta 版做為預設開發瀏覽器。這些預覽管道可讓您存取開發人員工具的最新功能、測試最先進的網路平台 API,並在使用者使用之前就在網站上發現問題!

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

使用下列選項,討論文章的新功能和異動,以及其他與開發人員工具相關的事項。

  • 請透過 crbug.com 提交建議或意見回饋。
  • 如要回報開發人員工具的問題,請在開發人員工具中依序點選「更多選項」圖示 更多   >「說明」 >「回報開發人員工具的問題」
  • @ChromeDevTools 張貼推文。
  • 歡迎對開發人員工具的 YouTube 影片或開發人員工具秘訣 (YouTube 影片) 提供意見。

開發人員工具的新功能

這裡列出了「開發人員工具新功能」系列中已涵蓋的所有功能。

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 111

Chrome 110 版本

Chrome 109 版

Chrome 108 版

Chrome 107 版

Chrome 106 版

Chrome 105

Chrome 104 版

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 99

Chrome 98 版

Chrome 97

Chrome 96

Chrome 95

Chrome 94 版

Chrome 93 版

Chrome 92 版

Chrome 91 版

Chrome 90

Chrome 89

Chrome 88 版

Chrome 87

Chrome 86

Chrome 85 版

Chrome 84 版

Chrome 83 版

Chrome 82 版

Chrome 82 已取消

Chrome 81 版

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