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

Jecelyn Yeen

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

「依已編寫 / 已部署」可將檔案分組為三點選單。先前，這個窗格會直接顯示在導覽窗格中。

開啟這個示範。啟用「依已編寫 / 已部署的程式碼分組檔案」設定，可以先查看原始原始碼 (已編寫) 並加快瀏覽速度。

依「已編寫」/「已部署」的內容分組檔案

Chromium 錯誤：1352488

改善堆疊追蹤

非同步作業的連結堆疊追蹤

當某些作業安排以非同步方式進行時，開發人員工具中的堆疊追蹤現在會顯示作業的「完整故事」。以前的只是故事的一部分，

例如，開啟這個試用版，然後按一下增加按鈕。在管理中心展開錯誤訊息。在原始碼中，該作業包含非同步的 timeout 作業。

// application.component.ts

async increment() {
    await Promise.resolve().then(() => timeout(100));
    …
}

先前堆疊追蹤只會顯示逾時作業。而此處並未顯示作業的「根本原因」。

最新的變更後，開發人員工具現在會顯示作業源自按鈕元件中的 onClick 事件，接著是 increment 函式，然後才顯示逾時運算。

非同步作業的連結堆疊追蹤

開發人員工具在背景推出全新的「非同步堆疊標記」功能。只要將非同步程式碼的兩個部分與新的 console.createTask() 方法連結在一起，即可掌握作業的完整故事。詳情請參閱開發人員工具中的現代化偵錯功能。

聽起來很複雜嗎？絕非如此。大多數情況下，您使用的架構會處理排程和非同步執行作業。在這種情況下，使用 API 將由架構主導，您不必擔心。(例如 Angular 導入了這些變更)

Chromium 錯誤：1334585

自動忽略已知的第三方指令碼

開發人員工具現在會自動將已知的第三方指令碼加入忽略清單，因此在偵錯時能更快找出程式碼中的問題。

開啟這個示範，然後按一下增加按鈕。在管理中心展開錯誤訊息。堆疊追蹤只會顯示您的程式碼 (例如 app.component.ts button.component.ts)。按一下「Show more frames」即可查看完整的堆疊追蹤。

堆疊追蹤先前包含 zone.js 和 core.mjs 等第三方指令碼，這不是您的原始碼，而是組合工具 (例如 Webpack) 或架構 (例如 Angular) 所產生。因此，我們需要花更久的時間才能找出錯誤的根本原因。

自動忽略堆疊追蹤中已知的第三方指令碼

開發人員工具在幕後，根據來源對應中新的 x_google_ignoreList 屬性忽略第三方指令碼。架構和組合器需要提供這項資訊。請參閱「個案研究：使用開發人員工具改善成效」。

如果您想一律查看完整堆疊追蹤，也可以依序前往 [設定] > [忽略清單] > [自動新增已知第三方指令碼以忽略清單] 停用設定。

設為自動新增已知第三方指令碼以忽略清單的設定

Chromium 錯誤：1323199

改善偵錯期間的呼叫堆疊

透過「自動新增已知第三方指令碼以忽略清單」設定，呼叫堆疊現在只會顯示與程式碼相關的影格。

開啟這個示範，並在 app.component.ts 的 increment() 函式中設定中斷點。按一下頁面上的遞增按鈕，即可觸發中斷點。呼叫堆疊只會顯示程式碼中的影格 (例如 app.component.ts 和 button.component.ts)。

如要查看所有影格，請啟用「顯示忽略清單中的頁框」。開發人員工具先前預設會顯示所有影格。

改善偵錯期間的呼叫堆疊

Chromium 錯誤：1352488

隱藏「來源」面板中已忽略的來源

啟用「隱藏忽略清單中的來源」，即可隱藏「導覽」窗格中的不相關的檔案。這樣一來，您就可以專注在程式碼上。

開啟這個示範。在「Sources」面板中。node_modules 和 webpack 是第三方指令碼。按一下三點選單並選取「隱藏忽略清單中的來源」，即可在窗格中隱藏這些來源。

隱藏「來源」面板中已忽略的來源

Chromium 錯誤：1352488

透過「隱藏已忽略的來源」設定，您可以使用「指令選單」更快找到所需檔案。過去，在指令選單中搜尋檔案時，系統會傳回可能與您無關的第三方檔案。

舉例來說，啟用「隱藏忽略清單中的來源」設定，然後按一下三點選單。選取「開啟檔案」。輸入「ton」即可搜尋按鈕元件。過去，結果會包含 node_modules 的檔案，其中一個 node_modules 檔案甚至顯示在第一個結果中。

隱藏指令選單中的忽略清單檔案

Chromium 錯誤：1336604

「成效」面板中提供新的互動軌跡

使用「成效」面板中的全新「互動」測試群組，以視覺化方式呈現互動情形，並追蹤潛在回應問題。

例如，你可以在這個示範頁面開始錄製表演影片。按一下咖啡並停止錄影。「互動」軌會顯示兩種互動。這兩種互動的 ID 相同，表示互動是由同一使用者互動所觸發。

「成效」面板中的互動軌跡

Chromium 錯誤：1347390

「效能洞察」面板中的 LCP 時間細目

成效洞察面板現在會顯示最大內容繪製 (LCP) 的時間細目。請運用這些時間資訊，瞭解並找出改善 LCP 成效的機會。

「效能洞察」面板中的 LCP 時間細目

Chromium 錯誤：1351735

在「錄音工具」面板中為錄製內容自動產生預設名稱

「錄音工具」面板現在會自動為新錄音檔產生名稱。

在錄音工具面板中，錄製內容的預設名稱

Chromium 錯誤：1351383

其他精選內容

  • 先前錄音工具面板不會顯示錄音工具擴充功能，(1351416)。
  • 「Styles」窗格現在會針對 SVG <stop> 元素的 stop-color 屬性，顯示顏色挑選器。(1351096)。
  • 在「Performance Insights」面板中，找出造成版面配置偏移的指令碼造成版面配置偏移的主因。(1343019)。
  • 在「Performance Insights」面板中顯示 LCP 網頁字型的重要路徑。(1350390)。

下載預覽管道

考慮使用 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