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

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

「依『已編寫』/『已部署』檢視畫面將檔案分組」現在會顯示在 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.jscore.mjs 等第三方指令碼。這些不是您的原始碼,而是由套件組合器 (例如 webpack) 或架構 (例如 Angular) 產生的。找出錯誤的根本原因所需的時間較長。

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

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

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

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

Chromium 錯誤:1323199

改善偵錯期間的呼叫堆疊

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

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

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

改善偵錯期間的呼叫堆疊

Chromium 錯誤:1352488

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

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

開啟這個示範。在「來源」面板中,node_moduleswebpack 是第三方指令碼。按一下 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 新功能系列文章中涵蓋的所有內容清單。