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

Jecelyn Yeen

限制 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 應用程式。開啟這個示範，親自查看吧！

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

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」面板中。先前未正確處理 worker 來源檔案。

Chromium 問題：1277002

Chrome 自動深色主題更新

自動深色主題模擬 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)。
• 在「Issues」分頁中回報 CORS 預檢要求問題。(1272445)。
• 在「Issues」分頁中回報 User-Agent Client Hints 問題。(1219359)。
• 修正「來源」和「控制台」面板中的 Shift + Delete 和 Page up / Page down 行為。(1278461、1285662)
• 關閉「來源」面板中的中斷點編輯對話方塊，以移除中斷點。(922513)
• 在開發人員工具中切換淺色/深色主題時，無需重新載入。(1278738)

下載預覽管道

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

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

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

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

開發人員工具的新功能

DevTools 新功能系列文章中涵蓋的所有內容清單。