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

「效能」面板的彈出式視窗會顯示「Web Vitals」資訊

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

Chromium 問題：1147872

以視覺化方式呈現 CSS 捲動滑行畫面

您現在可以切換「Elements」面板中的 scroll-snap 標記，檢查 CSS 捲動貼齊對齊情形。

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

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

Chromium 問題：862450

全新記憶體檢查工具

使用新的記憶體檢查工具檢查 JavaScript 中的 ArrayBuffer 和 Wasm 記憶體。

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

重新整理頁面。在右側「Debugger」窗格中展開「Scope」區段。請留意 buffer 值旁邊的新圖示。按一下該項目，即可顯示「記憶體檢查工具」。

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

Chromium 問題：1166577

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

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

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

Chromium 問題：1066772

顯示顯示比例資訊的加強型圖片預覽畫面

「元素」面板中的圖片預覽功能現在可顯示更多關於圖片的資訊，包括顯示的大小、顯示比例、內建尺寸、內建顯示比例和檔案大小。

進一步瞭解圖片，並視情況套用最佳化設定。

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

Chromium 問題：1149832、1170656

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

「網路」面板會新增一個新的網路條件按鈕。按一下該標籤，開啟「網路條件」分頁。

「網路條件」分頁已新增「可接受的 Content-Encodings」選項。調整設定，測試伺服器回應在不支援 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

刪除信任權杖

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

Trust Token 是一種全新的 API，可用於打擊詐欺、辨別機器人和真人，而且不需要被動追蹤。瞭解如何開始使用 Trust Token。

Chromium 問題：1126824

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

現在「影格詳細資料」檢視畫面的「權限政策」部分會顯示封鎖功能的詳細資料。

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

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

Chromium 問題：1158827

在「實驗」設定篩選實驗

使用新的實驗篩選器，更快找到所需實驗。例如：前往「設定」>實驗：在「篩選器」文字方塊中輸入「對比」篩選含有「對比」這個字詞的所有實驗。

「Cache Storage」(快取儲存空間) 窗格中新增「Vary Header」資料欄

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

Chromium 問題：1186049

「來源」面板改善項目

支援新版 JavaScript 功能

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

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

如要試用，請前往「Console」和「Sources」面板。您也可以在「Debugger」窗格下方查看「Scope」部分的不公開欄位。

Chromium 問題：11374

進階支援中斷點偵錯功能

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

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

Chromium 問題：1142705、979000、1180794

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

開發人員工具現在支援使用「Sources」面板中 [] 標記法的 JavaScript 成員運算式的懸停預覽功能。

Chromium 問題：1178305

改善 HTML 檔案大綱

開發人員工具現已針對 HTML 檔案提供更完整的支援。在「來源」面板中開啟 HTML 檔案。如要切換課程大綱，請使用鍵盤 Cmd + Shift + O 鍵 (在 Mac 中則是 Ctrl + Shift + O 鍵)。

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

Chromium 問題：761019、1191465

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

開發人員工具現在可解決內嵌函式呼叫，並針對 Wasm 偵錯顯示適當的錯誤堆疊追蹤。

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

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

Chromium 問題：1189161

下載預覽頻道

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

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

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

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

開發人員工具新功能

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