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

Jecelyn Yeen

調節 WebSocket 要求

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

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

調節 WebSocket 要求

Chromium 問題：423246

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

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

Reporting API 旨在協助您監控網頁的安全性違規事項、已淘汰的 API 呼叫等。

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

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

「端點」區段可讓您概略瞭解 Reporting-Endpoints 標頭中設定的所有端點。

Reporting API 窗格

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 格式指定碼

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

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

Chromium 問題：1277944、1282076

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

現在，篩選控制台訊息時，如果控制台的訊息內容與篩選器或群組標題 (或祖系群組) 相符，系統就會顯示控制台訊息。先前，即便套用了篩選器，系統仍會顯示控制台群組標題。

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

控制台群組篩選器

Chromium 問題：1068788

改善來源地圖

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

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

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

Chromium 問題：212374

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

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

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

Chromium 問題：1284737

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

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

ALT_TEXT_HERE

Chromium 問題：1277002

Chrome 的自動深色主題更新

「Auto Dark Theme emation」 UI 現已簡化。這是核取方塊，之前是下拉式選單。

除此之外，啟用「Auto Dark Theme」後，系統會停用「Emulatepreferreds-color-scheme」下拉式選單，並自動設為「prefers-color-scheme: Dark」。

Chrome 96 針對 Android 裝置上的自動深色主題推出了來源試用。透過這項功能，使用者在作業系統中選擇使用深色主題時，瀏覽器會將自動產生的深色主題套用至淺色主題網站。

自動深色主題模擬

Chromium 問題：1243309

支援觸控的色彩挑選器和分割窗格

您現在可以在觸控螢幕裝置上，使用開發人員工具或觸控筆選取顏色，以及調整開發人員工具中的導覽匣大小。

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

Chromium 問題：1284245、1284995

其他精選內容

這個版本的幾個重點修正如下：

下載預覽管道

考慮使用 Chrome Canary 版、開發人員版或 Beta 版做為預設開發瀏覽器。這些預覽管道可讓您存取開發人員工具的最新功能、測試最先進的網路平台 API，並在使用者使用之前就在網站上發現問題！

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

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

  • 請透過 crbug.com 提交建議或意見回饋。
  • 如要回報開發人員工具的問題，請在開發人員工具中依序點選「更多選項」圖示 更多   >「說明」 >「回報開發人員工具的問題」。
  • 在 @ChromeDevTools 張貼推文。
  • 歡迎對開發人員工具的 YouTube 影片或開發人員工具秘訣 (YouTube 影片) 提供意見。

開發人員工具的新功能

這裡列出了「開發人員工具新功能」系列中已涵蓋的所有功能。

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 111

Chrome 110 版本

Chrome 109 版

Chrome 108 版

Chrome 107 版

Chrome 106 版

Chrome 105

Chrome 104 版

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 99

Chrome 98 版

Chrome 97

Chrome 96

Chrome 95

Chrome 94 版

Chrome 93 版

Chrome 92 版

Chrome 91 版

Chrome 90

Chrome 89

Chrome 88 版

Chrome 87

Chrome 86

Chrome 85 版

Chrome 84 版

Chrome 83 版

Chrome 82 版

Chrome 82 已取消。

Chrome 81 版

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