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

Jecelyn Yeen

在偵錯期間重新啟動影格

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

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

在偵錯期間重新啟動影格

Chromium 問題：1303521

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

您現在可以以較慢、緩慢、極慢的速度重播使用者流程。這些選項可讓您更妥善地觀察每個步驟在畫面上重播。

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

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

Chromium 問題：1306756

建構「錄音工具」面板的擴充功能

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

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

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

Chromium 問題：1325751

在「來源」面板中，依「已編寫」/「已部署」選項將檔案分組

啟用新的「依已撰寫 / 已部署」選項將檔案分組，即可在「來源」面板中整理檔案。使用架構 (例如 React、Angular) 開發網頁應用程式時，由於建構工具 (例如 Webpack、Vite) 所產生的壓縮檔，會難以瀏覽來源檔案。

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

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

歡迎試試看這個 React 示範模式，親自體驗！

在「來源」面板中，依「已編寫」/「已部署」選項將檔案分組

Chromium 問題：960909

「成效深入分析」面板中提供「新使用者載入時間」追蹤

透過「Performance Insights」面板的全新「User Timings」測試群組，以視覺化方式呈現記錄中的 performance.measure() 標記。

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

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

「成效深入分析」面板中的「使用者載入時間」追蹤

Chromium 問題：1322808

顯示指定元素版位

「Elements」面板中的版位元素會有一個新的 slot 徽章。對版面配置問題進行偵錯時，可以使用這項功能更快找出影響節點版面配置的元素。

這個範例包含有多個已命名運算單元的資訊卡。檢查資訊卡的 person-occupation 版位，按一下旁邊的 slot 徽章，即可查看指派的版位。

瞭解如何使用 <template> 和 <slot> 元素建立彈性範本，以便用於填入網頁元件的 shadow DOM。

顯示指定元素版位

Chromium 問題：1018906

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

「效能」面板中新增了「硬體並行」設定，可讓開發人員設定 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

改善來源地圖

以下為來源地圖的修正項目，以改善整體的偵錯體驗：

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

Chromium 問題：1329113、1322115

其他精選內容

這個版本的幾個重點修正如下：

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

下載預覽管道

考慮使用 Chrome Canary 版、開發人員版或 Beta 版做為預設開發瀏覽器。這些預覽管道可讓您存取開發人員工具的最新功能、測試最先進的網路平台 API，並在使用者使用之前就在網站上發現問題！

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

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

  • 請透過 crbug.com 提交建議或意見回饋。
  • 如要回報開發人員工具的問題，請在開發人員工具中依序點選「更多選項」圖示 更多   >「說明」 >「回報開發人員工具的問題」。
  • 在 @ChromeDevTools 張貼推文。
  • 歡迎對開發人員工具的 YouTube 影片或開發人員工具秘訣 (YouTube 影片) 提供意見。

開發人員工具的新功能

這裡列出了「開發人員工具新功能」系列中已涵蓋的所有功能。

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110 版本

Chrome 109 版

Chrome 108 版

Chrome 107 版

Chrome 106 版

Chrome 105

Chrome 104 版

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 99

Chrome 98 版

Chrome 97

Chrome 96

Chrome 95

Chrome 94 版

Chrome 93 版

Chrome 92 版

Chrome 91 版

Chrome 90

Chrome 89

Chrome 88 版

Chrome 87

Chrome 86

Chrome 85 版

Chrome 84 版

Chrome 83 版

Chrome 82 版

Chrome 82 已取消。

Chrome 81 版

Chrome 80 版

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59