WebStorm 中调试 (Debug) JavaScript 文件(js)

WebStorm 中调试 (Debug) JavaScript 文件(js)

在 WebStorm 中调试 JavaScript 文件，您可以设置断点，启动调试会话，并使用浏览器中的开发者工具来查看变量和执行流程。以下是详细步骤：

设置断点

1. 打开您的 JavaScript 文件。

2. 在您想要暂停执行的代码行点击并按下 F9 键，这样就会在那一行代码上创建一个断点。

启动调试会话

3. 点击顶部菜单栏的 Run > Debug... 或者使用 Shift + F9 快捷键启动调试会话。

4. 选择合适的运行/调试配置，如果是在浏览器中运行的代码，则可能需要配置一个 Web Server。

5. 点击 OK 开始调试。

在调试中操作

6. 当执行到达带有断点的代码行时，WebStorm 会暂停执行并允许您查看变量值、单步执行等。

7. 使用调试工具栏上的按钮进行操作：

   • Resume Program (F9)：继续执行程序直到下一个断点。
   • Step Over (F8)：逐行执行当前函数，不进入函数内部。
   • Step Into (F7)：进入当前行中调用的函数。
   • Step Out (Shift + F8)：从当前函数返回到调用它的函数。
   • Restart (Ctrl + F5)：重新启动调试会话。

使用开发者工具查看变量和执行流程

8. 在浏览器中打开调试页面，并打开开发者工具（通常是按 F12 键）。

9. 在开发者工具中，切换到 Sources 或 Debugger 标签页，找到您的 JavaScript 文件。

10. 在这里，您可以查看变量值、执行流程，以及在调试会话中的所有断点。

确保您的 WebStorm 已经安装并启用了 JavaScript 语言支持，并且您的项目设置中已经包括了您正在调试的 JavaScript 文件。

通过以上步骤，您可以在 WebStorm 中轻松调试 JavaScript 文件，并查看变量和执行流程，以便更好地理解代码的执行过程和调试问题。