Chrome 138 版 DevTools 的新功能

Sofia Emelianova
Sofia Emelianova
GitHub

效能面板改善

這個版本針對「Performance」面板進行了多項改善。

「網路依附元件樹狀結構」洞察資料中的預先連結來源

Performance > Insights > Network dependency tree 洞察現在會顯示已使用或未使用的預先連結來源和預先連結候選項目清單 (如有)。

預先連線提示可讓網站及早連線至重要的第三方來源，進而提升網頁載入速度。

在「網路依附元件樹狀結構」洞察中，新增預先連結的來源和候選項前後的比較。

詳情請參閱「預先連結必要來源」。

「文件要求延遲」洞察中的伺服器回應和重新導向時間

「Performance」 >「Insights」 >「Document request latency」洞察現在會顯示伺服器回應時間，以及重導的次數或時間 (如果有)。

在「文件要求延遲時間」洞察中加入重新導向和伺服器回應時間前後的比較。

網路要求摘要中的重新導向

Performance 面板現在會在網路要求的「Summary」和工具提示中顯示重新導向網址。

在網路要求的摘要和工具提示中加入重新導向網址之前和之後的畫面。

Chromium 問題：402353313。

減少效能追蹤記錄中的雜訊

效能面板現在不會顯示 v8 JavaScript 引擎的 compile 類別事件。先前，這些事件 (尤其是 compile code 事件) 會造成許多不必要的額外負擔和雜訊。

從效能追蹤記錄中移除「編譯程式碼」事件前後的畫面。

如果您發現某些重要的事件現在缺少，歡迎前往 crbug.com/414330508 提供意見回饋。

已淘汰的「停用 JavaScript 樣本」

由於「效能」 >「擷取設定」中的「停用 JavaScript 樣本」選項很少派上用場，且使用率偏低，因此已淘汰並移除。

從「擷取設定」中移除「停用 JavaScript 樣本」選項前後的畫面。

Chromium 問題：414734883。

Sensors 中的地理位置精確度參數

您現在可以透過「Sensors」面板設定地理位置模擬功能的準確度。這樣一來，您就能測試系統處理不同程度的 GPS 準確度。

在「Sensors」面板中，在地理位置模擬功能中新增「Accuracy」參數前後的效果。

Chromium 問題：40074843。

元素面板改善項目

這個版本對「元素」面板進行了多項改善。

更輕鬆地偵錯複雜的 CSS 值

為協助您對複雜的 CSS 值進行偵錯，現在只要將滑鼠游標懸停在「Elements」 >「Styles」分頁上，就會顯示工具提示：

  • CSS 變數的完整定義鏈結，讓您不必點按多個連結。
  • 逐步評估複雜的 CSS 計算，以便更有效率地找出錯誤，並進一步瞭解值的計算方式。

工具提示會在多行中顯示定義鏈結 (每個定義一個)，您可以展開複雜的計算，並將滑鼠游標懸停在值上，以便醒目顯示並追蹤計算值，回到初始運算式。

在說明文字中加入定義鏈結和可展開的複雜計算前後的畫面。

Chromium 問題：396080529。

@function 在「元素」>「樣式」中支援

為在 Chrome 中支援 @function，元素 > 樣式分頁現在會在專屬區段中，將自訂函式名稱連結至其定義。

將自訂函式名稱連結至對應的部分之前和之後。

網路面板功能改善

這個版本針對「Network」面板進行了多項改善。

has-request-header 個篩選器

「Network」面板現在支援 has-request-header 篩選器，可讓您依特定要求標頭名稱進行篩選。

在「Network」面板中新增「has-request-header」篩選器前後的畫面。

Chromium 問題：397481040。

隔離網頁應用程式中的 Direct Sockets

您現在可以在「Network」面板中，透過 TCPSocket、UDPSocket (在繫結模式下)、UDPSocket (在連線模式下) 監控隔離式網頁應用程式 (IWA)的流量。

方法是選取表格中一般要求旁的 directscoket 連線，然後在「訊息」分頁中選取訊息。

在網路面板中新增支援 IWA 中的 Direct Sockets 前後的比較。

隔離網頁應用程式 (IWA) 為網頁應用程式提供高信任安全性模型。詳情請參閱「隔離網頁應用程式入門」，並查看實作 Direct Sockets API 的示範應用程式。

其他精選內容

以下是這個版本中值得注意的修正和改善項目：

  • 應用程式 > 儲存空間：移除已淘汰的網路 SQL 選項 (crbug.com/412707590)。
  • 元素：
  • Network：從「Copy as fetch」選項中移除 Referrer-Policy HTTP 標頭，因為這是用於控制瀏覽器行為的回應標頭，而非用於控制用戶端的操作說明 (crbug.com/413904896)。
  • 效能：移除背景工作執行緒中的「長時間工作」警告，因為這些警告不會阻斷主執行緒 (crbug.com/40248589)。
  • 問題。報表現在會顯示：
    • 如果系統偵測到任何可疑的追蹤使用者資源，就會封鎖該資源。
    • 跳轉追蹤因應措施，無論在重新導向期間是否存取儲存空間皆可使用。
  • 無障礙功能。元素 > 樣式 中的下列元素現在可透過鍵盤進行焦點設定：

下載預覽管道

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

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

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

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

開發人員工具的新功能

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