✨Chrome DevTools 使用指☞北 - 来源面板之查看当前调用堆栈 🔔

查看当前调用堆栈 🌈

• 在某行代码上暂停时，使用 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);  
  }
  

• 点击某个条目即可跳转到调用该函数的代码行

  

  

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

• 若要观察函数的行为并重新运行该函数，但不必重启整个调试流程，您可以在此函数暂停时重新开始执行单个函数。换言之，您可以在调用堆栈中重启函数的帧

• 如需重启帧，请执行以下操作：

  1. 在断点处暂停函数执行。Call Stack 窗格记录了函数调用的顺序。

  2. 在 Call Stack 窗格中，右键点击一个函数，然后从下拉菜单中选择 Restart frame【重启帧】。

     

     function foo(value) {
       console.log(value);
       bar(value);
     }
     function bar(value) { 
       value++;
       console.log(value);
       debugger;
     }
     foo(0);
     

• 在同一函数重新启动后，当前参数值会保留在内存中

  调试程序会在函数声明旁边显示当前值：value = 1。 

  

显示已列入忽略列表的帧 🐾

• 请在此演示页面上试用：

  1. 在 Sources 面板中，打开 src >app app.component.ts 文件。
  2. 在 increment() 函数上设置一个断点。
  3. 在 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)