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

Jecelyn Yeen

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

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

開啟這項試用版。啟用「依撰寫 / 部署分組檔案」設定，即可先查看原始原始碼 (撰寫)，並更快找到這些檔案。

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

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

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

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

Chromium 錯誤：1323199

偵錯期間改善呼叫堆疊

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

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

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

Chromium 錯誤：1352488

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

啟用「隱藏忽略清單中的來源」，即可在「導覽」窗格中隱藏不相關的檔案。這樣您就能專心處理程式碼。

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

Chromium 錯誤：1352488

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

使用「hide ignore-listed sources」設定，即可透過「Command Menu」更快找到所需檔案。先前在指令選單中搜尋檔案時，系統會傳回可能與您無關的第三方檔案。

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

Chromium 錯誤：1336604

「效能」面板中的全新「互動」軌

使用「效能」面板中的全新「互動」軌跡，以視覺化方式呈現互動，並追蹤潛在的回應性問題。

舉例來說，您可以在這個示範頁面開始記錄效能。按一下咖啡，然後停止錄製。「互動」軌中會顯示兩項互動。兩項互動的 ID 相同，表示這些互動是由同一項使用者互動觸發。

Chromium 錯誤：1347390

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

「效能洞察」面板現在會顯示「最大內容繪製 (LCP)」的時間細目。您可以運用這些時間資訊，瞭解並找出改善 LCP 效能的機會。

Chromium 錯誤：1351735

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

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

Chromium 錯誤：1351383

其他亮點

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

下載預覽版頻道

建議使用 Chrome Canary、開發人員版或 Beta 版做為預設開發瀏覽器。透過這些搶先體驗管道，您可以存取最新的開發人員工具功能、測試最先進的網頁平台 API，並在使用者發現問題前找出網站上的問題！

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

如要討論開發人員工具的新功能、更新或其他相關事項，請使用下列選項。

• 如要提供意見回饋或提出功能要求，請前往 crbug.com。
• 如要回報開發人員工具的問題，請依序點選開發人員工具中的 more_vert「更多選項」 >「說明」 >「回報開發人員工具的問題」。
• 在 Twitter 訊息中標記 @ChromeDevTools。
• 在「開發人員工具最新消息」或「開發人員工具提示」YouTube 影片中留言。

開發人員工具新功能

「開發人員工具新功能」系列涵蓋的所有主題清單。