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

avatar
作者
筋斗云
阅读量:5

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

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

设置断点

  1. 打开您的 JavaScript 文件。

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

启动调试会话

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

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

  3. 点击 OK 开始调试。

在调试中操作

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

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

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

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

  1. 在浏览器中打开调试页面,并打开开发者工具(通常是按 F12 键)。

  2. 在开发者工具中,切换到 SourcesDebugger 标签页,找到您的 JavaScript 文件。

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

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

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

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!