断点打不中首要确认调试会话是否启动：右下角必须显示“Debugger connected”；运行配置须为JavaScript Debug类型；HTML文件需通过WebStorm内置服务（如http://localhost:63342/）访问。
断点打不中？先确认调试会话是否真正启动
WebStorm 点了 Debug 按钮却没反应，大概率是调试器根本没连上——右下角状态栏没出现 Debugger connected 或类似提示，就等于断点白设。这不是代码问题，而是环境没就绪。
- 运行配置必须选
JavaScript Debug类型（不是 Node.js、npm 或 Webpack Serve） - URL 必须指向本地 HTML 文件，且能被 WebStorm 内置服务器访问，例如
http://localhost:63342/my-project/index.html - 如果项目用 Vite / Webpack Dev Server 启动，别选 HTML 调试配置，改用
Attach to Node.js/Chrome，再手动打开chrome://inspect连接 -
debugger语句没反应？检查 Chrome DevTools 是否已打开，且Disable JavaScript breakpoints选项未被勾选（路径：⚙️ → Preferences → Debugger）
变量显示 undefined 或值滞后？注意执行上下文和作用域
V8 引擎的调试行为决定了：变量只在当前 stack frame 中实时可读。一旦跳出作用域（比如进了 setTimeout、Promise.then 或事件回调），IDE 显示的可能是上一个快照，甚至根本读不到闭包变量。
- 避免依赖“悬停查看”异步回调里的变量；改在回调函数第一行设断点，或用
console.log输出关键值 - 想查异步链中间结果？右键变量 →
Evaluate Expression，输入await somePromise（仅限当前暂停位置） - 函数参数或局部变量名被 minify 成
a、t？开发阶段务必关掉构建工具的minify和mangle选项，否则 WebStorm 无法还原原始语义
调试 Svelte/Vue/React 响应式逻辑时断点失效？别打在编译期语法上
$:（Svelte）、computed（Vue）、useMemo（React）这些不是运行时 JS 语句，而是编译器处理的语法糖。你在 $: doubled = count * 2 上设断点，永远命中不了。
- 断点应设在派生值实际被使用的位置，比如模板中
{doubled}渲染处，或调用它的函数内部 - 临时加一句
console.log('doubled updated:', doubled)，这行才是真实 JS，可以打断点 - 响应式更新没触发 UI 变化？先检查 WebStorm 的 Svelte/Vue Language Server 是否加载成功（右下角语言标识是否为对应框架），否则 HMR 和类型推导都可能失效
Source Map 没生效？检查 .map 文件是否加载成功
断点打在 bundle.js 上基本无效，除非 sourcemap 正确生成并被浏览器加载。压缩后代码里断点错位、跳转到错误行，90% 是 map 文件没加载或路径不对。
立即学习“Java免费学习笔记（深入）”；
- 打开 Chrome DevTools → Network 面板，刷新页面，搜索
.js.map，确认返回状态码是200 - Webpack/Vite 构建时确保开启了
devtool: 'source-map'（开发模式）或'inline-source-map' - TypeScript 项目必须有
tsconfig.json，且 WebStorm 的Languages & Frameworks > TypeScript设置中指定了正确的node_modules/typescript路径 - 如果用了 Service Worker 或 iframe 加载脚本，WebStorm 默认不监听其上下文——需在 Settings → Tools → JavaScript Debug → Contexts 中手动启用
最常被忽略的是：调试配置类型选错、sourcemap 文件 404、以及把断点打在编译器生成的抽象语法上。这三个点卡住，再准的逻辑判断也进不了 debugger。
