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

Jecelyn Yeen

在偵錯期間重新啟動影格

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

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

Chromium 問題：1303521

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

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

開啟「Recorder」(記錄器) 面板，然後開始新的錄音。錄製完成後，按一下「重播」下拉式按鈕。選取速度即可開始重播。

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 變數時，開發人員工具會以有意義的值填入非顏色變數，方便您預覽該值對節點的影響。

Chromium 問題：1285091

在「往返快取」窗格中找出阻礙框架

「應用程式」面板的「往返快取」窗格新增了「框架」部分，可協助您找出可能導致網頁不符合往返快取資格的封鎖框架。

Chromium 問題：1288158

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

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

1. 自有可列舉屬性
2. 自有不可列舉的屬性
3. 繼承的可列舉屬性
4. 繼承的不可列舉屬性

先前，建議只會優先顯示自有屬性，而非繼承屬性，且所有繼承屬性的優先順序都相同，因此開發人員較難找到相關屬性。

Chromium 問題：1299241

改善來源對應

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

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

Chromium 問題：1329113、1322115

其他重點

這個版本的重要修正項目包括：

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

下載預覽版頻道

建議使用 Chrome Canary、開發人員版或 Beta 版做為預設開發瀏覽器。透過這些搶先版管道，您可以存取最新的開發人員工具功能、測試最先進的網頁平台 API，並在使用者發現問題前，找出網站上的問題！

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

如要討論開發人員工具的新功能、更新或其他相關事項，請使用下列選項。

• 如要提供意見或要求新功能，請前往 crbug.com。
• 如要回報開發人員工具的問題，請依序點選開發人員工具中的 more_vert「更多選項」 >「說明」 >「回報開發人員工具的問題」。
• 在 Twitter 訊息中標記 @ChromeDevTools。
• 在「開發人員工具最新消息」或「開發人員工具提示」YouTube 影片中留言。

開發人員工具新功能

「開發人員工具新功能」系列涵蓋的所有主題清單。