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

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

支援 WebAssembly 偵錯功能

根據預設，開發人員工具會啟用 [設定]。「設定」 >「實驗」 >「WebAssembly Debugging：啟用 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 + Enter 鍵評估不完整的 JavaScript 運算式，並輸出語法錯誤 (1314700)。
  • 「Breakpoint 編輯」對話方塊現在有「關閉」按鈕。先前您必須按下 Enter 鍵或取消聚焦對話方塊 (1412980)。

下載預覽頻道

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

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

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

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

開發人員工具新功能

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

Chrome 127

Chrome 126

Chrome 125

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 指南

Chrome 110

Chrome 指南

Chrome 108

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Google 瀏覽器 93

Chrome 92 版

Chrome 91

Chrome 90

Google Chrome 89

Google Chrome 88

Chrome 87

Chrome 86 版

Chrome 85 版

Google Chrome 84

Chrome 83 版

Chrome 82 版

Chrome 82 已取消。

Chrome 81 版

Google 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