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

Jecelyn Yeen

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

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

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

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 值旁邊的新圖示。按一下該項目，即可顯示「記憶體檢查工具」。

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

記憶體檢查工具

Chromium 問題：1166577

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

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

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

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

Chromium 問題：1066772

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

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

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

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

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

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

Chromium 問題：1149832、1170656

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

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

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

新增網路條件按鈕，含有設定 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

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

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

開啟這個示範頁面。前往「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」部分的不公開欄位。

JavaScript 私有品牌檢查

Chromium 問題：11374

進階支援中斷點偵錯功能

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

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

Chromium 問題：1142705、979000、1180794

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

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

支援透過 [] 標記法的懸停預覽

Chromium 問題：1178305

改善 HTML 檔案大綱

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

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

改善 HTML 檔案大綱

Chromium 問題：761019、1191465

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

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

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

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

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

Chromium 問題：1189161

下載預覽頻道

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

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

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

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

開發人員工具新功能

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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 指南

Chrome 110

Chrome 指南

Chrome 108

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Google 瀏覽器 93

Chrome 92 版

Chrome 91

Chrome 90

Google Chrome 89

Google Chrome 88

Chrome 87

Chrome 86 版

Chrome 85 版

Google Chrome 84

Chrome 83 版

Chrome 82 版

Chrome 82 已取消。

Chrome 81 版

Google 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