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

節流 WebSocket 要求

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

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

節流 WebSocket 要求

Chromium 問題:423246

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

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

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

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

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

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

Reporting API 窗格

Chromium 問題:1205856

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

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

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

Chromium 問題:1257499

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

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

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

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

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

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

控制台樣式

Chromium 問題:12828371282076

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

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

支援控制台訊息中的格式指定碼

Chromium 問題:12779441282076

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

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

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

控制台群組篩選器

Chromium 問題:1068788

來源對應改善項目

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

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

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

Chromium 問題:212374

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

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

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

Chromium 問題:1284737

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

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

ALT_TEXT_HERE

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 問題:12842451284995

其他精選內容

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

下載預覽頻道

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

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

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

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

開發人員工具新功能

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