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

錄音工具的逐步重播功能

您現在可以在「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 問題:13346281328873

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

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

網址通訊協定處理常式註冊可讓已安裝的 PWA 處理使用特定通訊協定 (例如 magnetweb+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 規則

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

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

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

Chromium 問題:1337777

來源對應改善項目

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

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

Chromium 問題:13353381333411

其他精選內容

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

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

下載預覽頻道

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

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

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

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

開發人員工具新功能

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