断点没停住而代码执行了，根本原因是WebStorm依赖Chrome调试协议连接，若连接中断、URL用file://协议、source map缺失、脚本动态加载（如eval）或未启用JavaScript Debug配置，断点即失效。
为什么断点没停住，代码却执行了？
WebStorm 调试 JavaScript 时最常遇到的不是“不会设断点”，而是断点设了但没触发，或者触发了却看不出执行顺序——根本原因是 debugger 语句和断点行为受运行环境影响极大。Chrome DevTools 和 WebStorm 的 JS 调试器虽然底层共用 V8，但 WebStorm 依赖 Chrome/Edge 的远程调试协议（CDP），一旦连接中断、页面重载未自动重连、或脚本是动态插入（如 eval()、new Function()、模块异步加载），断点就会失效。
实操建议：
立即学习“Java免费学习笔记（深入）”；
- 确认右上角运行配置中已勾选
JavaScript Debug，且 URL 指向本地服务（如http://localhost:3000），而非file://协议（Chrome 会禁用调试） - 避免在压缩后的代码里打断点；开启 Source Maps 并确保
webpack.config.js或构建工具中devtool: 'source-map'生效 - 对动态生成的代码（如模板字符串拼接的函数），改用
debugger语句，它比 UI 断点更可靠
如何让 async/await 和 Promise 链的执行顺序一目了然？
异步代码的执行顺序容易误判，不是因为逻辑错，而是 WebStorm 默认只在同步调用栈停顿。Promise 回调、setTimeout、requestIdleCallback 等微任务/宏任务不会自动触发断点，除非你明确在回调内部设点或启用“Step Into”时勾选 Step into asynchronous calls。
实操建议：
立即学习“Java免费学习笔记（深入）”；
- 在
.then()、async函数体、useEffect回调等实际执行位置手动加断点，不要只在fetch()调用行设点 - 启动调试前，在 WebStorm 设置中打开
Settings > Build, Execution, Deployment > Debugger > Stepping，勾选Do not step into library scripts和Step into asynchronous calls - 对复杂链式调用，可在关键节点插入
console.log(new Error().stack)辅助定位调用路径，比单步更直观
为什么 Step Over 跳过了某行，但实际执行了？
这是 WebStorm 调试器对“一行代码”的理解与 JS 引擎执行粒度不一致导致的。比如 const a = fn1() + fn2(); 这一行，Step Over 可能直接跳到下一行，而 fn1() 和 fn2() 实际都已执行——因为 V8 把整行视为一个表达式求值单元，WebStorm 不会强制拆解。
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
实操建议：
立即学习“Java免费学习笔记（深入）”；
- 把复合表达式拆成多行：先
const x = fn1();，再const y = fn2();，最后const a = x + y;，才能逐个观察 - 使用
Step Into（F7）代替Step Over（F8）进入函数内部，但注意避开node_modules中的库函数，否则会陷入无关细节 - 检查是否启用了
Settings > Debugger > Stepping > Skip breakpoints in library scripts，若误开，会导致跳过你自己的工具函数
Chrome 和 WebStorm 调试器显示的调用栈不一致怎么办？
WebStorm 显示的是基于 CDP 的“逻辑调用栈”，而 Chrome DevTools 显示的是 V8 实际堆栈，两者在异步上下文（如 Promise.then）、事件循环钩子（如 process.nextTick）或 Web Worker 中会有明显差异。尤其当代码经过 Babel 转译或使用装饰器时，源码映射可能错位。
实操建议：
立即学习“Java免费学习笔记（深入）”；
- 在 WebStorm 中右键调用栈帧 →
Jump to Source，确认跳转位置是否匹配原始.ts或.jsx文件，若跳到dist/下的文件，说明 Source Maps 未正确加载 - 关闭 WebStorm 的
Settings > Languages & Frameworks > JavaScript > Libraries > Enable JavaScript Library Dependencies，避免自动注入干扰调试的 polyfill - 如果必须对比两个调试器，优先信任 Chrome 的堆栈，WebStorm 更适合作为断点管理和变量查看辅助工具，而非执行溯源唯一依据
真正卡住调试节奏的，往往不是功能不会用，而是默认设置和构建流程悄悄改写了执行上下文——比如一个没声明 "type": "module" 的 package.json，会让 WebStorm 用 CommonJS 模式解析 ES 模块，断点直接失效。这类细节不会报错，但会让所有断点形同虚设。
