查看当前调用堆栈

• 在某行代码上暂停时，使用 Call Stack 窗格查看使您进入此操作的调用堆栈

function firstFunction() {

console.log("In firstFunction");

secondFunction(); // 调用第二个函数

}

function secondFunction() {

console.log("In secondFunction");

thirdFunction(); // 调用第三个函数

}

function thirdFunction() {

console.log("In thirdFunction");

// 假设这里有一个错误或异常导致程序暂停

throw new Error("Something went wrong!");

}

// 执行第一个函数

try {

firstFunction();

} catch (error) {

console.error(error.message);

}

重启调用堆栈中的函数（帧）

• 若要观察函数的行为并重新运行该函数，但不必重启整个调试流程，您可以在此函数暂停时重新开始执行单个函数。换言之，您可以在调用堆栈中重启函数的帧
• 如需重启帧，请执行以下操作：
• 在断点处暂停函数执行。Call Stack 窗格记录了函数调用的顺序。
• 在 Call Stack 窗格中，右键点击一个函数，然后从下拉菜单中选择 Restart frame【重启帧】。

function foo(value) {

console.log(value);

bar(value);

}

function bar(value) {

value++;

console.log(value);

debugger;

}

foo(0);

• 在同一函数重新启动后，当前参数值会保留在内存中
• 调试程序会在函数声明旁边显示当前值：value = 1。
• 
  

显示已列入忽略列表的帧

• 请在此演示页面上试用：
• 在 Sources 面板中，打开 src >app app.component.ts 文件。
• 在 increment() 函数上设置一个断点。
• 在 Call Stack 部分，选中或取消选中 Show ignore-listed framework 复选框，并观察调用堆栈中的相关帧或完整的帧列表。
• 默认情况下，Call Stack 窗格仅显示与您的代码相关的帧，并且会忽略添加到 Settings >忽略列表
• 
  
• 如需查看包含第三方框架的完整调用堆栈，请启用 Call Stack 部分下的 Show ignore-listed frame。
• 
  

复制堆栈轨迹

• 右键点击 Call Stack 窗格中的任意位置，然后选择 Copy stack trace【复制到堆栈轨迹】 以复制当前调用 复制到剪贴板

function foo(value) {

console.log(value);

bar(value);

}

function bar(value) {

value++;

console.log(value);

debugger;

}

foo(0);

• 以下是输出结果示例：
• bar (trace:8)
• foo (trace:3)
• （匿名） (trace:10)

原文链接：https://juejin.cn/post/7427865237440053289