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

節流 WebSocket 要求

「Network」面板現在支援網路通訊端要求節流。先前網路節流設定不適用於網路通訊端要求。

開啟「網路」面板，按一下網路通訊端要求，然後開啟「訊息」分頁，即可觀察訊息傳輸情況。選取「慢速 3G」可調節速度。

Chromium 問題：423246

「應用程式」面板中的新 Reporting API 窗格

使用全新的「Reporting API」窗格即可監控頁面產生的報表及其狀態。

Reporting API 的用途是協助您監控網頁安全性違規情形、已淘汰的 API 呼叫等。

開啟使用 Reporting API 的頁面 (例如示範頁面)。在「Application」面板中，向下捲動至「背景服務」部分，然後選取「Reporting API」窗格。

「報表」部分會顯示頁面產生的報表清單及其狀態。按一下報表即可查看詳細資料。

「端點」區段可提供 Reporting-Endpoints 標頭中設定的所有端點總覽。

Chromium 問題：1205856

支援等待「錄音工具」面板顯示/可點選的元素

重播使用者流程錄製時，「錄音工具」面板現在會等到該元素在可視區域顯示或可供點選時，或者嘗試將元素自動捲動至可視區域再重播。在此之前，重播作業會立即失敗。

以下範例說明如何將畫面外選單放置在可視區域外，啟用時滑入。使用者流程是切換選單，然後點按選單項目。在過去，重播作業會在最後一個步驟失敗，因為選單項目仍在滑動中，因此還不會顯示在可視區域中。不過現在問題已解決。

Chromium 問題：1257499

改善控制台樣式、格式設定和篩選功能

使用 ANSI 逸出程式碼為記錄訊息設定適當樣式

您現在可以使用 ANSI 逸出序列，為主控台訊息設定適當的樣式。先前，開發人員工具控制台對 ANSI 逸出序列的支援非常有限 (部分毀損)。

Node.js 開發人員常會透過 ANSI 逸出序列為記錄訊息著色，通常需要一些樣式程式庫的協助，例如 chalk、colors、ansi-colors、kleur 等。

變更後，您現在可以使用開發人員工具，以適當的色彩化控制台訊息，順暢地對 Node.js 應用程式偵錯。開啟這個demo即可自行查看！

進一步瞭解格式設定與使用開發人員工具設定控制台訊息樣式，請參閱「在控制台中設定訊息的格式和樣式」說明文件。

Chromium 問題：1282837、1282076

正確支援 %s、%d、%i 和 %f 格式指定碼

Console 現在可以按照 Console Standard 的規定正確執行 %s、%d、%i 和 %f 類型轉換。以前對話結果不一致。

Chromium 問題：1277944、1282076

更符合直覺的控制台群組篩選器

篩選控制台訊息時，如果控制台訊息內容符合篩選條件或群組 (或祖系群組) 的標題符合篩選條件，系統現在就會顯示訊息。過去，即便套用了篩選條件，系統仍會顯示控制台群組標題，

此外，如果顯示控制台訊息，現在也會顯示所屬群組 (或祖系群組)。

Chromium 問題：1068788

來源對應改善項目

使用來源對應檔案對 Chrome 擴充功能進行偵錯

您現在可以使用來源對應檔案對 Chrome 擴充功能進行偵錯。先前，開發人員工具僅支援 Chrome 擴充功能偵錯的內嵌來源對應。

Chromium 問題：212374

改良「來源」面板中的來源資料夾樹狀結構

「來源」面板中的來源資料夾樹狀結構現已改善，現在資料夾結構和命名方式 (例如「../」、「./」等) 過於雜亂。實際上，這是將來源對應中的絕對來源網址正規化後的結果。

Chromium 問題：1284737

在「來源」面板中顯示工作站來源檔案

具有相對 SourceURL 的 Worker (例如網路工作站、Service Worker) 來源檔案現在會顯示在「Source」面板中。先前未正確處理工作站來源檔案。

Chromium 問題：1277002

Chrome 的自動深色主題更新

Auto Dark Theme 模擬 UI 現已簡化。這是核取方塊，原先是下拉式選單。

此外，啟用「Auto Dark Theme」 時，系統會停用「Emulaterefers-color-scheme」下拉式選單，並自動將其設為「prefers-color-scheme: dark」。

Chrome 96 推出了在 Android 裝置上針對 Auto Dark Theme 的來源試用體驗。使用者選擇在作業系統中採用深色主題時，瀏覽器就會為淺色主題網站套用自動產生的深色主題。

Chromium 問題：1243309

適合觸控的顏色挑選器和分割窗格

你現在可以在觸控螢幕裝置上，使用手指或觸控筆導覽匣選取顏色和大小，

以下是使用 Google Pixelbook 裝置觸控螢幕拍攝的範例。

Chromium 問題：1284245、1284995

其他精選內容

這個版本包含以下重大修正項目：

• 修正「Cookie」窗格中的編輯 Cookie 問題。(1290196)。
• 按下 Shift + Tab 鍵，即可在「指令」選單中選取上一個指令。(1278743)。
• 在「問題」分頁中回報 CORS 預檢要求問題。(1272445)。
• 在「問題」分頁中回報使用者代理程式用戶端提示問題。(1219359)。
• 已修正「來源」和「控制台」面板中的 Shift + Delete 和 Page up / Page down 行為。(1278461、1285662)。
• 在「Sources」面板中，關閉移除中斷點的中斷點編輯對話方塊。(922513)。
• 在開發人員工具中切換淺色/深色主題時，不必重新載入。(1278738)。

下載預覽頻道

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

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

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

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

開發人員工具新功能

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