在Chrome DevTools中，怎样查看调用堆栈？

在Chrome DevTools中查看调用堆栈是一个重要的调试功能，可以帮助你理解代码的执行流程和定位问题。以下是如何查看调用堆栈的步骤：

1. 打开DevTools：

   • 你可以通过右键点击网页元素并选择“检查”（Inspect）或者使用快捷键Ctrl+Shift+I（Windows）或Cmd+Option+I（Mac）来打开Chrome DevTools。

2. 切换到“Sources”标签页：

   • 在DevTools中，找到并点击“Sources”标签页，这个标签页允许你查看和编辑网页的源代码。

3. 设置断点：

   • 在“Sources”标签页中，找到你想要调试的代码文件。
   • 点击代码行号左边的空白区域，可以设置一个断点。当代码执行到这一行时，执行会暂停。

4. 刷新页面或触发代码执行：

   • 设置断点后，刷新页面或者执行相应的操作，使得代码运行到断点处。

5. 查看调用堆栈：

   • 当代码在断点处暂停时，点击DevTools底部的“Call Stack”（调用堆栈）标签页。
   • 在“Call Stack”标签页中，你可以看到当前的调用堆栈信息，包括每个函数调用的文件和行号。

6. 分析调用堆栈：

   • 调用堆栈从上到下显示了函数调用的顺序，最顶部的是最内层的函数调用，最底部的是最初的函数调用。
   • 你可以点击每个函数调用，查看其在源代码中的具体位置。

7. 使用上下文信息：

   • 在“Call Stack”标签页旁边，通常会有“Scope”（作用域）和“Variables”（变量）面板，显示当前函数调用的作用域和变量状态。

8. 继续执行和单步调试：

   • 你可以使用“Resume script execution”（继续执行脚本）按钮（一个三角形图标）来继续执行代码。
   • 使用“Step into”（单步进入）和“Step over”（单步跳过）按钮来控制代码的执行流程，以便更细致地分析调用堆栈的变化。

9. 关闭DevTools：

   • 调试完成后，你可以通过点击DevTools窗口右上角的关闭按钮来关闭开发者工具。

通过这些步骤，你可以在Chrome DevTools中有效地查看和分析调用堆栈，帮助你更好地理解代码的执行流程和定位问题。

原文地址：https://blog.csdn.net/weixin_43822401/article/details/143836298

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！