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

Jecelyn Yeen

在偵錯期間重新啟動影格

「重新啟動頁框」功能再次登場！在函式中的某個位置暫停時，您可以重新執行上述程式碼。這項功能先前由於穩定性問題，因此已在 Chrome 92 版中淘汰並從中移除。

在這個範例中，偵錯工具一開始會在 toggleColorScheme 函式結尾的中斷點 (第 343 行) 暫停。如要從 toggleColorScheme 函式的開頭重新啟動偵錯，請展開「Debugger」窗格中的「Call stack」部分，在 toggleColorScheme 上按一下滑鼠右鍵，然後選取「Restart frame」。

在偵錯期間重新啟動影格

Chromium 問題：1303521

「錄音工具」面板中的緩慢重播選項

您現在能以較慢的速度重播使用者流程，速度包括緩慢、緩慢，以及極慢。使用這些選項，即可更清楚觀察畫面上的每個步驟重播情形。

開啟「錄音工具」面板，然後開始新的錄製內容。請在錄影完成後，點選「重播」下拉式選單按鈕。選取速度即可重新播放。

「錄音工具」面板中的緩慢重播選項

Chromium 問題：1306756

為錄音工具面板建構擴充功能

您現在可以建立或安裝 Chrome 擴充功能，以偏好的格式匯出重播指令碼。如要瞭解如何建立錄音工具擴充功能 API，請參閱「Recorder 擴充功能 API」說明文件。

如要安裝試用版擴充功能，請按照說明文件中所列的這些步驟操作。

「錄音工具」面板的自訂擴充功能

Chromium 問題：1325751

依「來源」面板中「已編寫 / 部署」的檔案分組

啟用新的「Group files by Authored / Deployed」選項，以便在「來源」面板中整理檔案。使用架構開發網頁應用程式 (例如 React、Angular) 時，由於建構工具會產生壓縮檔案 (例如 Webpack、Vite 等)，因此可能難以瀏覽來源檔案。

您可透過這個核取方塊將檔案分為 2 個類別，加快檔案搜尋速度：

  • 編寫。類似您在 IDE 中查看的來源檔案。開發人員工具會根據來源對應 (由建構工具提供) 產生這些檔案。
  • 已部署。瀏覽器讀取的實際檔案。這些檔案通常會經過壓縮。

歡迎觀看這個 React 示範，親自體驗看看！

依「來源」面板中「已編寫 / 部署」的檔案分組

Chromium 問題：960909

「成效洞察」面板中的「新使用者載入時間」追蹤項目

使用「Performance Insights」面板中新增的「User Timings」測試群組，就能以視覺化的方式呈現 performance.measure() 標記。

舉例來說，這個網頁會使用 performance.measure() 方法計算文字載入的經過時間。

開始評估網頁載入時，「使用者載入時間」追蹤記錄會顯示在記錄中。按一下時間項目即可在側邊窗格查看詳細資料。

「成效洞察」面板中追蹤的使用者載入時間

Chromium 問題：1322808

顯示針對元素指派的版位

「元素」面板中的版位元素有新的 slot 標記。對版面配置問題進行偵錯時，您可以利用這項功能，更快找出影響節點版面配置的元素。

此範例中的資訊卡中含有幾個已命名的版位。檢查卡片的 person-occupation 插槽，然後按一下旁邊的 slot 標記，以顯示其指派的版位。

瞭解如何使用 <template> 和 <slot> 元素建立可靈活調整的範本，以便填入網頁元件的 shadow DOM。

顯示針對元素指派的版位

Chromium 問題：1018906

模擬效能錄製內容的硬體並行

「Performance」(效能) 面板中的全新「硬體並行」設定可讓開發人員設定 navigator.hardwareConcurrency 回報的值。

有些應用程式會使用 navigator.hardwareConcurrency 控制應用程式的平行處理程度，例如控制 Emscripten pthread 集區大小。這項功能可讓開發人員以不同的核心計數測試應用程式效能。

模擬效能錄製內容的硬體並行

Chromium 問題：1297439

自動完成 CSS 變數時預覽非顏色的值

自動填入 CSS 變數時，開發人員工具現在會為非顏色變數填入有意義的值，方便您預覽節點上會變更的類型。

自動完成 CSS 變數時預覽非顏色的值

Chromium 問題：1285091

在「往返快取」窗格中找出封鎖影格

「應用程式」面板中的「往返快取」窗格新增了「頁框」部分，可協助您找出可能導致網頁無法使用 bfcache 的封鎖影格。

在「往返快取」窗格中找出封鎖影格

Chromium 問題：1288158

改善 JavaScript 物件的自動完成建議

JavaScript 物件屬性的自動完成建議現在會根據以下順序顯示：

  1. 擁有的列舉屬性
  2. 擁有非列舉屬性
  3. 繼承的列舉屬性
  4. 繼承的非列舉屬性

先前，開發人員發現相關屬性較難尋找，因為這類建議只優先使用自有資源，而非沿用的屬性，而且所有沿用的屬性都具有相同的優先順序。

改善 JavaScript 物件的自動完成建議

Chromium 問題：1299241

來源對應改善項目

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

  • 中斷點現在可以在包含 sourceURL 註解的內嵌 <script> 中運作。
  • 偵錯工具現在會使用來源對應解析「Scope」檢視畫面中的區塊範圍變數。 解析區塊範圍變數
  • 偵錯工具現在可在「Scope」檢視畫面中，解析包含來源對應的箭頭函式變數。 解析箭頭函式中的變數

Chromium 問題：1329113、1322115

其他精選內容

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

  • 修正「Sources」面板的「Auto-complete」設定。過去，即使停用這項設定，系統一律會開啟自動完成功能。(1323286)。
  • 更新「Application」面板中的「Manifest」分頁，以便剖析最新的色彩配置格式。(1318305)。
  • 改善針對「效能洞察」面板中「<script async>」轉譯阻礙問題的建議。即使指令碼已標示為非同步，開發人員工具先前仍會建議 add async attribute to the script tag。(1334096)。
  • 「成效洞察」面板現在會偵測 iframe 是版面配置位移的可能原因。您可以在「Details」窗格中查看 iframe 詳細資料。(1328873)。
  • 在指令選單開啟檔案時，編寫的檔案 (由來源對應產生的檔案) 現在排名會較高，因此這類檔案會顯示在名稱類似的已部署指令碼上方。(1312929)。

下載預覽頻道

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

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

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

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

開發人員工具新功能

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