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

Sofia Emelianova
Sofia Emelianova
GitHub

Gemini 的控制台深入分析功能目前已在多數歐洲國家/地區推出

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

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

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

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

Gemini 針對控制台中發生錯誤的深入分析資訊。

效能面板更新

本次更新針對「效能」面板提供幾項改善。

強化網路追蹤

強化了「效能」面板中的「網路」測試群組，可提前顯示重要資訊 (例如更詳細的時間長度和網路啟動器樹狀結構)，並更清楚地呈現視覺提示和顏色。因此，您不必在「網路」面板和「效能」之間切換。「Summary」分頁。此外，如果您仍需切換到「網路」面板，我們能為您簡化相關作業程序，讓您輕鬆省力。

網路追蹤現在會執行下列操作：

  • 顯示要求類型的色彩圖例。
  • 在右上角以紅色三角形標示阻擋轉譯要求。
  • 使用者選取時，以箭頭顯示要求發起者。這可協助您瞭解先前只能在「網路」面板中使用的網路發起者樹狀結構。
  • 遊標懸停時，已修改的工具提示會顯示結構化時間資訊，包括禁止轉譯狀態和優先順序變更 (如果有的話)。
  • 「摘要」分頁現在也會在右側欄中顯示時間細目。

強化版網路追蹤，包含顏色圖例、工具提示、轉譯封鎖指標和「摘要」分頁中的時間。

此外，您現在也可以在「摘要」分頁或曲目中的要求或其網址上按一下滑鼠右鍵，然後從下拉式選單中選取「在網路面板中顯示」。開發人員工具會前往「網路」面板，並在表格中標示出所需要求。

透過「在網路面板中顯示」要求的右鍵選單如果有需要 SQL 指令的分析工作負載 則 BigQuery 可能是最佳選擇

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

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

如要查看自訂測試群組的範例，請參閱這個示範頁面。在「成效」中 >擷取設定，開啟 check_box 和「擴充功能資料」設定。開始錄製表演，點選示範頁面上的「新增 Corgi」，然後停止錄製。追蹤記錄中會顯示自訂測試群組，其中包含含有自訂工具提示的事件，以及「摘要」分頁中的詳細資料。

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

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

「時間」測試群組的詳細資料

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

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

Chromium 問題：345418915。

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

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

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

更快速的堆積快照搭配已命名的 HTML 標記，減少雜亂內容

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

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

調整 check_box「在擷取時納入數值」設定的效能已完成調整、預設為啟用，並從「記憶體」面板移除。

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

Chromium 問題：41490040、343341610、42203857。

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

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

  • 開啟面板時擷取當前播放的動畫，因此您不必重新整理頁面即可擷取動畫。
  • 支援「@keyframes」即時編輯功能，也就是說，當您在「元素」中編輯 @keyframes 區段時，會一併更新擷取的動畫 >「樣式」。

如要查看這兩項功能的實際使用狀況，請觀看下方影片。

Chromium 問題：352718055。

Lighthouse 12.1.0

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

本次更新帶來多項異動，包括移除舊的首次有效繪製 (FMP) 指標，並改用 Largest Contentful Paint (LCP)。查看完整異動清單。

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

Chromium 問題：772558。

無障礙設定

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

  • 在即時運算式的編輯欄位中自動完成建議後按下 Tab 鍵，可將焦點移到下一個焦點點。在過去，這會為文字增加縮排。
  • 按一下大小調整工具會將焦點移至該項目，因此您可以使用向右和向左方向鍵移動。
  • 使用鍵盤瀏覽時，螢幕閱讀器現在會明確朗讀「來源」和「刪除觀察運算式」中的「新增觀察運算式」編輯欄位。

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

其他精選內容

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

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

下載預覽頻道

建議您使用 Chrome Canary、Dev 或 Beta 版做為預設的開發瀏覽器。透過這些預覽版本，您可以存取開發人員工具中的最新功能、測試最先進的網路平台 API，以及找出網站的問題，以免使用者發現問題。

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

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

  • 歡迎透過 crbug.com 提出建議或意見。
  • 使用「更多選項」更多 > 回報開發人員工具問題說明 >在開發人員工具中回報開發人員工具問題。
  • 前往 @ChromeDevTools 張貼 Tweet。
  • 歡迎在「開發人員工具」推出「最新消息」YouTube 影片或「開發人員工具秘訣」YouTube 影片留言。

開發人員工具新功能

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