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

Sofia Emelianova
Sofia Emelianova
GitHub

Gemini 提供的 Console Insights 即將在大多數歐洲國家/地區推出

這個版本支援 Gemini 的控制台洞察功能，適用於大多數歐洲國家/地區。

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

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

如果您位於上述國家/地區，現在可以直接在 Console 中向 Gemini 尋求深入分析，進一步瞭解錯誤和警告。

Gemini 提供的錯誤深入分析。

效能面板更新

這次更新對「效能」面板進行了幾項改良。

加強型網路軌

「效能」面板中的「網路」軌跡已獲得強化，可預先顯示重要資訊，例如更詳細的時間長度和網路發起者樹狀結構，並更清楚地呈現視覺提示和顏色。因此，您不必再切換「網路」面板和「效能」>「摘要」分頁。此外，如果仍需切換至「網路」面板，我們也簡化了操作流程，讓您更快完成切換。

「網路」軌現在會執行下列操作：

  • 顯示要求類型的顏色圖例。
  • 右上角會顯示紅色三角形，標示會阻礙算繪的要求。
  • 選取箭頭後，系統會顯示要求發起人。這有助於瞭解網路發起者的樹狀結構，這項資訊先前僅在「Network」面板中提供。
  • 現在只要將滑鼠懸停在時間軸上，重新設計的說明工具提示就會顯示結構化時間資訊，包括阻礙算繪的狀態和優先順序變化 (如有)。
  • 「摘要」分頁現在也會在右側的欄中顯示時間細目。

「摘要」分頁中顯示的強化版網路軌跡，包含顏色圖例、工具提示、阻礙算繪指標和時間。

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

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

使用可擴充性 API 自訂成效資料

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

如需自訂軌的範例，請參閱這個示範頁面。在「成效」 >「擷取設定」中，開啟「擴充功能資料」。開始記錄效能，在示範頁面上按一下「Add new Corgi」，然後停止記錄。您會在「摘要」分頁中看到自訂軌跡，其中包含附有自訂工具提示和詳細資料的事件。

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

簡而言之，如要擴充成效資料，請將特定結構傳遞至 performance.measure() 或 performance.mark() API 呼叫的 measureOption.detail 或 markOption.detail 參數。

「時間碼」軌包含的詳細資料

如果您是網頁開發人員，使用 Performance API 的 User Timing 部分將項目新增至「時間軸」軌，現在可以在 mark 和 measure 事件的「摘要」分頁中，查看任意詳細資料和時間戳記。

時間軸中的自訂事件，包含時間戳記和詳細資料。

Chromium 問題：345418915。

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

現在，您可以在「網路」面板中套用篩選器，只複製列出的要求，不必複製整個網路記錄。

複製選項僅適用於列出的要求。

使用具名 HTML 標記，更快取得堆積快照，減少雜亂

記憶體面板中的堆積快照速度更快，現在會依具名 HTML 標記將物件分組、顯示較少的內部物件，更符合 JavaScript 語言語意，且一律會納入數值。

依具名 HTML 標記分組的物件。

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

如要手動將內部物件納入快照，請先開啟 設定 >「實驗」 > 勾選「Show option to expose internals in heap snapshots」(顯示在堆積快照中公開內部項目的選項) ，然後在「記憶體」面板中勾選「Expose internals (...)」(公開內部項目) 。

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。

其他亮點

這個版本的重要修正和改良項目包括：

  • 成效：
    • 網路軌跡：新增 WebSocket 連線事件 331351979。
    • 「效能」面板現在可正確地放大最忙碌的主要執行緒活動 345599356。
    • 修正上傳錯誤追蹤記錄檔案類型的錯誤，現在系統會禁止上傳任何類型，只允許上傳正確的 .json 或 .gz 349864878。
  • 「元素」 >「樣式」：
    • 長度屬性值中的單位下拉式選單已淘汰 41495618。
    • 修正巢狀 @ 規則的有效屬性解析問題 346732737。
    • 無效的 @position-try 部分現在會顯示為灰色 40246493。
  • 應用程式：
    • Cookie：修正點選「重新整理」時不會重新整理 Cookie 的錯誤 348683488。
    • 本機儲存空間：現在可以依字母順序排序鍵 341129585。

下載預覽版頻道

建議使用 Chrome Canary、開發人員版或 Beta 版做為預設開發瀏覽器。透過這些搶先體驗管道，您可以存取最新的開發人員工具功能、測試最先進的網頁平台 API，並在使用者發現問題前找出網站上的問題！

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

如要討論開發人員工具的新功能、更新或其他相關事項，請使用下列選項。

開發人員工具新功能

「開發人員工具新功能」系列涵蓋的所有主題清單。