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

Jecelyn Yeen

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

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

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

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

Chromium 錯誤：1352488

改善堆疊追蹤

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

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

舉例來說，請開啟這個demo，然後按一下增加按鈕。在管理中心展開錯誤訊息。在原始碼中，這項作業包含非同步 timeout 作業。

// application.component.ts

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

先前堆疊追蹤只會顯示逾時作業。沒有呈現作業的「根本原因」。

根據最新變更，開發人員工具現在會顯示源自按鈕元件的 onClick 事件、increment 函式，以及逾時作業。

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

開發人員工具在幕後推出了新的「非同步堆疊標記」功能。您可以將非同步程式碼的兩個部分與新的 console.createTask() 方法連結，指出作業的完整故事。詳情請參閱「開發人員工具中的新型偵錯」一文。

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

Chromium 錯誤：1334585

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

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

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

先前堆疊追蹤包含 zone.js 和 core.mjs 等第三方指令碼。這些程式碼並非您的原始碼，是由軟體包 (例如 webpack) 或架構 (例如 Angular) 產生。我們花了較長的時間才找出錯誤的根本原因。

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

在背景，開發人員工具會根據來源對應中的新 x_google_ignoreList 屬性，忽略第三方指令碼。架構和套裝組合人員需要提供這項資訊。請參閱「個案研究：使用開發人員工具改善 Angular 偵錯。

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

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

Chromium 錯誤：1323199

改善偵錯期間的呼叫堆疊

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

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

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

改善偵錯期間的呼叫堆疊

Chromium 錯誤：1352488

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

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

開啟這個demo。在「來源」面板中。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 影片留言。

開發人員工具新功能

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