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

Jecelyn Yeen

在「來源」面板中依「已編寫」/「已部署」檢視畫面將檔案分組

「依『已編寫』/『已部署』檢視畫面將檔案分組」現在會顯示在 3 點選單下方。先前會直接顯示在導覽窗格中。

開啟這個示範。啟用「Group files by Authored / Deployed」設定，即可先查看原始原始碼 (已編寫)，並更快速地前往該檔案。

依「已編寫」/「已部署」檢視畫面將檔案分組

Chromium 錯誤：1352488

改善堆疊追蹤

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

當部分作業排定為非同步執行時，開發人員工具中的堆疊追蹤現在會顯示作業的「完整情況」。先前，這項指標只能顯示部分資訊。

舉例來說，請開啟這個示範，然後按一下遞增按鈕。在 控制台中展開錯誤訊息。在原始碼中，該作業包含非同步 timeout 作業。

// application.component.ts

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

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

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

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

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

聽起來很複雜嗎？絕非如此。在大多數情況下，您使用的架構會負責排程和非同步執行作業。在這種情況下，使用 API 的責任就落在架構身上，您不必擔心。(例如 Angular 實作了這些變更)

Chromium 錯誤：1334585

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

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

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

先前，堆疊追蹤會包含 zone.js 和 core.mjs 等第三方指令碼。這些不是您的原始碼，而是由套件組合器 (例如 webpack) 或架構 (例如 Angular) 產生的。找出錯誤的根本原因所需的時間較長。

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

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

如要一律查看完整堆疊追蹤記錄，您可以依序前往「設定」 >「忽略清單」 >「自動新增已知的第三方指令碼以忽略清單」，停用這項設定。

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

Chromium 錯誤：1323199

改善偵錯期間的呼叫堆疊

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

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

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

改善偵錯期間的呼叫堆疊

Chromium 錯誤：1352488

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

啟用「隱藏忽略清單中的來源」，即可隱藏「Navigation」窗格中的不相關檔案。這樣一來，您就能專心編寫程式碼。

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

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

Chromium 錯誤：1352488

開啟「隱藏已忽略的來源」設定後，就能透過指令選單更快速地找到檔案。先前在指令選單中搜尋檔案時，系統會傳回可能與您無關的第三方檔案。

舉例來說，啟用「隱藏已忽略的來源」設定，然後按一下 3 點選單。選取「開啟檔案」。輸入「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)。
  • 在「成效洞察」面板中，找出導致版面配置衝突的腳本，這可能是版面配置位移的潛在根本原因。(1343019)。
  • 在「效能深入分析」面板中，顯示 LCP 網路字型的關鍵路徑。(1350390)。

下載預覽管道

建議您將 Chrome Canary、開發人員版或Beta 版設為預設開發人員版瀏覽器。這些預覽管道可讓您存取最新的 DevTools 功能，測試最新的網路平台 API，並在使用者發現問題前，協助您找出網站的問題！

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

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

開發人員工具的新功能

DevTools 新功能系列文章中涵蓋的所有內容清單。