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

網站體驗核心指標資訊會顯示在「成效」面板

將滑鼠游標懸停在「效能」面板中的 Web Vitals 標記上，即可瞭解指標代表的意思，例如效能是否良好、需要改善或不佳。

Chromium 問題：1147872

以視覺化方式呈現 CSS 捲動回應點

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

如果網頁上的 HTML 元素 (例如這個示範網頁) 已套用 scroll-snap-type，您會在「Elements」面板中看到該元素旁邊有 scroll-snap 徽章。按一下徽章，切換頁面上捲動快照疊加層的顯示狀態。

在上述範例中，您可以看到貼齊邊緣上的圓點標記。捲動端口有實線輪廓，而貼齊項目則有虛線輪廓。捲動邊框間距以綠色填滿，捲動邊界則以橘色填滿。

Chromium 問題：862450

新的記憶體檢查工具

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

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

重新整理頁面。展開右側「偵錯工具」窗格中的「範圍」部分。請注意「緩衝區」值旁邊的新圖示。按一下該圖示即可顯示「Memory Inspector」。

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

Chromium 問題：1166577

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

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

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

Chromium 問題：1066772

強化圖片預覽功能，提供顯示比例資訊

Elements 面板中的圖片預覽畫面現在會顯示更多圖片資訊，包括算繪大小、算繪顯示比例、內在大小、內在顯示比例和檔案大小。

這項資訊可協助您進一步瞭解圖片，並視需要套用最佳化設定。

點選圖片預覽畫面時，網路面板也會顯示圖片顯示比例資訊。

Chromium 問題：1149832、1170656

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

「Network」面板中新增了「Network Conditions」按鈕。按一下該分頁標籤即可開啟「網路狀況」分頁。

「網路條件」分頁中新增「Accepted Content-Encodings」選項。設定後，即可測試在不支援 gzip、brotli 或其他未來 Content-Encoding 的瀏覽器中，伺服器回應是否正確編碼。

Chromium 問題：1162042

樣式窗格強化功能

在「Styles」窗格中查看計算值的新捷徑

您現在可以按一下「Styles」窗格中的 CSS 屬性，然後選取「View computed value」，即可查看計算的 CSS 值。

Chromium 問題：1076198

支援 accent-color 關鍵字

樣式窗格中的自動完成 UI 現在會偵測 accent-color CSS 關鍵字，讓網頁開發人員指定元素產生的 UI 控制項 (例如核取方塊、單選按鈕) 的強調色。

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

Chromium 問題：1092093

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

「Issues」分頁現在會將問題分類為頁面錯誤、即將發生的破壞性變更，以及可能的改善項目，以便更準確地指出問題嚴重程度。只要在 控制台中按一下「問題數量」按鈕，即可開啟「問題」分頁。

• 網頁錯誤 (紅色)：對網頁功能造成立即影響的問題，例如未設定正確的 CORS 標頭等。
• 即將推出的破壞性變更 (黃色)。問題說明網路平台即將發生不相容的異動，可能導致網頁功能無法使用 (例如警告即將發生的 CORS RFC 1918 異動)。
• 可能的改善項目 (藍色)。網頁有可改善之處，但目前不會影響網頁的基本功能 (例如無障礙問題)

Chromium 問題：1183241

刪除 Trust 權杖

您現在可以透過「應用程式」面板下方的「信任權杖」窗格，使用新的刪除按鈕刪除信任權杖。

Trust Token 是全新的 API，可協助防範詐欺，並區分機器人和真人，不必進行被動追蹤。瞭解如何開始使用 Trust Tokens。

Chromium 問題：1126824

在「Frame」詳細資料檢視畫面中查看遭封鎖功能的詳細資料

您現在可以在 Frame 詳細資料檢視畫面中的「權限政策」部分，查看遭封鎖功能的詳細資料。

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

權限政策是一種網頁平台 API，可讓網站在其自身的框架或嵌入的 iframe 中，允許或封鎖瀏覽器功能的使用。

Chromium 問題：1158827

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

使用新的實驗篩選器，更快找到實驗。舉例來說，請依序前往「設定」>「實驗」，然後在「篩選」文字方塊中輸入「contrast」，即可篩選出含有「contrast」一詞的所有實驗。

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

使用「快取儲存空間」窗格中的新 Vary Header 欄，查看「Vary」HTTP 回應標頭。

Chromium 問題：1186049

改善「來源」面板

支援新的 JavaScript 功能

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

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

請前往「控制台」和「來源」面板試用。您也可以在「Debugger」窗格下方的「Scope」部分檢查私人欄位。

Chromium 問題：11374

強化對中斷點偵錯的支援

開發人員工具現在可正確設定多個指令碼中的中斷點。新型 JavaScript 套件匯出工具 (例如 Webpack、Rollup) 支援程式碼分割功能，在某些情況下，一個共用元件可納入多個路徑 (程式碼分割)。

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

Chromium 問題：1142705、979000、1180794

支援使用 [] 符號的懸停預覽

開發人員工具現在支援在「Sources」面板中，針對使用 [] 符號的 JavaScript 成員運算式，提供滑鼠懸停預覽功能。

Chromium 問題：1178305

改善 HTML 檔案大綱

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

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

Chromium 問題：761019、1191465

適當的 Wasm 偵錯錯誤堆疊追蹤

DevTools 現在會解析內嵌函式呼叫，並顯示適當的錯誤堆疊追蹤，以便進行 Wasm 偵錯。

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

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

Chromium 問題：1189161

下載預覽管道

建議您將 Chrome Canary、開發人員版或Beta 版設為預設開發人員版瀏覽器。這些預覽管道可讓您存取最新的 DevTools 功能，測試最新的網路平台 API，並在使用者發現問題前，協助您找出網站的問題！

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

請使用下列選項討論新功能、更新或任何與開發人員工具相關的內容。

• 請前往 crbug.com 提交意見回饋和功能要求。
• 在開發人員工具中，依序按一下「more_vert」more_vert更多選項 >「Help」 >「Report a DevTools issue」，即可回報開發人員工具的問題。
• 在 Twitter 上傳送訊息給 @ChromeDevTools。
• 在 YouTube 影片「What's new in DevTools」或「DevTools 提示」YouTube 影片中留言。

開發人員工具的新功能

DevTools 新功能系列文章中涵蓋的所有內容清單。