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

Sofia Emelianova
Sofia Emelianova
GitHub

新的自動填入面板

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

在這個示範頁面中試用包含測試資料的新面板：

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

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

自動填入面板。

詳情請參閱瞭解表單和自動填入功能。

WebRTC 的加強型網路節流

我們為自訂網路節流設定檔新增了封包相關參數，您現在可以直接在開發人員工具中調節 WebRTC 應用程式。如要測試即時通訊的實作成果，建議使用第三方軟體。

新的參數包括：Packet Loss (百分比)、封包佇列長度 (封包數) 和 check_box 封包重新排序標記。

將封包相關選項新增至自訂調節設定檔的前後差異。

如要限制 WebRTC 連線，請依序前往「設定」>「設定」> 在自訂設定檔中指定封包相關參數「Throting」，然後在「Network」面板中選取該選項。

在這個示範頁面上試用新參數。首先，請允許網頁使用攝影機。接著，在「網路」面板中選取您設定的自訂設定檔，然後返回頁面點選「開始」和「通話」。

Chromium 問題：41175925。

動畫面板中支援捲動式動畫

「動畫」面板現在可讓您檢查捲動導向的動畫。

歡迎在這個示範頁面上試用這項功能。開啟「Animations」面板並重新載入頁面，即可擷取捲動導向的動畫。

一組以滑鼠圖示標示的捲動導向動畫。

「總覽」中會顯示標有滑鼠圖示的動畫群組。您現在可以檢查程式碼了。這個群組會在時間軸中顯示像素值，而非毫秒數。

改善 Elements 中的 CSS 巢狀結構支援 >風格

元素 >「Styles」分頁改善了 CSS 巢狀結構支援，現在使用縮排和大括號來顯示巢狀樣式。CSS 巢狀結構可用於將 CSS 規則分組，讓內容更加精簡和結構化。

新增縮排和用大括號括住的巢狀樣式。

Chromium 問題：40166888。

強化效能面板

這個版本為「Performance」(效能) 面板進行了幾項改善。

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

如何在「效能」中濾除火焰圖的雜訊 >Main 應用程式現在可以隱藏不相關的函式及其子項。在火焰圖中的函式上按一下滑鼠右鍵，然後從內容選單中選擇所需選項。

新增內容選單的前後對照圖，可用於隱藏函式及其子項。

含有隱藏子項的函式的右側會顯示arrow_drop_down 下拉式選單按鈕。將滑鼠遊標懸停在圖示上，即可查看已隱藏的子項數量，按一下該圖示即可再次顯示這些子項。如要返回火焰圖的初始狀態，請在函式上按一下滑鼠右鍵，然後選取「重設追蹤記錄」。

所選發起人和啟動事件的箭頭

以往，如果您在「主要」測試群組中選取事件並提交事件，該軌跡會顯示一個箭頭，從發起人前往指定事件。現在，軌跡也會顯示從所選事件到啟動事件的箭頭 (如果有的話)。

前後對照圖則會顯示從所選事件和具名連結之間的箭頭，而非顯示連結。

此外，所有發起人現在的「摘要」分頁中含有「發起者」欄位，而「發起人」和「發起者」欄位都有命名連結，而非「顯示」欄位。

Chromium 問題：325604258、325024819、326055289。

Lighthouse 11.6.0

Lighthouse 面板現在會執行 Lighthouse 11.6.0 面板。查看完整異動清單。

值得注意的變更是新的選用check_box_outline_blank「啟用 JS 取樣」設定。這項設定預設為停用。

加入選擇接受 JS 取樣設定前後的期間。

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

沒有 (左側) 和 (右側) JS 取樣的效能追蹤記錄。

如要查看追蹤記錄，請依序點選 more_vert > [Tools] (工具) 選單 >。產生「Lighthouse」報表後，查看未節流的追蹤記錄。

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

Chromium 問題：772558。

記憶體中特殊類別的工具提示堆積快照

「記憶體」面板中的堆積快照含有並非以建構函式為基礎的特殊物件群組。將滑鼠遊標懸停在這類物件上，「Memory」面板現在會顯示工具提示，其中包含簡短說明和說明文件中較長說明的連結。

之前和之後皆針對特殊物件群組提供描述性的工具提示。

Chromium 問題：41490331。

應用程式 >儲存空間更新

這個版本為「應用程式」> 進行一些更新。儲存空間：

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

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

之前和之後顯示共用儲存空間的位元組數。

共用儲存空間具備無限的跨網站儲存空間寫入權限，並具備保護隱私權的讀取權限。

Chromium 問題：324464353。

Web SQL 已完全淘汰

自 119 版Chrome 淘汰的 Web SQL，並移除這個版本中的淘汰試用權杖，您就無法再使用 Web SQL。

在下列情況下，開發人員工具已從「Application」面板移除「Web SQL」部分。

Chromium 問題：327254049。

強化涵蓋率面板

這個版本為「Coverage」面板進行以下幾項更新：

  • 狀態列現在會正確計算篩選後網址的使用統計資料。先前，您不必加總符合篩選器的子項使用資料，而是加總父項資料。

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

  • 為增加顯示效果，已使用的程式碼現在顯示為灰色而非綠色 無綠色彩視覺障礙。

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

Chromium 問題：41494198、329253687。

「圖層」面板可能已淘汰

「Layers」面板使用率偏低，可能很快就會淘汰。面板現在會在頂端顯示警告橫幅。

這個警告橫幅會在「圖層」面板頂端指出可能淘汰的功能。

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

JavaScript 分析器淘汰：第 4 階段 (最終版)

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

如要剖析 CPU 效能，請使用「Performance」(效能) 面板。

Chromium 問題：40262073。

其他精選內容

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

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

下載預覽頻道

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

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

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

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

開發人員工具新功能

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