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

Sofia Emelianova
Sofia Emelianova
GitHub

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

這個版本支援 Gemini 在大多數歐洲國家/地區提供控制台深入分析。

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

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

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

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

效能面板更新

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

加強型網路曲目

我們已強化「Performance」面板中的「Network」軌跡，以便提前顯示重要資訊，例如更詳細的時間長度和網路啟動條件樹狀圖，並提供更清晰的視覺提示和顏色。因此，您不必再切換「Network」面板和「Performance」>「Summary」分頁。此外，如果您仍需要切換至「Network」面板，我們已讓這項操作變得更簡單、更快速。

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 事件的任意詳細資料，以及這些事件的時間戳記。

時間資訊追蹤中的自訂事件，內含時間戳記和詳細資料。

Chromium 問題：345418915。

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

Network 面板現在可讓您套用篩選器，並只複製所列要求，而非複製整個網路記錄。

僅複製列出的要求選項。

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

Memory 面板中的堆積快照速度更快，現在會以命名的 HTML 標記分組物件，並顯示較少的內部物件，以便更符合 JavaScript 語言語意，而且一律包含數值。

依名稱標記分組的物件。

「在擷取畫面中加入數值」設定的效能已加快，並預設為開啟，且已從「記憶體」面板中移除。

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

Chromium 問題：41490040、343341610、42203857。

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

「動畫」面板現在會執行以下操作：

  • 開啟面板時，系統會擷取正在播放的動畫，因此您不必重新整理頁面就能擷取動畫。
  • 支援 @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。
  • 「元素」 >「樣式」：
    • 長度屬性值中的單位下拉式選單現已淘汰 41495618。
    • 修正巢狀 at-rule 的有效屬性解析問題 346732737。
    • 閒置的 @position-try 部分現在會顯示為灰色 40246493。
  • 應用程式：
    • Cookie：修正在點按「重新整理」時不會重新整理 Cookie 的錯誤 348683488。
    • 本機存放區：現在可以依鍵值的字母順序排序 341129585。

下載預覽管道

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

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

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

開發人員工具的新功能

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