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

節流 WebSocket 要求

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

開啟「Network」面板，按一下 Web Sockets 要求，然後開啟「Messages」分頁標籤，觀察訊息傳輸情形。選取「低速 3G」即可節流。

Chromium 問題：423246

「Application」面板中的新 Reporting API 窗格

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

Reporting API 可協助您監控網頁的安全違規、已淘汰的 API 呼叫等。

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

「報表」部分會列出網頁上產生的報表清單，以及報表狀態。按一下報表即可查看詳細資料。

「Endpoints」 專區會概略說明 Reporting-Endpoints 標頭中設定的所有端點。

Chromium 問題：1205856

支援等待元素在錄影器面板中顯示/可點選

重播使用者流程錄製內容時，Recorder 面板現在會等到元素在檢視區中可見或可點選，或是嘗試自動將元素捲動至檢視區，再重播步驟。先前重播作業會立即失敗。

以下是畫面外選單的範例，該選單位於檢視區外，並會在啟用時滑入。使用者流程是切換選單，然後點選選單項目。先前，由於選單項目仍在滑入，且尚未顯示在檢視區中，因此重播作業會在最後一個步驟失敗。不過現在問題已解決。

Chromium 問題：1257499

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

使用 ANSI 轉義代碼正確設定記錄訊息的樣式

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

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

有了這些變更，您現在可以使用開發人員工具，搭配適當的彩色控制台訊息，輕鬆偵錯 Node.js 應用程式。開啟這個示範，親自查看吧！

如要進一步瞭解如何使用 DevTools 設定控制台訊息的格式和樣式，請參閱「在控制台中設定訊息格式和樣式」說明文件。

Chromium 問題：1282837、1282076

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

控制台現在可正確執行 控制台標準中指定的 %s、%d、%i 和 %f 類型轉換。先前對話結果不一致。

Chromium 問題：1277944、1282076

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

篩選主控台訊息時，如果訊息內容符合篩選條件，或是群組 (或祖系群組) 的標題符合篩選條件，現在就會顯示主控台訊息。過去，即使篩選器已啟用，控制台群組標題仍會顯示。

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

Chromium 問題：1068788

改善來源對照圖

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

您現在可以使用原始碼對照圖檔偵錯 Chrome 擴充功能。先前，開發人員工具僅支援內嵌的來源圖，用於 Chrome 擴充功能偵錯。

Chromium 問題：212374

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

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

Chromium 問題：1284737

在「來源」面板中顯示 worker 來源檔案

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

Chromium 問題：1277002

Chrome 自動深色主題更新

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

此外，啟用自動深色主題時，系統會停用「模擬 prefers-color-scheme」下拉式選單，並自動將其設為「prefers-color-scheme: dark」。

Chrome 96 推出了 Android 版自動深色主題的來源試用。有了這項功能，當使用者在作業系統中選擇深色主題後，瀏覽器就會將自動產生的深色主題套用至淺色主題網站。

Chromium 問題：1243309

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

您現在可以在觸控螢幕裝置上，使用手指或觸控筆選取色彩，並調整 DevTools 中的Drawer 大小。

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

Chromium 問題：1284245、1284995

其他精選內容

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

• 修正「Cookie」窗格中的編輯 Cookie 問題。(1290196)
• 使用 Shift + Tab 在指令選單中選取上一個指令。(1278743)。
• 在「問題」分頁中回報 CORS 預檢要求問題。(1272445)。
• 請在「Issues」分頁中回報 User-Agent Client Hints 問題。(1219359)。
• 修正「來源」和「控制台」面板中的 Shift + Delete 和 Page up / Page down 行為。(1278461、1285662)
• 在「Sources」面板中，關閉移除中斷點的中斷點編輯對話方塊。(922513)
• 在開發人員工具中切換淺色/深色主題時，無需重新載入。(1278738)

下載預覽頻道

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

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

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

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

開發人員工具的新功能

這份清單列出「DevTools 最新消息」系列文章中涵蓋的所有內容。