webstorm如何调试

1. 配置调试运行项
   在WebStorm中调试前需要先创建调试配置。打开「运行」菜单选择「编辑配置」，点击左上角的「+」添加新配置。根据调试目标选择「JavaScript Debug」用于浏览器端调试，或选择「Node.js」用于服务端调试。浏览器调试需要安装JetBrains Chrome扩展，并在配置中填写要打开的URL地址；Node.js调试则指定入口脚本文件路径。配置完成后点击「确定」保存，后续可以直接从配置下拉框中选择该配置进行调试。
2. 在代码中设置断点
   断点是调试的核心，用于暂停代码执行以便检查状态。在编辑器左侧行号区域点击即可添加断点，点击已设置的断点可将其禁用。WebStorm支持多种断点类型：普通断点在指定行暂停；条件断点右键选择「更多」后可设置表达式条件，仅当条件为真时触发；异常断点通过「运行」菜单的「查看断点」打开断点对话框，点击「+」添加「JavaScript异常断点」，可以选择在捕获或未捕获异常时中断。合理使用条件断点可以避免在无关场景下频繁暂停，提高调试效率。
3. 启动调试会话
   配置和断点设置完成后，选择调试配置并点击工具栏上的绿色虫子图标「调试」，或使用快捷键「Shift+F9」启动调试。浏览器调试会自动打开Chrome并导航到目标页面；Node.js调试会在底部调试工具窗口显示进程信息。代码执行到断点处会自动暂停，此时编辑器会高亮显示当前执行行，调试工具窗口展开显示「调试」面板。首次调试时如果Chrome扩展未安装，WebStorm会弹出提示引导安装JetBrains Chrome扩展。
4. 使用调试工具窗口
   调试启动后底部会显示调试工具窗口，包含多个关键面板。「变量」面板显示当前作用域内的所有变量及其当前值，可以展开对象查看嵌套属性，双击值可直接修改进行测试。「调用栈」面板显示函数调用链路，点击任意帧可切换到对应的代码位置。「断点」面板列出所有断点，可快速启用/禁用或编辑条件。「监视」面板允许添加自定义表达式持续观察其值变化。右侧编辑器区域悬停变量可快速查看其当前值，无需切换到变量面板。这些面板协同工作帮助全面掌握程序运行状态。
5. 执行控制与单步调试
   调试工具栏提供完整的执行控制按钮。「跳过」按钮或「F8」执行下一行代码并保持同函数内；「进入」按钮或「F7」会进入当前行调用的函数内部；「强制进入」或「Alt+Shift+F7」可进入即使没有调试信息的函数；「跳出」或「Shift+F8」执行完当前函数剩余代码并返回调用处。「恢复程序」或「F9」继续执行直到遇到下一个断点或程序结束。配合这些控制命令，可以在关键位置逐步推进，观察变量值的变化轨迹，定位逻辑错误或数据异常的具体原因。

软件页面：Webstorm。