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

Sofia Emelianova
Sofia Emelianova

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

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 新功能系列文章中涵蓋的所有內容清單。