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

Sofia Emelianova
Sofia Emelianova

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

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

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

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

Web VitalsLong 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 CanaryDevBeta 版做為預設的開發瀏覽器。透過這些預覽版本,您可以存取開發人員工具中的最新功能、測試最先進的網路平台 API,以及找出網站的問題,以免使用者發現問題。

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

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

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

開發人員工具新功能

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