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

Sofia Emelianova
Sofia Emelianova
GitHub

新的自動填入面板

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

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

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

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

自動填入面板。

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

WebRTC 的加強型網路節流

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

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

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

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

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

Chromium 問題：41175925。

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

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

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

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

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

改善「Elements」>「Styles」中的 CSS 巢狀結構支援

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

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

Chromium 問題：40166888。

強化效能面板

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

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

依序點選「效能」 >「主要」，即可隱藏不相關的函式及其子項，避免火焰圖的雜訊。在火焰圖中的函式上按一下滑鼠右鍵，然後從內容選單中選擇所需選項。

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

含有隱藏子項的函式的右側會顯示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 取樣的效能追蹤記錄。

產生「Lighthouse」報表後，您只要前往 more_vert [工具] 選單 > [查看未節流的追蹤記錄]，即可找到這些追蹤記錄。

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

Chromium 問題：772558。

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

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

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

Chromium 問題：41490331。

應用程式 > 儲存空間更新

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

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

「Application」 >「Storage」 >「Shared storage」部分現在會顯示來源使用的位元組數。

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

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

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/Cmd + F (1523279) 進行搜尋時，系統會醒目顯示所有相符的搜尋結果。
  • 開發人員資源：現在也會顯示透過語言擴充功能載入的資源，例如 C/C++ 開發人員工具支援 (DWARF) Chrome 擴充功能 (40746829)。
  • 效能：修正「Summary」分頁中裁剪的呼叫堆疊和版面配置不佳的問題 (325314708)。
  • 導覽匣：關閉按鈕現在可以聚焦，因此可以使用鍵盤關閉面板。

下載預覽頻道

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

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

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

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

開發人員工具新功能

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

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 指南

Chrome 110

Chrome 指南

Chrome 108

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Google 瀏覽器 93

Chrome 92 版

Chrome 91

Chrome 90

Google Chrome 89

Google Chrome 88

Chrome 87

Chrome 86 版

Chrome 85 版

Google Chrome 84

Chrome 83 版

Chrome 82 版

Chrome 82 已取消。

Chrome 81 版

Google Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72 版

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63 版

Chrome 62 版

Chrome 61 版

Chrome 60 版

Chrome 59