簡介
如今，作者可以使用許多抽象化方法建構自己的網頁應用程式。許多作者不直接與網路平台提供的低階 API 互動，而是運用架構、建構工具和編譯器，從高階的角度編寫應用程式。
舉例來說，以 Angular 架構為基礎建構的元件，是使用 HTML 範本的 TypeScript 編寫。基本上，Angular CLI 和 Webpack 會將所有內容編譯成 JavaScript，並稱為「套件」，然後會傳送到瀏覽器。
在開發人員工具中偵錯或剖析網頁應用程式時，您目前可以查看並偵錯這個編譯版本的程式碼，而不是實際編寫的程式碼。但身為作者，則不建議這樣做：
- 您不想對壓縮的 JavaScript 程式碼進行偵錯，但想要對原始 JavaScript 程式碼進行偵錯。
- 使用 TypeScript 時，您不想為 JavaScript 偵錯，最好為原始的 TypeScript 程式碼進行偵錯。
- 使用 Angular、Lit 或 JSX 這類範本時，您不一定想對產生的 DOM 進行偵錯。您可能想要對元件本身進行偵錯。
整體來說，您可能會希望在編寫程式碼時對程式碼進行偵錯。
雖然來源對應已接近此差距，但 Chrome 開發人員工具和生態系統在這方面能做的更多。
現在就來看看兩者的不同之處！
已編寫與已部署的程式碼
目前在來源面板中瀏覽檔案樹狀結構時，您會看到已編譯 (通常經過壓縮) 的內容。這些是瀏覽器實際下載和執行的檔案。開發人員工具將此稱為「已部署的程式碼」。
這種做法不方便，且經常難以掌握。身為作者，您應該查看及偵錯自己編寫的程式碼，而非「部署的程式碼」。
為了簡化程式碼，現在您可以改為顯示「編寫的程式碼」。因此，樹狀結構會與您在 IDE 中看到的來源檔案更為相似，而這些檔案現在與已部署的程式碼各自獨立。
如要在 Chrome 開發人員工具中啟用這個選項，請依序前往「設定」 >「實驗」，然後勾選「將來源分為已編寫和已部署的樹狀結構」。
「只有我的程式碼」
使用依附元件或以架構為基礎建構內容時，第三方檔案可能會讓您滿意。在多數情況下，您只要查看程式碼，而不是會併入 node_modules 資料夾中的部分第三方程式庫。
如要使用這項工具，開發人員工具會預設啟用一項額外設定：「自動新增已知的第三方指令碼以忽略清單」。依序按一下「開發人員工具」DevTools >「設定」DevTools >「忽略清單」DevTools，即可找到這組 ID。
啟用這項設定後，開發人員工具會隱藏架構或建構工具標示為「忽略」的任何檔案或資料夾。
自 Angular v14.1.0 起，其 node_modules 和 webpack 資料夾的內容已標示為如此。因此，這些資料夾、當中的檔案，以及其他這類第三方成果，皆不會顯示在開發人員工具中的不同位置。
身為作者，您無須採取任何行動，即可啟用這項新行為。這項變動取決於架構。
忽略堆疊追蹤中所列程式碼
這些忽略的檔案不會再顯示在堆疊追蹤中，身為作者，您現在可以查看更多相關的堆疊追蹤。
如要查看堆疊追蹤的所有呼叫頁框，您隨時可以按一下「Show more frames」連結。
您在偵錯及逐步檢查程式碼時看到的呼叫堆疊也是如此。當架構或封裝器向開發人員工具通知第三方指令碼時，開發人員工具會自動隱藏所有不相關的呼叫頁框，並跳過任何已忽略的程式碼，同時執行偵錯作業。
檔案樹狀結構中忽略的清單程式碼
如要從「來源」面板的「已編寫程式碼」檔案樹狀結構中隱藏已忽略的檔案和資料夾，請在開發人員工具的「設定」 >「實驗」中，勾選「在來源樹狀檢視中隱藏已忽略的程式碼」。
在 Angular 專案範例中，node_modules 和 webpack 資料夾現已隱藏。
「快速開啟」選單中已忽略的程式碼
已忽略的程式碼不僅會在檔案樹狀結構中隱藏，也會隱藏在「快速開啟」選單 (Control + P (Linux/Windows) 或 Command + P (Mac)) 中。
進一步改善堆疊追蹤
在介紹相關堆疊追蹤後，Chrome 開發人員工具已進一步改善堆疊追蹤。
已連結的堆疊追蹤
排定以非同步方式進行某些作業時，開發人員工具中的堆疊追蹤目前只會顯示部分故事內容。
舉例來說，以下假設的 framework.js 檔案有一個非常簡單的排程器：
function makeScheduler() {
const tasks = [];
return {
schedule(f) {
tasks.push({ f });
},
work() {
while (tasks.length) {
const { f } = tasks.shift();
f();
}
},
};
}
const scheduler = makeScheduler();
function loop() {
scheduler.work();
requestAnimationFrame(loop);
};
loop();
...以及開發人員會如何在 example.js 檔案中在自己的程式碼中使用：
function someTask() {
console.trace("done!");
}
function businessLogic() {
scheduler.schedule(someTask);
}
businessLogic();
在 someTask 方法中新增中斷點，或檢查主控台中顯示的追蹤記錄時，系統不會顯示任何提及這項作業「根本原因」的 businessLogic() 呼叫。
而是只會看到促成工作執行的架構排程邏輯，而堆疊追蹤中不會顯示導覽標記，以協助您釐清促成這項工作的事件之間的因果連結。
多虧了「非同步 Stack Tagging」這項新功能，只要將非同步程式碼的兩個部分連在一起，就能呈現出整個故事。
Async Stack Tagging API 導入了名為 console.createTask() 的新 console 方法。API 簽名如下：
interface Console {
createTask(name: string): Task;
}
interface Task {
run<T>(f: () => T): T;
}
console.createTask() 呼叫會傳回 Task 例項，供您稍後用於執行工作的內容 f。
// Task Creation
const task = console.createTask(name);
// Task Execution
task.run(f);
該工作會在建立結構定義與執行的非同步函式結構定義之間建立連結。
套用至上述的 makeScheduler 函式後，程式碼會變成下列內容：
function makeScheduler() {
const tasks = [];
return {
schedule(f) {
const task = console.createTask(f.name);
tasks.push({ task, f });
},
work() {
while (tasks.length) {
const { task, f } = tasks.shift();
task.run(f); // instead of f();
}
},
};
}
正因如此，Chrome 開發人員工具現在能夠顯示更佳的堆疊追蹤。
請留意 businessLogic() 現在如何包含在堆疊追蹤中！不僅如此，而且工作會使用熟悉的名稱 someTask，而非一般的 requestAnimationFrame。
友善通話頁框
建置專案時，架構通常會根據各種範本語言產生程式碼，例如將 HTML 樣式程式碼轉換為純 JavaScript 的 Angular 或 JSX 範本，這些範本最終會在瀏覽器中執行。有時候，這類產生的函式的名稱可能是經過壓縮後的單一字母名稱，或者可能無法辨識或陌生的名稱，但實際上並非如此。
在範例專案中，您可以在堆疊追蹤中看到此 AppComponent_Template_app_button_handleClick_1_listener 的範例。
為解決這個問題，Chrome 開發人員工具現已支援透過來源對應重新命名這些函式。如果來源對應有函式範圍開始的名稱項目，則呼叫框架應在堆疊追蹤中顯示該名稱。
身為作者，您無須採取任何行動，即可啟用這項新行為。這項變動取決於架構。
展望未來
免於本文所述的新增功能，Chrome 開發人員工具可提供更優質的偵錯體驗。團隊還想探索更多領域。特別是如何改善開發人員工具中的剖析體驗。
Chrome 開發人員工具團隊鼓勵架構作者採用這些新功能。如需實作指南，請參閱「個案研究：使用 DevTools 改善 Angular Debugging」。