webstorm调试教程

1. 设置断点并启动调试会话
   在 WebStorm 中打开要调试的 JavaScript 文件，点击行号右侧的空白处即可添加断点，断点会显示为红色圆点。然后点击编辑器右上角的调试按钮（绿色虫子图标），或者按 Shift+F9 启动调试会话。如果项目是 Node.js 应用，WebStorm 会自动识别运行配置；如果是浏览器端代码，需要确保已安装 JetBrains IDE Support 扩展，并在调试配置中选择对应的浏览器。启动后程序会运行到第一个断点处暂停，此时调试工具窗口会自动打开，显示调用堆栈、变量和监视区域。
2. 使用步进工具控制执行流程
   程序暂停在断点后，调试工具窗口顶部会出现步进按钮：Step Over（F8）执行当前行并跳到下一行，不进入函数内部；Step Into（F7）进入当前行调用的函数内部，逐行执行；Step Out（Shift+F8）跳出当前函数，返回到调用处。建议先用 Step Over 快速跳过不关心的代码，遇到需要检查的函数再用 Step Into。如果误加了断点，可以点击 Resume Program（F9）继续运行到下一个断点，或停止调试会话。
3. 查看和监视变量值
   调试暂停时，Variables 面板会列出当前作用域内的所有变量及其值。将鼠标悬停在编辑器中的变量名上，也会弹出当前值提示。如果想持续关注某个变量，可以在 Watches 面板点击加号，输入变量名或表达式，例如 this.user.name，每次步进后该值都会自动更新。对于数组或对象，可以展开查看嵌套结构。WebStorm 还支持条件断点：右键点击断点，设置条件表达式，只有条件为真时才会暂停，适合在循环中定位特定数据。
4. 使用 Evaluate Expression 计算临时表达式
   在调试暂停状态下，按 Alt+F8 打开 Evaluate Expression 对话框，可以输入任意 JavaScript 表达式并立即查看结果，例如调用函数、访问全局变量或计算组合值。这个功能非常适合在不修改代码的情况下验证假设。比如想知道某个数组的长度，输入 arr.length 即可。表达式可以包含当前作用域内的变量，甚至调用函数，但要注意函数副作用。如果表达式报错，会显示错误信息，便于排查。
5. 调试 Node.js 和浏览器端代码的差异
   WebStorm 调试 Node.js 项目时，直接运行调试配置即可，无需额外插件。调试浏览器端代码时，需要确保 Chrome 或 Edge 安装了 JetBrains IDE Support 扩展，并在运行配置中选择「JavaScript Debug」类型。两者在断点、步进和变量查看上操作完全一致，但浏览器调试还支持在 Sources 面板查看 DOM 和网络请求。如果断点没有命中，先检查运行配置是否正确、代码是否被压缩，以及是否使用了源映射（Source Map）。

软件页面：Webstorm。