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

Jecelyn Yeen

「效能」面板中會顯示網站體驗指標資訊

將滑鼠遊標懸停在「效能」面板中的網站體驗指標標記上，即可瞭解該指標代表的意義：效能良好、需要改善或不佳。

網站體驗指標資訊彈出式視窗

Chromium 問題：1147872

視覺化呈現 CSS 捲軸

您現在可以切換「Elements」面板中的 scroll-snap 徽章，檢查 CSS 捲動貼齊對齊方式。

CSS 捲軸

在您網頁上的 HTML 元素 (例如這個示範頁面) 套用 scroll-snap-type 後，「元素」面板中的該元素旁邊就會顯示 scroll-snap 徽章。按一下徽章即可在頁面上切換捲動貼齊重疊顯示內容。

在上述範例中，您可以看到貼齊邊緣上的點號。捲動連接埠會顯示實心的外框，貼齊項目則具有破折號。捲動的邊框間距會填入綠色，而捲動邊界則填滿橘色。

Chromium 問題：862450

全新記憶體檢查器

使用新的記憶體檢查器檢查 JavaScript 中的 ArrayBuffer，以及 Wasm 記憶體。

開啟這個示範頁面。在「Sources」面板中開啟 demo-js.js 檔案，然後在第 18 行設定中斷點。

請重新整理網頁，在右側「debugger」窗格中展開「Scope」區段。請注意 buffer 值旁邊的新圖示。按一下這個圖示，即會顯示「Memory Inspector」。

請參閱說明文件，進一步瞭解如何使用這個新的記憶體檢查器檢查 JavaScript ArrayBuffer 和 WebAssembly.Memory。

記憶體檢查器

Chromium 問題：1166577

「元素」面板中的新徽章設定窗格

您現在可以透過「元素」面板中的「徽章設定」，選擇性地啟用或停用標記。您可以使用這項功能自訂，並在檢查網頁時注意重要徽章。

「元素」面板中的徽章設定窗格

在「元素」面板中在任何元素上按一下滑鼠右鍵。在內容選單中選取「徽章設定」，徽章設定窗格就會出現在頂端。啟用或停用任何核取方塊，以顯示/隱藏徽章。

Chromium 問題：1066772

含有顯示比例資訊的強化圖片預覽畫面

「Elements」面板中的圖片預覽畫面現在會顯示有關圖片的更多資訊，包括轉譯後的尺寸、算繪的長寬比、內建大小、內建長寬比和檔案大小。

這項資訊有助您進一步瞭解圖片，並視需要進行調整。

含有顯示比例資訊的圖片預覽畫面

當您點選預覽圖片時，也可以在「網路」面板中查看圖片長寬比資訊。

「網路」面板中的圖片顯示比例資訊

Chromium 問題：1149832、1170656

「新增網路條件」按鈕，提供設定 Content-Encoding 的選項

「網路」面板中新增了一個網路條件按鈕。按一下這個 ID，即可開啟「網路狀況」分頁。

「Network Conditions」(網路狀況) 分頁中新增了一個「Accept Content-Encodings」選項。進行相關設定，測試伺服器回應在不支援 gzip、brotli 或其他日後的 Content-Encoding 瀏覽器中是否正確編碼。

新增網路條件按鈕，提供設定內容編碼的選項

Chromium 問題：1162042

強化樣式窗格

新增捷徑，以便在「樣式」窗格中查看計算的值

現在，您可以在「Styles」窗格中的 CSS 屬性上按一下滑鼠右鍵，然後選取「查看計算的值」，即可查看計算出的 CSS 值。

新增查看計算值的捷徑

Chromium 問題：1076198

支援 accent-color 關鍵字

「Styles」窗格的自動完成使用者介面現在會偵測 accent-color CSS 關鍵字，這可讓網頁開發人員為由元素產生的 UI 控制項 (例如核取方塊、圓形按鈕) 指定強調色。

accent-color CSS 屬性目前處於實驗階段。請啟用「chrome://flags/#enable-experimental-web-platform-features」進行測試。

強調色

Chromium 問題：1092093

使用顏色和圖示將問題類型分類

「問題」分頁現在會將問題分類至網頁錯誤、即將發布的破壞性變更和可能的改善項目，以提供更明確的嚴重性指標。按一下主控台中的 [問題數量] 按鈕，即可開啟「問題」分頁。

  • 網頁錯誤 (紅色)：會立即影響網頁功能的問題，例如未設定正確的 CORS 標頭等。
  • 即將推出的破壞性變更 (黃色)。說明網路平台即將進行不相容、不相容的變更，這可能會導致網頁功能失效 (例如即將實施 CORS RFC 1918 異動的警告訊息)。
  • 可能的改善項目 (藍色)。可能改善網頁，但目前並未影響網頁的基本功能 (例如無障礙功能問題)

使用顏色和圖示將問題類型分類

Chromium 問題：1183241

刪除信任權杖

您現在可以在「Application」面板下方的「Trusttoken」窗格中，使用新的「刪除」按鈕刪除信任權杖。

Trust Token 是一種新的 API，可協助防範詐欺行為，以及區分機器人和真人使用者，而不必進行被動追蹤。瞭解如何開始使用信任權杖。

刪除信任權杖

Chromium 問題：1126824

在「影格詳細資料」檢視畫面中查看已封鎖功能的詳細資料

現可在「Frame Details」(頁框詳細資料) 檢視畫面的「權限政策」部分查看已封鎖的功能詳細資料。

開啟這個示範頁面。前往「Application」面板，然後選取頁框。在「權限政策」部分中，捲動至「已停用的功能」屬性。按一下「顯示詳細資料」，進一步瞭解這項功能遭到封鎖的原因。按一下各項政策旁的圖示，即可查看封鎖該功能的 iframe 或聯播網要求。

權限政策是一個網路平台 API，可讓網站在其頁框或內嵌的 iframe 中允許或禁止使用瀏覽器功能。

「影格詳細資料」檢視畫面中遭到封鎖的功能

Chromium 問題：1158827

在「實驗」設定中篩選實驗

使用新的實驗篩選器更快找出實驗。例如依序前往「設定」>「實驗」，然後在「篩選器」文字方塊中輸入「對比」，即可篩選出所有包含「對比」這個字詞的實驗。

在「實驗」設定中篩選實驗

「快取儲存空間」窗格中新增的 Vary Header 資料欄

使用「Cache Storage」窗格中的新 Vary Header 欄，查看「Vary」 HTTP 回應標頭。

變動標頭欄

Chromium 問題：1186049

改善來源面板

支援新的 JavaScript 功能

開發人員工具現已支援新的私人品牌檢查 JavaScript 語言功能，也就是 #foo in obj。

這項私人品牌檢查功能會擴充 in 運算子，支援任何指定物件的私人類別欄位測試。

請在主控台和來源面板中試用此功能。您也可以檢查「偵錯工具」窗格下的「Scope」區段的不公開欄位。

JavaScript 私人品牌檢查

Chromium 問題：11374

加強對中斷點偵錯的支援

開發人員工具現在可在多個指令碼中正確設定中斷點。現代的 JavaScript 組合器 (例如 Webpack、匯總) 都支援程式碼分割功能，某些情況下，一個共用元件可包含在多條路線中 (程式碼分割)。

開發人員工具先前只能在單一原始位置設定中斷點。透過這項最新改善功能，開發人員工具可以正確設定所有相關位置的中斷點。

Chromium 問題：1142705、979000、1180794

使用 [] 標記法支援懸停預覽

對於使用「來源」面板中的 JavaScript 成員運算式，開發人員工具現在支援懸停預覽。[]

支援懸停預覽搭配「[]」標記

Chromium 問題：1178305

改善 HTML 檔案大綱

開發人員工具現在可以更妥善支援 HTML 檔案。在「來源」面板中開啟 HTML 檔案。在 Mac 中，您可以使用鍵盤上的 Cmd + Shift + O 鍵切換程式碼外框，或是在 Windows 中按下 Ctrl + Shift + O 鍵。

在以下範例中，開發人員工具現在可以正確列出大綱中的所有函式。開發人員工具先前只會顯示部分功能。

改善 HTML 檔案大綱

Chromium 問題：761019、1191465

Wasm 偵錯的正確錯誤堆疊追蹤

開發人員工具現在會解析內嵌函式呼叫，並顯示正確的 Wasm 偵錯錯誤堆疊追蹤。

先前開發人員工具只會在錯誤堆疊追蹤中顯示一般 Wasm 參照。

Wasm 偵錯的正確錯誤堆疊追蹤

左側的舊版 Chrome 不會顯示在錯誤堆疊追蹤中，顯示來源位置 (例如 dsquare)，但右側的新版 Chrome 會顯示。

Chromium 問題：1189161

下載預覽管道

考慮使用 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