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

Jecelyn Yeen

在錄音工具中逐步重播

現在您可以在「記錄器」面板中設定中斷點，並逐步重播使用者流程。

如要設定中斷點，請按一下步驟旁邊的藍點。重播使用者流程，重播會在執行步驟前暫停。你可以繼續重播、執行步驟或取消重播。

這項功能可讓您輕鬆全面查看及偵錯使用者流程。

詳情請參閱「錄音機功能參考資料」。

Chromium 問題：1257499

在「記錄器」面板中支援滑鼠懸停事件

錄音工具現在支援在錄製過程中手動新增滑鼠懸停步驟。

這個示範會在滑鼠懸停時顯示彈出式選單。嘗試記錄使用者流程，然後點選選單項目。

如果您現在重播使用者流程，系統會因為 Recorder 不會在錄製期間自動擷取滑鼠懸停事件而失敗。如要解決這個問題，請手動新增步驟，在點選選單項目之前，將游標懸停在選取器上。

Chromium 問題：1257499

效能深入分析面板中的最大內容繪製 (LCP)

LCP 是評估使用者感知載入速度的重要指標。現在您可以找出最大內容繪製 (LCP) 的重要路徑和根本原因。

在成效記錄中，按一下「時間軸」中的 LCP 徽章。在「詳細資料」窗格中，您可以查看 LCP 分數、瞭解如何修正會拖慢 LCP 的資源，以及查看 LCP 資源的關鍵路徑。

請參閱「效能洞察」一文，瞭解如何透過面板取得可做為行動依據的洞察資料，並提升網站效能。

Chromium 問題：1326481

找出文字閃爍 (FOIT、FOUT) 的情況，這可能是版面配置位移的根本原因

「效能洞察」面板現在會偵測無形文字閃爍 (FOIT) 和未設定樣式的文字閃爍 (FOUT)，做為版面配置位移的潛在根本原因。

如要查看版面配置位移的潛在根本原因，請按一下「版面配置位移」軌中的螢幕截圖。

如要瞭解如何避免版面配置位移，請參閱「最佳化 WebFont 的載入和算繪作業」。

Chromium 問題：1334628、1328873

資訊清單窗格中的通訊協定處理常式

您現在可以使用開發人員工具，測試漸進式網頁應用程式 (PWA) 的網址通訊協定處理常式註冊。

註冊網址通訊協定處理常式後，已安裝的 PWA 就能處理使用特定通訊協定的連結 (例如 magnet、web+example)，提供更整合的體驗。

透過「應用程式」>「資訊清單」窗格，前往「通訊協定處理常式」部分。您可以在這裡查看及測試所有可用的通訊協定。

舉例來說，請安裝這個示範 PWA。在「通訊協定處理常式」部分中輸入「americano」，然後按一下「測試通訊協定」，在 PWA 中開啟咖啡頁面。

Chromium 問題：1300613

「元素」面板中的頂層徽章

使用頂層徽章瞭解頂層的概念，並視覺化頂層內容的變化。

<dialog> 元素最近已在各瀏覽器中穩定運作。開啟對話方塊時，系統會將其放入頂層。頂層內容會顯示在所有其他內容上方。

在這個示範中，按一下「開啟對話方塊」。

為協助顯示頂層元素，開發人員工具會在 DOM 樹狀結構中新增頂層容器 (#top-layer)。這個標記位於結尾 </html> 標記之後。

如要從頂層容器元素跳至頂層樹狀結構元素，請按一下頂層容器中元素或背景旁的「顯示」按鈕。

按一下頂層樹狀結構元素 (例如對話方塊元素) 旁的「top-layer」徽章，即可跳至頂層容器。

Chromium 問題：1313690

在執行階段附加 Wasm 偵錯資訊

您現在可以在執行階段附加 wasm 的 DWARF 偵錯資訊。先前，「來源」面板僅支援將來源對應附加至 JavaScript 和 Wasm 檔案。

在「來源」面板中開啟 Wasm 檔案。在編輯器中按一下滑鼠右鍵，然後選取「Add DWARF debugging info…」(新增 DWARF 偵錯資訊…)，即可視需要附加偵錯資訊。

Chromium 問題：1341255

在偵錯期間支援即時編輯

現在您可以在堆疊中編輯最上層的函式，不必重新啟動偵錯工具。

在 Chrome 104 中，開發人員工具重新推出「重新啟動影格」功能。不過，您無法編輯目前暫停的功能。開發人員通常會在函式中中斷，然後在暫停時編輯該函式。

更新後，偵錯工具會自動重新啟動函式，但有下列限制：

• 暫停時只能編輯最上層的函式
• 堆疊中沒有對同一函式的遞迴呼叫

Chromium 問題：1334484

在「樣式」窗格中查看及編輯規則的 @scope

您現在可以在「樣式」窗格中查看及編輯 CSS @scope at 規則。

@scope at 規則是 CSS Cascading and Inheritance Level 6 規格的一部分。開發人員可透過這些規則，在 CSS 中設定樣式規則的範圍。

開啟這個範例頁面，並檢查 <div class=”dark-theme”> 元素中的超連結。在「樣式」窗格中，查看 @scope at 規則。按一下規則宣告即可編輯。

Chromium 問題：1337777

來源對應改善

以下是來源對應的幾項修正，可改善整體偵錯體驗：

• 開發人員工具現在可正確解析含有標點符號的來源對應 ID。部分新式縮小器 (例如 esbuild) 會產生來源對應，將 ID 與後續標點符號 (逗號、半形括號、半形分號) 合併。
• 開發人員工具現在會解析含有 super 呼叫的建構函式來源對應名稱。
• 修正重複標準網址的來源對應網址索引。先前，由於標準網址重複，部分檔案中的中斷點無法啟用。

Chromium 問題：1335338、1333411

其他亮點

這個版本的重要修正項目包括：

• 刪除本機儲存空間鍵/值組合時，請從「Application」>「Local Storage」窗格的表格中正確移除該組合。(1339280)
• 在「來源」面板中查看 CSS 檔案時，現在會正確顯示顏色預覽。先前這些位置的放置位置有誤。(1340062)
• 在「版面配置」窗格中，持續顯示 CSS 彈性和格線項目，並在「元素」面板中以徽章形式顯示。先前，彈性和格線項目在這兩個位置都會隨機遺失。(1340441、1273992)
• 如果開發人員工具找到導致頁框標示為廣告的指令碼，廣告頁框就會顯示新的「建立者廣告指令碼」連結。您可以依序點選「Application」 >「Frames」，開啟影格。(1217041)

下載預覽版頻道

建議使用 Chrome Canary、開發人員版或 Beta 版做為預設開發瀏覽器。透過這些搶先體驗管道，您可以存取最新的開發人員工具功能、測試最先進的網頁平台 API，並在使用者發現問題前找出網站上的問題！

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

如要討論開發人員工具的新功能、更新或其他相關事項，請使用下列選項。

• 如要提供意見回饋或提出功能要求，請前往 crbug.com。
• 如要回報開發人員工具的問題，請依序點選開發人員工具中的 more_vert「更多選項」 >「說明」 >「回報開發人員工具的問題」。
• 在 Twitter 訊息中標記 @ChromeDevTools。
• 在「開發人員工具最新消息」或「開發人員工具提示」YouTube 影片中留言。

開發人員工具新功能

「開發人員工具新功能」系列涵蓋的所有主題清單。