WebStorm怎么打断点？行断点和条件断点设置方法
在WebStorm中打开要调试的文件，把光标放到一条可执行语句上，点击左侧装订区域的行号位置，就能设置行断点，也可以按 Ctrl+F8。用Debug启动对应运行配置。程序会在这一行暂停，变量和调用位置会显示在调试工具窗口中。
WebStorm打断点：从行断点开始
1、先选真正会运行的语句
函数里的赋值、条件判断、回调或接口处理语句都适合放断点。空行、注释和只有花括号的行没有可暂停的代码。断点显示无效，就把它移到实际执行的语句上。
2、在装订区域点击或使用快捷键
单击编辑器最左侧的装订区域，行旁出现断点标记即表示设置成功。WebStorm的行断点可以设在任意可执行行。同一行里的箭头函数会显示多个可选位置，应选中对应表达式，而不是随意停在整行的前后位置。
3、用Debug而不是Run启动
在右上角选择要调试的配置后启动Debug。断点命中会让编辑器定位当前执行行，调试工具窗口会列出当前线程、变量和调用栈。Run只会让程序直接继续，红点不会替你暂停程序。
暂停以后怎样顺着代码找问题
Variables面板会列出当前作用域里的值，调用栈能说明代码从哪里进入。只需观察当前行的结果就用单步跳过。怀疑问题藏在被调用的方法里，可进入函数内部。读完当前函数即可返回上一层调用处，更容易判断数据在哪一步变化。
调试异步代码不要只盯着当前文件。请求回调、定时器和Promise的执行时机可能让代码从不同入口进入。触发操作确实走到这段逻辑后，参数、状态和前一层调用就能用于定位问题，比在每一行都打断点更有效。
只在特定情况暂停：条件断点和日志断点
1、给高频代码加条件
循环、鼠标事件或渲染回调很容易频繁命中普通断点。右键目标行，在菜单中选择添加条件断点，并填写当前作用域内有效的JavaScript布尔表达式。表达式为 true 才会暂停，可先用简单比较验证，再补足筛选范围。
2、只想记录而不想打断操作时使用日志
日志断点可以把“Breakpoint hit”消息、堆栈跟踪或表达式结果写到控制台，不必每次暂停页面。记录调用次数或某个值的变化，不要在表达式里写会改动数据的操作，以免调试动作本身影响结果。
3、一次性观察时设临时断点
只需要暂停一次，可以按 Ctrl+Alt+Shift+F8，或按住 Alt 点击装订区域。临时行断点被命中后会自动从项目中移除，适合验证一次跳转或一次回调，不会在后续调试里反复打断流程。
异常、静音和无效状态怎么判断
找不到错误抛出行，就打开【运行】→【查看断点】，添加JavaScript异常断点并指定异常类型。想让每次出现异常都暂停，可启用【任何异常】。暂停后结合异常信息和调用栈回到自己的代码继续处理。
断点没有停下，不一定是IDE出错。确认当前确实是Debug会话，且操作会执行到这段代码。同时检查断点有没有被静音或禁用。WebStorm会在调试器会话启动后校验断点能否暂停，代码行没有可执行内容时会被标为无效。把断点移到实际语句、取消静音或启用后重新运行，就能区分代码路径没有走到与断点本身无法生效。
需要集中管理时打开断点列表
断点较多，可进入【运行】→【查看断点】或使用 Ctrl+Shift+F8，可以统一查看、删除、临时禁用或编辑它们的属性。删除某一个普通断点，直接再次点击它在装订区域中的标记即可。临时关闭可用禁用，保留条件和其他设置，日后排查同一问题还能继续使用。
完成修改。用Debug重走刚才触发问题的操作。变量暂停在目标行且与预期一致，继续执行后的结果也正确，才说明这次断点定位真正帮你确认了问题所在。
