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

Sofia Emelianova
Sofia Emelianova

新的自動填入面板

這個版本會在開發人員工具中提供新的「自動填入」面板。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 問題:325604258325024819326055289

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 問題:41494198329253687

「圖層」面板可能已淘汰

「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 CanaryDevBeta 版做為預設的開發瀏覽器。透過這些預覽版本,您可以存取開發人員工具中的最新功能、測試最先進的網路平台 API,以及找出網站的問題,以免使用者發現問題。

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

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

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

開發人員工具新功能

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