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

Jecelyn Yeen

錄音工具的逐步重播功能

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

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

這項功能可讓您輕鬆以圖表呈現完整的使用者流程，並進行偵錯。

詳情請參閱錄音工具功能參考資料。

錄音工具的逐步重播功能

Chromium 問題：1257499

支援「錄音工具」面板中的事件遊標

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

這項示範會在遊標懸停時顯示彈出式選單。請試著記錄使用者流程，然後點選選單項目。

如果現在重播使用者流程，會失敗，因為錄音工具不會在錄影期間自動擷取滑鼠遊標。如要解決這個問題，請手動新增步驟，將滑鼠遊標懸停在選取器上，然後點選選單項目。

支援「錄音工具」的滑鼠遊標懸停事件

Chromium 問題：1257499

「效能洞察」面板中的「Largest Contentful Paint (LCP)」

LCP 是衡量感知載入速度的重要、以使用者為中心的指標。您現在可以瞭解最大內容繪製 (LCP) 的重要路徑和根本原因。

在表演錄影中，按一下「時間軸」中的 LCP 徽章。在「Details」窗格中，您可以查看 LCP 分數、瞭解如何修正造成 LCP 變慢的資源，以及查看 LCP 資源的重要路徑。

查看成效深入分析，瞭解如何透過面板取得可做為行動依據的洞察資料，並改善網站成效。

「效能洞察」面板中的 LCP

Chromium 問題：1326481

找出文字閃光 (FOIT、FOUT) 的潛在根本原因，以免版面配置位移

「效能洞察」面板現在會偵測 FOIT 隱藏的文字 (FOIT) 和未設定文字閃爍 (FOUT)，找出版面配置位移的潛在根本原因。

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

如要瞭解避免版面配置位移的技術，請參閱「最佳化 WebFont 載入和轉譯」。

「效能洞察」面板中的 FOUT

Chromium 問題：1334628、1328873

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

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

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

透過「Application」前往「Protocol Handlers」部分，「資訊清單」窗格。你可以在這裡查看及測試所有可用的通訊協定，

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

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

Chromium 問題：1300613

「元素」面板中的頂層標記

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

最近，<dialog> 元素在所有瀏覽器上都變得穩定。開啟的對話方塊會位於頂層中。頂層內容會顯示在所有其他內容上方。

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

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

如要從頂層容器元素跳到頂層圖層樹狀結構元素，請在頂層容器容器中按一下元素旁邊的「顯示」按鈕。

按一下頂層樹狀結構元素 (例如對話方塊元素) 旁邊的「頂層」標記，即可跳至頂層容器容器。

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

Chromium 問題：1313690

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

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

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

ALT_TEXT_HERE

Chromium 問題：1341255

支援在偵錯期間即時編輯

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

在 Chrome 104 中，開發人員工具會復原「重新啟動頁框」功能。但無法編輯目前暫停的函式。開發人員常會在函式中中斷，然後在暫停時編輯該函式。

本次更新後，偵錯工具會自動重新啟動函式，並套用以下限制：

  • 暫停期間只能編輯最頂層的函式
  • 堆疊下方沒有相同函式的週期性呼叫

偵錯期間即時編輯

Chromium 問題：1334484

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

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

規則的 @scope 是 CSS 階層結構與沿用第 6 級規格的一部分。這些規則可讓開發人員在 CSS 中界定樣式規則範圍。

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

@scope at「Styles」窗格中的規則

Chromium 問題：1337777

來源對應改善項目

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

  • 開發人員工具現在可以正確解析含標點符號的來源對應 ID。部分新型壓縮器 (例如 esbuild) 會產生合併 ID 的來源對應 加上後面的標點符號 (逗號、括號、分號)。
  • 開發人員工具現在會透過 super 呼叫解析建構函式的來源對應名稱。 ALT_TEXT_HERE
  • 修正來源對應網址索引，適用於重複標準網址。過去，由於標準網址重複，某些檔案無法啟用中斷點。

Chromium 問題：1335338、1333411

其他精選內容

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

  • 在「Application」> 中的資料表中，正確移除本機儲存鍵/值組合「Local Storage」窗格。(1339280)。
  • 在「來源」面板中查看 CSS 檔案時，顏色預覽畫面現在會正確顯示。先前的位置上錯了。(1340062)。
  • 在「Layout」窗格中持續顯示 CSS 彈性和格線項目，並在「Elements」面板中以徽章形式顯示這些項目。先前，彈性和格線項目在這兩個位置都隨機缺漏。(1340441、1273992)
  • 如果開發人員工具發現能讓影格標示為廣告的指令碼，系統就會為廣告頁框提供新的創作者廣告指令碼連結。您可以透過「Application」開啟頁框 >頁框：(1217041)。

下載預覽頻道

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

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

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

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

開發人員工具新功能

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