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

Jecelyn Yeen

在錄音工具中逐步重播

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

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

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

詳情請參閱錄影器功能參考資料。

在錄音工具中逐步重播

Chromium 問題：1257499

支援錄製器面板中的滑鼠游標懸停事件

錄音工具現在支援在錄製內容中手動新增滑鼠懸停 (滑鼠游標) 步驟。

這個示範會在游標懸停時顯示彈出式選單。嘗試記錄使用者流程，並按一下選單項目。

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

在錄製器中支援滑鼠懸停事件

Chromium 問題：1257499

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

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

在成效錄製檔案中，按一下「時間軸」中的 LCP 徽章。您可以在「Details」窗格中查看 LCP 分數、瞭解如何修正會減緩 LCP 的資源，以及查看 LCP 資源的關鍵路徑。

請參閱「成效洞察」，瞭解如何透過資訊面板取得可做為行動依據的洞察資料，並改善網站成效。

效能深入分析面板中的 LCP

Chromium 問題：1326481

找出文字閃爍 (FOIT、FOUT) 是版面配置位移潛在根本原因

效能深入分析面板現在會偵測閃爍的隱藏文字 (FOIT) 和閃爍的未格式化文字 (FOUT)，做為版面配置位移的潛在根本原因。

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

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

效能深入分析面板中的 FOUT

Chromium 問題：1334628、1328873

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

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

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

透過「Application」 >「Manifest」窗格，前往「Protocol Handlers」部分。您可以在此查看及測試所有可用的通訊協定。

例如安裝這個 PWA 示範。在「Protocol Handlers」部分輸入「americano」，然後按一下「Test protocol」，即可在 PWA 中開啟咖啡頁面。

「Manifest」窗格中的通訊協定處理常式

Chromium 問題：1300613

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

使用頂層層級徽章，瞭解頂層層級的概念，並以視覺化方式呈現頂層內容的變化。

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

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

為了方便將頂層元素視覺化，DevTools 會在 DOM 樹狀結構中新增頂層容器 (#top-layer)。位於結尾 </html> 標記之後。

如要從頂層容器元素跳至頂層樹狀結構元素，請在頂層容器中，按一下元素或其背景圖片旁的「揭露」按鈕。

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

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

Chromium 問題：1313690

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

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

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

ALT_TEXT_HERE

Chromium 問題：1341255

支援在偵錯期間進行即時編輯

您現在可以編輯堆疊上方的函式，而無須重新啟動偵錯工具。

在 Chrome 104 中，開發人員工具已重新推出重新啟動框架功能。不過，您無法編輯目前處於暫停狀態的函式。開發人員通常會在函式中暫停，然後在暫停時編輯該函式。

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

  • 只有最上方的函式可以在暫停時編輯
  • 在堆疊中更下方的同一個函式上，沒有遞迴呼叫

在偵錯期間即時編輯

Chromium 問題：1334484

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

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

@scope 規則是 CSS 階層和繼承第 6 級規格的一部分。這些規則可讓開發人員在 CSS 中設定樣式規則的範圍。

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

在「樣式」窗格中使用 @scope 規則

Chromium 問題：1337777

來源對應功能改善

以下是一些修正的來源圖，可改善整體偵錯體驗：

  • 開發人員工具現在可正確解析含有標點符號的來源對應 ID。部分現代縮減器 (例如 esbuild) 會產生來源對應，將 ID 與後續標點符號 (逗號、括號、分號) 合併。
  • 開發人員工具現在會為使用 super 呼叫的建構函式解析來源對應名稱。 ALT_TEXT_HERE
  • 修正重複的標準網址來源對應網址索引。先前，由於重複的標準網址，導致某些檔案中的暫停點未啟用。

Chromium 問題：1335338、1333411

其他精選內容

以下是這個版本中值得注意的修正項目：

  • 在刪除本機儲存空間鍵/值組合時，從「應用程式」 >「本機儲存空間」窗格中的資料表中，正確移除本機儲存空間鍵/值組合。(1339280)。
  • 在「Sources」面板中查看 CSS 檔案時，現在會正確顯示顏色預覽畫面。先前這些位置的位置不正確。(1340062)。
  • 在「版面配置」窗格中一致顯示 CSS flex 和格線項目，並在「元素」面板中以徽章的形式顯示這些項目。先前，這兩個位置都會隨機遺漏 Flex 和 GridLayout 項目。(1340441、1273992)。
  • 如果 DevTools 發現導致頁框標示為廣告的指令碼，廣告框就會顯示新的「創作者廣告指令碼」連結。您可以透過「應用程式」 >「Frames」開啟框架。(1217041)

下載預覽管道

建議您將 Chrome Canary、開發人員版或Beta 版設為預設開發人員版瀏覽器。這些預覽管道可讓您存取最新的 DevTools 功能，測試最新的網路平台 API，並在使用者發現問題前，協助您找出網站的問題！

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

請使用下列選項討論新功能、更新或任何與開發人員工具相關的內容。

開發人員工具的新功能

DevTools 新功能系列文章中涵蓋的所有內容清單。