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

Jecelyn Yeen

依「來源」面板中「已編寫 / 部署」的檔案分組

「Group files by Authored/ Deployed」(依作者/已部署的檔案分組) 現在會顯示在三點選單下方。先前會直接在導覽窗格中顯示。

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

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

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 屬性，忽略第三方指令碼。架構和套裝組合人員需要提供這項資訊。請參閱「個案研究：使用開發人員工具改善 Angular 偵錯。

此外，如果您偏好一律查看完整的堆疊追蹤，可以依序點選「設定」 >「忽略清單」 >「自動將已知的第三方指令碼新增至忽略清單」來停用設定。

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

Chromium 錯誤：1323199

改善偵錯期間的呼叫堆疊

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

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

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

改善偵錯期間的呼叫堆疊

Chromium 錯誤：1352488

在「來源」面板中隱藏忽略清單中的來源

啟用「隱藏忽略清單中的來源」，即可在「Navigation」窗格中隱藏不相關的檔案。如此一來，您只需要專心處理程式碼。

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

在「來源」面板中隱藏忽略清單中的來源

Chromium 錯誤：1352488

使用隱藏忽略的項目來源設定，使用指令選單即可更快找到檔案。過去，在「指令選單」中搜尋檔案會傳回與您無關的第三方檔案。

例如，啟用「隱藏忽略清單中的來源」設定，然後按一下三點選單。選取「開啟檔案」。輸入「ton」即可搜尋按鈕元件。先前，結果包含 node_modules 的檔案，這是 node_modules 檔案之一，甚至顯示為第一個結果。

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

Chromium 錯誤：1336604

「成效」面板中提供新的互動追蹤功能

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

舉例來說，請前往這個示範頁面開始錄製表演影片。點選咖啡並停止記錄。「互動」軌會顯示兩項互動。這兩種互動的 ID 相同，表示互動是從同一使用者互動觸發。

「成效」面板中的互動追蹤

Chromium 錯誤：1347390

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

「成效洞察」面板現在會顯示「Largest Contentful Paint (LCP)」的時間細目。您可以運用這些時間資訊，瞭解找出改善 LCP 效能的機會。

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

Chromium 錯誤：1351735

在「錄音工具」面板中自動產生錄音檔的預設名稱

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

「錄音工具」面板中的錄音預設名稱

Chromium 錯誤：1351383

其他精選內容

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

下載預覽頻道

建議您使用 Chrome Canary、Dev 或 Beta 版做為預設的開發瀏覽器。透過這些預覽版本，您可以存取開發人員工具中的最新功能、測試最先進的網路平台 API，以及找出網站的問題，以免使用者發現問題。

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

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

  • 歡迎透過 crbug.com 提出建議或意見。
  • 在開發人員工具中，依序點選「更多選項」圖示 更多   >「說明」 >「回報開發人員工具問題」，回報開發人員工具問題。
  • 前往 @ChromeDevTools 張貼 Tweet。
  • 歡迎在「開發人員工具」推出「最新消息」YouTube 影片或「開發人員工具秘訣」YouTube 影片留言。

開發人員工具新功能

「開發人員工具新功能」系列中的所有文章清單。

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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 指南

Chrome 110

Chrome 指南

Chrome 108

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Google 瀏覽器 93

Chrome 92 版

Chrome 91

Chrome 90

Google Chrome 89

Google Chrome 88

Chrome 87

Chrome 86 版

Chrome 85 版

Google Chrome 84

Chrome 83 版

Chrome 82 版

Chrome 82 已取消。

Chrome 81 版

Google 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