開發人員工具 (Chrome 128) 的新功能'

Sofia Emelianova
Sofia Emelianova
GitHub

由 Gemini 提供的管理中心深入分析資訊即將在大多數歐洲國家/地區上線

這個版本支援 Gemini 的控制台深入分析資訊，支援大多數歐洲國家/地區。

最新支援的歐洲國家/地區清單

奧地利、比利時、保加利亞、瑞士、賽普勒斯、捷克、德國、丹麥、愛沙尼亞、西班牙、芬蘭、法國、英國、希臘、克羅埃西亞、匈牙利、愛爾蘭、冰島、義大利、列支敦斯登、立陶宛、盧森堡、拉脫維亞、馬爾他、葡萄牙、瑞典、挪威、挪威。

如果您位於上述國家/地區，現在可以直接在 控制台中要求 Gemini 提供深入分析資料，以便進一步瞭解錯誤和警告。

主控台中顯示的 Gemini 錯誤洞察。

效能面板更新

這次更新針對「Performance」面板進行了一些改善。

強化網路追蹤

我們已強化「Performance」面板中的「Network」軌跡，以便提前顯示重要資訊，例如更詳細的時間長度和網路啟動條件樹狀圖，並提供更清晰的視覺提示和顏色。因此，您不必再切換「Network」面板和「Performance」>「Summary」分頁。此外，如果您仍需切換到「網路」面板，我們可為您簡化相關步驟，協助您更快完成所需操作。

Network 追蹤記錄現在會執行以下操作：

  • 顯示要求類型的色彩圖例。
  • 在右上角以紅色三角形標示會造成轉譯阻斷的請求。
  • 選取後，系統會顯示帶有箭頭的請求發起者。這有助於您瞭解網路啟動子的樹狀結構，這項功能先前僅在「Network」面板中提供。
  • 當滑鼠游標懸停時，重新設計的工具提示現在會顯示結構化時間資訊，包括呈現阻擋狀態和優先順序變更 (如有)。
  • 「摘要」分頁現在也會在右側的欄中顯示時間的細目。

在「摘要」分頁中，強化的網路追蹤功能會顯示色彩輔助說明、工具提示、轉譯阻斷指標和時間。

此外，您現在可以在「Summary」分頁中，在追蹤記錄中的網址或網址上按一下滑鼠右鍵，然後從下拉式選單中選取「Reveal in Network panel」。開發人員工具會帶您前往「Network」面板，並在表格中醒目顯示您要尋找的要求。

要求的滑鼠右鍵選單，其中包含「在網路面板中顯示」選項。

使用可擴充的 API 自訂效能資料

這個版本在「成效」面板中支援擴充資料。您現在可以在成效追蹤記錄中新增包含事件和工具提示說明的自訂測試群組，在「摘要」分頁中新增詳細資料，並執行更多操作。對於使用自訂檢測功能的架構、程式庫和複雜應用程式的開發人員，這項功能可能很實用。

請參閱這個示範頁面中的自訂追蹤記錄範例。在「效能」>「擷取設定」中，開啟 「擴充功能資料」設定。開始錄製效能，按一下示範頁面上的「Add new Corgi」，然後停止錄製。追蹤記錄中會顯示自訂測試群組，其中包含含有自訂工具提示的事件，以及「摘要」分頁中的詳細資料。

「效能」面板中的自訂軌跡。

簡單來說，如要擴展效能資料，請將特定結構傳遞至 performance.measure() 或 performance.mark() API 呼叫的 measureOption.detail 或 markOption.detail 參數。

時間軸中的詳細資料

如果您是網頁開發人員，且使用 Performance API 的使用者載入時間部分，在「時間」測試群組中新增項目，現在可以在 mark 和 measure 事件的「摘要」分頁中查看任意詳細資料，以及事件的時間戳記。

Timings 測試群組中的自訂事件，有時間戳記和詳細資料。

Chromium 問題：345418915。

複製網路面板中列出的所有要求

現在您不必複製整個網路記錄，只要透過「網路」面板即可套用篩選器，並僅複製所列的要求。

僅針對已列出的要求複製選項。

使用名為 HTML 標記的堆積快照，可加快快照速度並減少雜亂

「Memory」面板中的堆積快照速度變得更快，現在可使用以命名的 HTML 標記將物件分組、顯示較少的內部物件，並且一律包含數值，以更符合 JavaScript 語言語意。

按已命名 HTML 標記分組的物件。

Include numerical values in capture 設定的效能已加快，並預設為開啟，且已從「Memory」面板中移除。

如要手動將內部物件納入快照，請先依序開啟「設定」 >「實驗」>「顯示在堆積區快照中公開內部資訊的選項」，然後在「記憶體」面板中開啟「公開內部資訊 (...)」。

Chromium 問題：41490040、343341610、42203857。

開啟「動畫」面板，擷取動畫並即時編輯 @keyframes

「Animations」面板現在可執行下列操作：

  • 開啟面板時，系統會擷取正在進行的動畫，因此您不必重新整理頁面即可擷取動畫。
  • 支援 @keyframes 的即時編輯功能。換句話說，只要前往「元素」>「樣式」編輯 @keyframes 部分，即可更新擷取的動畫。

請觀看以下影片，瞭解這兩項功能的實際運作情形。

Chromium 問題：352718055。

Lighthouse 12.1.0

Lighthouse 面板現在會執行 Lighthouse 12.1.0 面板。

這項更新帶來許多變更，包括移除舊版「畫面首次有效顯示所需時間」(FMP) 指標，改用「最大內容繪製」(LCP)指標。查看完整異動清單。

如要瞭解在開發人員工具中使用「Lighthouse」面板的基本概念，請參閱「Lighthouse：最佳化網站速度」。

Chromium 問題：772558。

無障礙設定

這個版本包含下列無障礙功能改善項目：

  • 在即時運算式的編輯欄位中完成自動完成功能後，按下 Tab 鍵，即可將焦點移至下一個焦點點。先前會縮排文字。
  • 點選調整大小工具後，系統會將焦點放在該工具上，以便您使用向左鍵和向右鍵移動該工具。
  • 使用鍵盤瀏覽時，螢幕閱讀器現在會明確朗讀「來源」和「刪除觀察運算式」中的「新增觀察運算式」編輯欄位。

Chromium 問題：349939551、343942719、349334243、349428374。

其他精選內容

這個版本包含多項重要修正和改善項目：

  • 效能：
    • Network 追蹤：新增 WebSocket 連線事件 331351979。
    • Performance 面板現在會正確放大最繁忙的主執行緒活動 345599356。
    • 修正上傳錯誤追蹤記錄檔案類型的錯誤，現在會禁止上傳任何類型的檔案，除了正確的 .json 或 .gz 349864878。
  • 「Elements」(元素) >「Styles」(樣式)：
    • 長度屬性值的單位下拉式選單現已淘汰 41495618。
    • 修正了巢狀規則 346732737 的有效屬性解析問題。
    • 閒置的 @position-try 部分現在會顯示為灰色 40246493。
  • 應用程式：
    • Cookie：修正「重新整理」時，按一下「348683488」後不會重新整理 Cookie 的錯誤。
    • 本機儲存空間：您現在可以按照索引鍵排序 (341129585)，

下載預覽頻道

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

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

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

開發人員工具的新功能

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