開發人員工具、Chrome 124 的新功能'

Sofia Emelianova
Sofia Emelianova
GitHub

新的自動填入面板

這個版本會在開發人員工具中新增「自動填入」面板。Chrome 自動填入功能可讓你在網站上自動填寫已儲存的地址，您可以使用新的「自動填入」面板，檢查表單欄位、預測的自動填入值和已儲存資料之間的對應關係。

請在這個示範頁面上試用新版面板，並使用測試資料：

  1. 在「個人資料自動填入」中，按一下任何「填寫表單...」按鈕，然後點選「提交」，接著在「儲存地址嗎？」對話方塊中按一下「儲存」，然後返回含有表單的頁面。
  2. 開啟 DevTools 並觸發自動填入事件：選取表單欄位，然後從下拉式清單中選擇地址。

系統會自動開啟「自動填入」面板，並顯示偵測到的表單欄位、自動填入功能推斷的欄位，以及已儲存的值。

自動填入面板。

詳情請參閱「瞭解表單」和「自動填入」相關說明。

強化 WebRTC 的網路節流

自訂網路節流設定檔現在新增了封包相關參數，因此您現在可以在 DevTools 中直接節流 WebRTC 應用程式。這項功能可用於測試即時通訊功能的實作方式，無須使用第三方軟體。

新參數包括：Packet Loss (百分比)、Packet Queue Length (封包數量) 和 Packet Reordering 標記。

在自訂節流設定檔中新增封包相關選項前後的比較。

如要限制 WebRTC 連線，請在「設定」 >「限制」中，在自訂設定檔中指定封包相關參數，然後在「網路」面板中選取該設定檔。

請試試這個示範頁面中的新參數。首先，請允許網頁使用相機。接著，在「Network」面板中選取您設定的自訂設定檔，然後返回頁面，按一下「Start」和「Call」。

Chromium 問題：41175925。

動畫面板支援捲動驅動動畫

您現在可以透過「動畫」面板檢查捲動驅動動畫。

歡迎前往這個示範頁面試用這項功能。開啟「動畫」面板並重新載入網頁，即可擷取捲動驅動的動畫。

一組以捲動為動畫驅動的動畫，標有滑鼠圖示。

動畫群組會在「總覽」中顯示，並標示為圖示。您現在可以檢查。群組會在時間軸中顯示像素值，而非毫秒。

改善「元素」>「樣式」中的 CSS 巢狀結構支援功能

「Elements」 >「Styles」分頁已改善 CSS 巢狀結構支援功能，現在會以縮排和大括號顯示巢狀樣式。CSS 巢狀結構是一種將 CSS 規則分組的方法，可減少冗長的內容，並使內容更有條理。

在新增縮排和以大括號包住巢狀樣式的前後。

Chromium 問題：40166888。

「強化效能」面板

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

在火焰圖中隱藏函式及其子項

如要篩除「Performance」 >「Main」中的火焰圖雜訊，您現在可以隱藏不相關的函式及其子項。在火焰圖中，按一下函式右鍵，然後從內容選單中選擇選項。

新增可隱藏函式及其子項的內容功能表前後的畫面。

含有隱藏子項的函式會在右側顯示「下拉式選單」 按鈕。將滑鼠游標懸停在該圖示上，即可查看隱藏子項的數量，並點選該圖示重新顯示。如要還原火焰圖的初始狀態，請在函式上按一下滑鼠右鍵，然後選取「重設追蹤」。

從所選啟動事件到啟動事件的箭頭

先前，當您在「Main」軌道中選取事件時，軌道會顯示從發起者到所選事件的箭頭。追蹤記錄現在也會顯示從所選事件到啟動事件 (如果有) 的箭頭。

在「前」和「後」之間顯示箭頭，從所選事件變成已啟動的事件，並以命名的連結取代「揭露」。

此外，所有啟動者現在在「摘要」分頁中都有「啟動者」欄位，而「啟動者」和「啟動者」欄位都會顯示已命名的連結，而非「顯示」。

Chromium 問題：325604258、325024819、326055289。

Lighthouse 11.6.0

Lighthouse 面板現在執行 Lighthouse 11.6.0。請參閱完整變更清單。

其中值得注意的變更包括新的「啟用 JS 取樣」設定，您可以選擇啟用這項設定。這項設定預設為停用。

新增選擇加入的 JS 取樣設定前後。

啟用 JS 取樣功能會在效能追蹤中加入詳細的 JavaScript 呼叫堆疊，但可能會減慢報表產生速度。

未啟用 (左) 和已啟用 (右) JS 取樣的效能追蹤記錄。

產生 Lighthouse 報表後，您可以在「 工具選單」 >「查看未受限速的追蹤記錄」下方找到追蹤記錄。

如要瞭解在開發人員工具中使用 Lighthouse 面板的基本知識，請參閱「Lighthouse：改善網站速度」。

Chromium 問題：772558。

「Memory」>「Heap 快照」中的特殊類別工具提示

「Memory」面板中的堆積快照具有非建構函式所建立的特殊物件群組。當您將滑鼠游標懸停在這些物件上時，「Memory」面板現在會顯示工具提示，其中包含簡短說明和說明文件中更詳細說明的連結。

顯示特殊物件群組說明工具提示的「前」與「後」。

Chromium 問題：41490331。

應用程式 > 儲存空間更新

這個版本為「應用程式」 >「儲存空間」帶來幾項更新。

共用儲存空間使用的位元組數

「應用程式」 >「儲存空間」 >「共用儲存空間」部分現在會顯示來源使用的位元組數。

前後比較圖顯示共用儲存空間的位元組用量。

共用儲存空間可讓您取得無限的跨網站儲存空間寫入存取權，並保留隱私權的讀取存取權。

Chromium 問題：324464353。

Web SQL 已完全淘汰

Chrome 在 119 版淘汰 WebSQL，並在該版本中移除淘汰試用權杖，因此您無法再使用 WebSQL。

因此，開發人員工具已從「Application」面板中移除「Web SQL」部分。

Chromium 問題：327254049。

涵蓋率面板改善項目

這個版本對「涵蓋率」面板進行了幾項更新：

  • 狀態列現在會正確計算篩除的網址使用統計資料。先前，系統會加總符合篩選條件的兒童使用資料，而非加總其父母的資料。

正確計算相符子項統計資料前後的差異。

  • 已使用的程式碼顏色現在改為灰色，而非綠色，以便提升可視度，特別是針對色盲人士。

將已使用程式碼的顏色變更為灰色前後的比較。

Chromium 問題：41494198、329253687。

「圖層」面板可能會淘汰

由於使用率偏低，圖層面板可能很快就會淘汰。面板現在會在頂端顯示警告橫幅。

在「Layers」面板頂端顯示的警告橫幅，宣布可能淘汰的功能。

在團隊做出最終決定淘汰面板前，歡迎分享您的想法和疑慮。

JavaScript 分析器淘汰：第四階段，最終階段

在這個版本中，JS Profiler 面板已完全淘汰，無法再重新啟用。

如要分析 CPU 效能，請使用「效能」面板。

Chromium 問題：40262073。

其他精選內容

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

  • 網路：
    • 修正了錯誤，即剖析多行 Cookie 時發生錯誤 (325410304)。
    • 修正「Initiator」欄中的呼叫堆疊預覽畫面 (327665602)。
  • Performance Monitor：追蹤核取方塊現在與其他 UI 相同 (1467464)。
  • 來源：新增 XHTML 文件的語法醒目顯示功能 (327940244)。
  • 設定 > 裝置：舊款 Galaxy Fold 已替換為新款 Galaxy Z Fold 5 (40113439)。
  • 效能：現在使用 Ctrl/Cmd + F 鍵搜尋時，系統會醒目顯示所有符合的搜尋結果 (1523279)。
  • 開發人員資源：現在也會顯示透過語言擴充功能載入的資源，例如 C/C++ 開發人員工具支援 (DWARF) Chrome 擴充功能 (40746829)。
  • 效能：修正「摘要」分頁中裁剪的呼叫堆疊和不良版面配置 (325314708)。
  • Drawer： Close 按鈕現在可供聚焦，因此可使用鍵盤關閉面板。

下載預覽管道

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

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

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

開發人員工具的新功能

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