断点没停住但控制台显示错误堆栈，是因为WebStorm默认不中断未捕获异常；需手动启用Uncaught Exceptions断点，并确保source map正确映射、URL配置严格匹配浏览器实际加载地址。
为什么断点没停住，但控制台显示了错误堆栈？
WebStorm 的 JavaScript 调试器默认不自动中断未捕获异常，它只响应你手动打的断点或 debugger 语句。所以即使控制台打印出完整的 Uncaught TypeError: Cannot read property 'x' of undefined 堆栈，调试器也不会暂停——除非你主动开启“Caught Exceptions”或“Uncaught Exceptions”捕获。
实操建议：
立即学习“Java免费学习笔记（深入）”；
- 打开 Run → Toggle Breakpoints → JavaScript Exception Breakpoints…（或按
Ctrl+Shift+F8/Cmd+Shift+F8） - 勾选
Uncaught Exceptions；如需更细粒度控制，可点击+ → Add Exception Breakpoint…，输入TypeError或ReferenceError等具体类型 - 确保右上角的
JavaScript Debug配置已启用Enable JavaScript debugging（在 Run Configuration → Browser tab 下） - 重启调试会话，错误发生时将自动停在抛出位置，而非仅在控制台看到堆栈
如何在堆栈中快速跳转到源码对应行？
控制台输出的堆栈常含压缩后路径（如 bundle.js:123:45），直接点击无法跳转。根本原因是缺少 source map 映射或 WebStorm 没识别到。
实操建议：
立即学习“Java免费学习笔记（深入）”；
- 确认构建产物包含有效的
.map文件（如bundle.js.map），且与.js文件同目录或通过sourceMappingURL正确指向 - 在 WebStorm 中，右键点击控制台堆栈里的文件名（如
bundle.js:123），选择Jump to Source；若失败，检查 Settings → Languages & Frameworks → JavaScript → Source Maps 是否启用了Auto-detect source maps - 若用 Webpack/Vite，确保开发模式下开启了
devtool: 'source-map'（Vite 对应build.sourcemap: true） - 遇到
webpack://协议路径无法解析？在 Source Maps 设置里添加映射：webpack:/// → 你的项目根目录
调试 Vue/React 组件内错误时堆栈太深怎么办？
框架组件生命周期、高阶函数、Proxy 代理等会把原始错误裹进多层调用帧，导致堆栈顶部是 vue.runtime.esm.js 或 react-dom.development.js，真实业务代码藏在底部几屏外。
实操建议：
立即学习“Java免费学习笔记（深入）”；
- 在 WebStorm 的
Debug Tool Window → Frames面板中，取消勾选Hide frames from libraries（默认开启），否则框架内部帧会被折叠，反而更难定位 - 右键堆栈中的某一层 →
Jump to Source，优先尝试点击你项目路径下的文件（如src/components/Button.vue:42），而不是框架路径 - 对 Vue，可在
main.js加app.config.errorHandler = (err) => { debugger; }；对 React，使用componentDidCatch或useEffect+try/catch包裹副作用，让断点落在业务层 - 避免依赖控制台自动展开的 “Caused by” 提示——它有时不准，以
Frames面板实际顺序为准
为什么本地调试时堆栈显示 localhost:port，但断点不生效？
常见于用 Vite/Webpack Dev Server 启动，但 WebStorm 调试配置里 URL 写成了 http://127.0.0.1:3000 或路径不匹配，导致浏览器加载的脚本 URL 与 WebStorm 认知的 URL 不一致，source map 关联失败。
实操建议：
立即学习“Java免费学习笔记（深入）”；
- 在浏览器开发者工具的
Sources面板中，确认脚本 URL 是http://localhost:3000/src/App.js还是http://127.0.0.1:3000/src/App.js；WebStorm 必须用完全相同的协议+host+port+路径才能映射 - 修改 Run Configuration 中的
URL字段，严格匹配浏览器地址栏内容（包括末尾斜杠） - 如果用了反向代理（如 Nginx），务必在 WebStorm 的 Source Maps 设置中添加自定义路径映射，例如将
http://myapp.local/ → ./src - 检查浏览器是否启用了缓存：调试时勾选
Disable cache (while DevTools is open)，否则可能加载旧的无 source map 版本
真正卡住的地方往往不是语法错误本身，而是 WebStorm 对 URL 和 source map 的路径匹配逻辑——它不模糊匹配，差一个端口、一个斜杠、一个协议，就找不到源码行。
