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

Sofia Emelianova
Sofia Emelianova
GitHub

新增自動填入面板

這個版本會將新的「自動填入」面板導入開發人員工具。Chrome 自動填入功能可讓您透過已儲存的地址輕鬆自動填入網站上的表單。新的「自動填入」面板可讓您檢查表單欄位、預測自動填入值和已儲存資料之間的對應關係。

您可以在這個示範頁面上試用含有測試資料的新面板：

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

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

自動填入面板。

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

增強型 WebRTC 的網路節流功能

隨著自訂網路節流設定檔新增了封包相關參數，您現在可以直接在開發人員工具中調節 WebRTC 應用程式。這有助於測試即時通訊實作，無需使用第三方軟體。

新的參數包括：Packet Loss (百分比)、Packet Queue Length (封包數)，以及 check_box Packet Reordering 旗標。

將封包相關選項新增至自訂節流設定檔前後的前後對照資料。

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

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

Chromium 問題：41175925。

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

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

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

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

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

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

「Elements」(元素) >「Styles」(樣式) 分頁能夠改善 CSS 巢狀支援，現在則會顯示縮排和大括號的巢狀樣式。CSS 巢狀結構可將 CSS 規則分組，讓內容更詳細、架構更井然有序。

前後在括號中增加縮排和包圍巢狀樣式。

Chromium 問題：40166888。

「強化成效」面板

這個版本改進了「效能」面板。

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

在「Performance」 >「Main」即可過濾火焰圖中的雜訊，您現在可以隱藏不相關的函式和子項。在火焰圖中，在函式上按一下滑鼠右鍵，然後從內容選單中選擇選項。

新增前後的內容選單，可讓您隱藏函式及其子項。

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

從所選發起者到他們發起事件的箭頭

先前在「Main」(主) 測試群組中選取事件並發生事件時，賽道會顯示發起人前往所選事件的箭頭，現在，歷程也會顯示從所選事件到起始事件的箭頭 (如果有的話)。

顯示前後的箭頭，分別以箭頭、啟動事件及已命名連結的形式顯示，而不是「顯示」。

此外，所有發起人現在的「Summary」(摘要) 分頁中都有「Initiator for」欄位，而「Initiator for」和「Initiated by」欄位也都會有具名連結，而非「提示」。

Chromium 問題：325604258、325024819、326055289。

Lighthouse 11.6.0 版本

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

其中一個值得注意的是，新的選用功能 check_box_outline_blank 啟用 JS 取樣設定。這項設定預設為停用。

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

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

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

如要取得追蹤記錄，請在產生 Lighthouse 報表後，依序點選 more_vert「Tools」選單 >「View Unthrottled Trace」。

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

Chromium 問題：772558。

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

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

前後動顯示特殊物件群組的描述性工具提示。

Chromium 問題：41490331。

應用程式 > 儲存空間更新

這個版本將對「Application」(應用程式) >「Storage」(儲存空間) 提供一些更新。

共用儲存空間的位元組數

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

顯示共用儲存空間使用量的前後對照。

共用儲存空間提供無限量的跨網站儲存空間寫入權限，讓您具備可保護隱私權的讀取權限。

Chromium 問題：324464353。

Web SQL 已完全淘汰

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

最後，開發人員工具將「Applications」面板中的「Web SQL」部分移除。

Chromium 問題：327254049。

改善涵蓋率面板

這個版本為「涵蓋範圍」面板新增了幾項更新：

  • 狀態列現在可正確計算已篩選網址的使用統計資料。過去，狀態列不會加總符合篩選條件的子項使用資料，而是將父項的資料相加。

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

  • 所用程式碼的顏色現在是灰色而非綠色，以提高可視性，特別是在不綠色色彩視覺障礙的情況下。

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

Chromium 問題：41494198、329253687。

「圖層」面板可能已淘汰

「圖層」面板使用率偏低，可能即將淘汰。面板現在會在頂端顯示警告橫幅。

「圖層」面板頂端的警告橫幅，宣布我們即將淘汰。

歡迎在團隊成員最終決定淘汰面板前，歡迎分享自己的想法和疑慮。

JavaScript 分析器淘汰：第 4 階段 (最後一次)

這個版本的「JS 分析器」面板已完全淘汰，且無法重新啟用。

如要分析 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 版、開發人員版或 Beta 版做為預設開發瀏覽器。這些預覽管道可讓您存取開發人員工具的最新功能、測試最先進的網路平台 API，並在使用者使用之前就在網站上發現問題！

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

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

  • 請透過 crbug.com 提交建議或意見回饋。
  • 如要回報開發人員工具的問題，請在開發人員工具中依序點選「更多選項」圖示 更多   >「說明」 >「回報開發人員工具的問題」。
  • 在 @ChromeDevTools 張貼推文。
  • 歡迎對開發人員工具的 YouTube 影片或開發人員工具秘訣 (YouTube 影片) 提供意見。

開發人員工具新功能

「開發人員工具的新功能」系列文章已涵蓋所有功能。

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 111

Chrome 110 版本

Chrome 109 版

Chrome 108 版

Chrome 107 版

Chrome 106 版

Chrome 105

Chrome 104 版

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 99

Chrome 98 版

Chrome 97

Chrome 96

Chrome 95

Chrome 94 版

Chrome 93 版

Chrome 92 版

Chrome 91 版

Chrome 90

Chrome 89

Chrome 88 版

Chrome 87

Chrome 86

Chrome 85 版

Chrome 84 版

Chrome 83 版

Chrome 82 版

Chrome 82 已取消。

Chrome 81 版

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