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

Jecelyn Yeen

在偵錯期間重新啟動畫面

「重新開始顯示頁框」功能回來了！您可以在函式中暫停時重新執行上述程式碼。先前，這項功能已因穩定性問題而淘汰，並在 Chrome 92 版中移除。

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

在偵錯期間重新啟動畫面

Chromium 問題：1303521

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

現在您可以以較慢的速度重播使用者流程，包括慢速、極慢和極慢。這些選項可讓您更清楚地觀察螢幕上每個步驟的重播畫面。

開啟「錄音器」面板，然後開始錄製新內容。錄製完成後，按一下「Replay」下拉式選單按鈕。選取速度即可開始重播。

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

Chromium 問題：1306756

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

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

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

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

Chromium 問題：1325751

在「來源」面板中依「已編寫」/「已部署」檢視畫面將檔案分組

啟用新的「依『已編寫』/『已部署』檢視畫面將檔案分組」選項，即可在「來源」面板中整理檔案。使用架構 (例如 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> 元素建立彈性範本，然後用於填入網頁元件的陰影 DOM。

顯示元素的已指派時段

Chromium 問題：1018906

模擬效能記錄的硬體並行功能

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

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

模擬效能記錄的硬體並行功能

Chromium 問題：1297439

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

在自動完成 CSS 變數時，DevTools 會為非顏色變數填入有意義的值，讓您預覽該值會對節點造成哪些變化。

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

Chromium 問題：1285091

在「Back/forward cache」窗格中找出阻擋畫面

「Application」面板中的「Back/forward cache」窗格有新的「frames」部分，可協助您找出可能導致網頁不符合 bfcache 使用資格的封鎖框架。

在「Back/forward cache」窗格中找出阻斷畫面

Chromium 問題：1288158

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

JavaScript 物件屬性的自動完成功能現在會依照以下順序顯示：

  1. 擁有可枚舉的屬性
  2. 擁有非可枚舉的屬性
  3. 繼承的可枚舉屬性
  4. 繼承的不可枚舉屬性

先前，開發人員發現要找出相關的屬性較為困難，因為建議內容只會優先顯示自己的屬性，而非繼承的屬性，且所有繼承的屬性都會獲得相同的優先順序。

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

Chromium 問題：1299241

改善來源對照圖

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

  • 中斷點現在可在內嵌 <script> 中使用 sourceURL 註解。
  • 偵錯工具現在會使用原始檔案對應表，在「Scope」檢視畫面中解析區塊範圍變數。 解析區塊範圍變數
  • 偵錯工具現在會使用原始碼對照表，在「範圍」檢視畫面中解析箭頭函式中的變數。 解析箭頭函式中的變數

Chromium 問題：1329113、1322115

其他精選內容

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

  • 修正「來源」面板的「自動完成」設定。在先前，即使設定為停用，自動完成功能仍會一律開啟。(1323286)
  • 更新「應用程式」面板中的「資訊清單」分頁，以便剖析最新的配色方案格式。(1318305)
  • 改善「效能深入分析」面板中 <script async> 轉譯阻斷問題的建議。先前，即使指令碼已標示為非同步，開發人員工具仍會建議使用 add async attribute to the script tag。(1334096)。
  • 「成效洞察」面板現在會偵測 iframe 是否為版面配置位移的潛在原因。您可以在「Details」窗格中查看 iframe 詳細資料。(1328873)。
  • 在「指令」選單中開啟檔案時，系統會將作者檔案 (由來源對照圖產生的檔案) 排在較前，讓這些檔案顯示在名稱相似的已部署指令碼之上。(1312929)

下載預覽管道

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

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

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

開發人員工具的新功能

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