What's 開發人員工具新功能 (Chrome 114)

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

WebAssembly 偵錯支援

開發人員工具會啟用 。「設定」 >「實驗」 > 核取方塊。「WebAssembly 偵錯：啟用 DWARF 支援」，預設為啟用。詳情請參閱「使用新式工具偵錯 WebAssembly」。

這項實驗可讓您暫停執行，並在 Wasm 應用程式中偵錯 C 和 C++ 程式碼，並提供所有偵錯資訊：

  • 使用 DWARF 偵錯資訊對應的原始原始碼。
  • 呼叫堆疊中可理解的函式名稱。
  • 中斷點支援功能等。

在偵錯工具中暫停的 Wasm 應用程式。

如要測試 Wasm 偵錯功能，請安裝 C/C++ DevTools 支援 (DWARF) 擴充功能，然後逐步執行 Mandelbrot 示範中的程式碼。

Chromium 問題：1414289。

改善 Wasm 應用程式中的逐步執行行為

跳過。 原始程式碼中的「Step over」現在會避免在反組合 (.wasm 檔案) 中暫停。先前會暫停。

不過，如果步驟停在函式開始執行的函式之外，例如從函式傳回後，步驟就會結束。

。 的「設定」 >「偏好設定」 >「來源」 中，預設會啟用這項行為。

新設定位於「偏好設定」>「來源」中。

Chromium 問題：1418938。

使用「Elements」面板和「Issues」分頁偵錯自動填入功能

Chrome 自動填入功能會利用已儲存的資訊 (例如地址或付款資訊) 自動填寫表單。為方便您輕鬆偵錯自動填入相關問題，元素面板現在可使用紅色捲曲底線標示這些問題。

如要查看這項功能，請依序前往「Settings」 >「Experiments」 >「核取方塊。」，即可在「Elements」面板的 DOM 樹狀結構中醒目顯示違規的節點或屬性，並檢查這個示範頁面。。

在「元素」面板中醒目顯示的自動填入問題，以及「問題」面板回報的問題。

將滑鼠游標懸停在 DOM 樹狀圖中醒目的問題上，然後按一下「View issue」，即可開啟「Issues」分頁，列出所有偵測到的問題，並提供錯誤原因的線索。

Chromium 問題：1399414。

錄音工具中的斷言

您現在可以在錄製期間透過「Recorder」面板新增斷言，並取得所有可用的執行階段資料。

如要新增斷言，請開始新的錄製作業、與網頁互動，然後按一下「新增斷言」。錄製器會插入使用 waitForElement 類型的步驟，您可以隨時自訂該步驟。觀看這部影片，瞭解斷言在咖啡點餐示範中的作用。

本影片將說明如何斷言：

  • HTML 屬性，例如元素的 class。
  • JSON 中的 JavaScript 屬性，例如 .innerText。

您也可以設定步驟來斷言，例如 JavaScript 中的條件陳述式、節點子項數量 (count)、元素顯示設定等等。詳情請參閱「設定步驟」。

此外，錄製器現在會在並排程式碼檢視畫面和滑鼠右鍵步驟選單中，記住您偏好的指令碼格式。

Chromium 問題：1423624。

Lighthouse 10.1.1

Lighthouse 面板現在會執行 Lighthouse 10.1.1，其中 10.1.0 有重大變更。所有處理網址的稽核作業現在都會依據實體和匯總數值統計資料 (例如大小或時間長度) 進行分組。熱門的第三方服務也會加上類別標記，方便您在網頁上識別其用途。

依實體分組的稽核項目。

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

Chromium 問題：772558。

效能強化

performance.mark() 會在「成效」>「時間」中，顯示滑鼠游標經過的時間

在「Performance」 >「Timings」中，當滑鼠游標懸停在對應的標記上時，performance.mark() 方法現在會顯示其時間。此處的時間是相對於先前導覽事件的時間戳記。

當滑鼠游標懸停在「Timings」部分時，會顯示含有時間資訊的彈出式視窗。

Chromium 問題：1426762。

profile() 指令會填入「Performance」>「Main」

控制台中的 profile() 和 profileEnd() 指令現在會在「效能」面板的「主」執行緒中啟動及停止 CPU 分析。

console() 指令會在「效能」面板中建立設定檔。

Chromium 問題：1429191。

針對使用者互動速度緩慢發出警告

如果使用者互動時間超過 200 毫秒，Performance > Summary 分頁中就會顯示「Interaction to Next Paint (INP)」警告。

INP 警告。

此外，互動 ID 已從工具提示移至「摘要」。

Chromium 問題：1432512、1432509。

Web Vitals 追蹤項目已移至

「成效」面板已移除下列追蹤：

  • 網站體驗指標追蹤。請改為將滑鼠游標懸停在「Timings」軌跡上，查看相關時間。
  • 長時間執行的工作子追蹤。您已可在主追蹤記錄中找到這類任務，這些任務會以紅色陰影和紅色三角形標示。

網站體驗和長時間工作追蹤記錄都包含其他地方重複的資訊。相較於功能更完整的替代方案，這些圖片在點選時不會提供互動功能，也無法提供更詳細的資訊。

將網站體驗核心指標移至時間追蹤前後。

此外，我們也將「體驗」追蹤記錄重新命名為「版面配置位移」，更準確地反映其用途。

進一步瞭解 網站使用體驗核心指標。

JavaScript 分析器淘汰：第三階段

早在 Chrome 58 時，開發人員工具團隊就已計劃最終淘汰 JavaScript 分析工具，並讓 Node.js 和 Deno 開發人員使用「效能」面板來剖析 JavaScript CPU 效能。

開發人員工具 114 版開始實施 四階段 JavaScript 分析器 淘汰第三階段。在此階段，DevTools 會移除「JavaScript Profiler」面板，但您仍可透過 。「設定」 >「實驗」 暫時啟用該面板，並透過 三點圖示選單。 三點圖示選單開啟。

在「設定」和「實驗」中勾選「JavaScript 分析器」核取方塊。

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

Chromium 問題：1428026。

其他精選內容

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

下載預覽管道

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

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

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

開發人員工具的新功能

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