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 會為非顏色變數填入有意義的值，讓您預覽該值會對節點造成哪些變化。

Chromium 問題：1285091

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

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

Chromium 問題：1288158

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

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

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

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

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 開發人員工具團隊聯絡

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

• 請前往 crbug.com 提交意見回饋和功能要求。
• 在開發人員工具中，依序按一下「more_vert」more_vert更多選項 >「Help」 >「Report a DevTools issue」，即可回報開發人員工具的問題。
• 在 Twitter 上傳送訊息給 @ChromeDevTools。
• 在 YouTube 影片「What's new in DevTools」或「開發人員工具提示」YouTube 影片中留言。

開發人員工具的新功能

這份清單列出「DevTools 最新消息」系列文章中涵蓋的所有內容。