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

「效能」面板中的「網站指標」資訊彈出式視窗

將滑鼠游標懸停在「效能」面板中的網站使用體驗指標標記上，即可瞭解指標的意義，以及效能是良好、需要改善還是不佳。

Chromium 問題：1147872

以視覺化方式呈現 CSS scroll-snap

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

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

在上例中，你可以看到對齊邊緣上的點標記。捲動埠有實線外框，貼齊項目則有虛線外框。捲動邊框間距會填入綠色，捲動邊界則會填入橘色。

Chromium 問題：862450

新的記憶體檢查工具

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

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

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

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

Chromium 問題：1166577

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

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

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

Chromium 問題：1066772

強化圖片預覽功能，提供長寬比資訊

「元素」面板中的圖片預覽畫面現在會顯示更多圖片資訊，包括算繪大小、算繪長寬比、內建大小、內建長寬比和檔案大小。

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

按一下即可預覽圖片，並在「網路」面板中查看圖片顯示比例資訊。

Chromium 問題：1149832、1170656

新的網路狀況按鈕，可設定 Content-Encoding

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

「網路狀況」分頁新增「接受的內容編碼」選項。設定此標頭，即可在不支援 gzip、brotli 或其他未來 Content-Encoding 的瀏覽器中，測試伺服器回應是否已正確編碼。

Chromium 問題：1162042

樣式窗格強化功能

在「樣式」窗格中查看計算值的全新捷徑

現在只要在「樣式」窗格中，對 CSS 屬性按一下滑鼠右鍵，然後選取「查看計算值」，即可查看計算出的 CSS 值。

Chromium 問題：1076198

支援 accent-color 關鍵字

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

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

Chromium 問題：1092093

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

「問題」分頁現在會將問題分類為頁面錯誤、近期破壞性變更和可能改善項目，以便更清楚地指出問題嚴重程度。在控制台中，按一下「問題數量」按鈕，即可開啟「問題」分頁。

• 網頁錯誤 (紅色)：會立即影響網頁功能的問題，例如未設定正確的 CORS 標頭等。
• 即將推出的破壞性變更 (黃色)。問題：通知網頁平台即將進行不相容的變更，可能導致網頁功能失效 (例如即將進行 CORS RFC 1918 變更的警告)。
• 可能的改善做法 (藍色)。網頁可改善之處，但目前不會影響網頁基本功能 (例如無障礙問題)

Chromium 問題：1183241

刪除 Trust Tokens

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

Trust Token 是一種新 API，可協助防範詐欺及辨別機器人和真人，且不會進行被動追蹤。瞭解如何開始使用 Trust Token。

Chromium 問題：1126824

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

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

開啟這個試用頁面。前往「應用程式」面板，然後選取影格。在「Permissions Policy」(權限政策) 專區中，捲動至「Disabled Features」(已停用功能) 屬性。按一下「顯示詳細資料」，即可查看功能遭封鎖的詳細原因。按一下各項政策旁的圖示，即可前往導致功能遭到封鎖的 iframe 或網路要求。

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

Chromium 問題：1158827

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

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

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

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

Chromium 問題：1186049

來源面板改善項目

支援新的 JavaScript 功能

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

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

請前往「控制台」和「來源」面板試用。您也可以在「偵錯工具」窗格的「範圍」部分檢查私有欄位。

Chromium 問題：11374

進一步支援中斷點偵錯

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

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

Chromium 問題：1142705、979000、1180794

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

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

Chromium 問題：1178305

改善 HTML 檔案的大綱

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

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

Chromium 問題：761019、1191465

適用於 Wasm 偵錯的正確錯誤堆疊追蹤

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

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

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

Chromium 問題：1189161

下載預覽版頻道

建議使用 Chrome Canary、開發人員版或 Beta 版做為預設開發瀏覽器。透過這些搶先體驗管道，您可以存取最新的開發人員工具功能、測試最先進的網頁平台 API，並在使用者發現問題前找出網站上的問題！

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

如要討論開發人員工具的新功能、更新或其他相關事項，請使用下列選項。

• 如要提供意見回饋或提出功能要求，請前往 crbug.com。
• 如要回報開發人員工具的問題，請依序點選開發人員工具中的 more_vert「更多選項」 >「說明」 >「回報開發人員工具的問題」。
• 在 Twitter 訊息中標記 @ChromeDevTools。
• 在「開發人員工具最新消息」或「開發人員工具提示」YouTube 影片中留言。

開發人員工具新功能

「開發人員工具新功能」系列涵蓋的所有主題清單。