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

Jecelyn Yeen

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

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

開啟這個示範。啟用「依據已編寫/已部署分組檔案」設定，即可先查看原始原始碼 (已編寫)，並更快速地前往該檔案。

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)。按一下「顯示更多頁框」，即可查看完整的堆疊追蹤。

先前，堆疊追蹤記錄會包含 zone.js 和 core.mjs 等第三方指令碼。這些並非原始碼，而是由捆綁程式 (例如 webpack) 或架構 (例如 Angular) 產生。找出錯誤的根本原因所需的時間較長。

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

您也可以選擇一律查看完整的堆疊追蹤記錄，方法是依序前往「設定」>「忽略清單」>「自動新增已知的第三方指令碼至忽略清單」。

Chromium 錯誤：1323199

改善偵錯期間的呼叫堆疊

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

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

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

Chromium 錯誤：1352488

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

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

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

Chromium 錯誤：1352488

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

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

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

Chromium 錯誤：1336604

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

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

舉例來說，您可以在這份示範頁面上開始錄製成效。按一下咖啡圖示即可停止錄製。「互動」軌跡會顯示兩次互動，兩個互動都有相同的 ID，表示互動是從相同的使用者互動觸發。

Chromium 錯誤：1347390

「效能深入分析」面板中的 LCP 時間分析

效能深入分析面板現在會顯示最大內容繪製 (LCP) 的時間分析。您可以利用這些時間資訊瞭解並找出改善 LCP 成效的機會。

Chromium 錯誤：1351735

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

錄音器面板現在會自動為新錄音內容產生名稱。

Chromium 錯誤：1351383

其他精選內容

• 先前，錄音工具擴充功能有時不會顯示在「錄音工具」面板中。(1351416)。
• 「Styles」窗格現在會為 SVG <stop> 元素的 stop-color 屬性顯示顏色挑選器。(1351096)。
• 在「成效洞察」面板中，找出導致版面配置衝突的腳本，這可能是版面配置位移的潛在根本原因。(1343019)。
• 在「效能深入分析」面板中，顯示 LCP 網路字型的關鍵路徑。(1350390)。

下載預覽頻道

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

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

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

• 請透過 crbug.com 提交意見回饋和功能要求。
• 在開發人員工具中，依序按一下「更多選項」>「說明」>「回報開發人員工具的問題」，然後使用 more_vert 回報開發人員工具的問題。
• 前往 @ChromeDevTools 張貼 Tweet。
• 在 YouTube 影片「What's new in DevTools」或「DevTools 提示」YouTube 影片中留言。

開發人員工具的新功能

這份清單列出「DevTools 最新消息」系列文章中涵蓋的所有內容。