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

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

支援 WebAssembly 偵錯功能

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

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

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

Debugger 中的 Wasm 應用程式已暫停。

如要測試 Wasm 偵錯，請安裝 C/C++ 開發人員工具支援 (DWARF) 擴充功能，然後逐步查看 Mandelbrot 示範中的程式碼。

Chromium 問題：1414289。

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

跳過。現在，請在原始程式碼中逐步完成，避免在拆解 (.wasm 檔案) 中暫停。先前這樣做會暫停該窗格，

不過，行走的終點會在其最初使用的函式之外 (例如從函式傳回之後) 結束。

這項行為預設為啟用，請前往 。 設定 >偏好設定 >來源。

新的設定位於「偏好設定」和「來源」中

Chromium 問題：1418938。

使用「元素」面板和「問題」分頁對自動填入功能進行偵錯

Chrome 自動填入功能可利用您儲存的資訊 (例如地址或付款資訊) 自動填寫表單。為方便您對自動填入相關問題進行偵錯，「元素」面板現在可用紅色底線標示問題。

如要查看這項功能，請啟用「。」設定 >實驗 >核取方塊。 在「元素」面板 DOM 樹狀結構中醒目顯示違規的節點或屬性，並檢查這個示範頁面。

自動填入問題會在「元素」面板中醒目顯示，並由「問題」面板回報。

將滑鼠遊標懸停在 DOM 樹狀結構中醒目顯示的問題上，然後按一下「查看問題」，即可開啟「問題」分頁。該分頁會列出所有偵測到的問題，並提供發生錯誤的線索。

Chromium 問題：1399414。

錄音工具的斷言

「錄音工具」面板現在可讓您在錄製期間直接新增斷言，並提供所有執行階段資料。

如要新增斷言，請開始建立新的記錄、與頁面互動，然後按一下「新增斷言」。錄音工具會插入 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.mark() 方法現在會在滑鼠遊標懸停在「效能」>對應的標記上時顯示時間時機：這裡的時間是與上一個導覽事件相關的時間戳記。

彈出式視窗，顯示遊標懸停在「計時」專區的時間。

Chromium 問題：1426762。

profile() 指令會填入效能 >主要

Console 中的 profile() 和 profileEnd() 指令現在會在「Performance」面板的「Main」執行緒中啟動及停止 CPU 剖析作業。

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

Chromium 問題：1429191。

使用者互動速度緩慢的警告

針對超過 200 毫秒的使用者互動，在「成效」中會顯示「與下一個顯示的內容互動 (INP)」警告訊息 >「摘要」分頁標籤。

INP 警告。

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

Chromium 問題：1432512、1432509。

Web Vitals 測試群組已移至其他位置

「Performance」面板已移除下列測試群組：

  • 「網站體驗指標」追蹤。而會直接將遊標懸停在「時機」軌跡中，查看相關時間。
  • 「Long Tasks」(長時間工作) 子軌道。您可以在主要音軌陰影紅色和紅色三角形中找到此類工作。

Web Vitals 和 Long Tasks 追蹤的資訊都含有重複出現在其他位置的資訊。與功能更完整的替代方法相比，他們的廣告無法互動，點選時顯示詳細資訊。

將 Web Vitals 移至 Timings 測試群組的前後。

此外，「Experiences」測試群組已重新命名為「Layout Shifts」，可更準確地反映其使用情形。

進一步瞭解網站體驗指標。

JavaScript 分析器淘汰：第 3 階段

自 Chrome 58 起，開發人員工具團隊計劃最終淘汰 JavaScript Profiler，讓 Node.js 和 Deno 開發人員使用「Performance」面板來分析 JavaScript CPU 效能。

自四階段的 JavaScript 分析器淘汰，開發人員工具 114 版將展開三階段。在這個階段，JavaScript 分析器面板會從開發人員工具中移除，但您仍可透過。 設定 > 暫時啟用面板實驗，然後在三點圖示選單中開啟三點圖示選單。。

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

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

Chromium 問題：1428026。

其他精選內容

這個版本包含以下重大修正項目：

  • 顏色挑選器現在可偵測裁剪時「變形」的 HWB 值 (1429271)。
  • 「Sources」(來源) 面板：
  • 在控制台中，您可以使用 Ctrl + Ctrl 鍵評估不完整的 JavaScript 運算式，並輸出語法錯誤 (1314700)。
  • 「Breakpoint 編輯」對話方塊現在有「關閉」按鈕。先前您必須按下 Enter 鍵或取消聚焦對話方塊 (1412980)。

下載預覽頻道

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

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

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

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

開發人員工具新功能

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