断点不命中主因是运行配置类型错误，必须选JavaScript Debug而非Node.js或npm；其次检查URL是否为实际开发地址（如http://localhost:5173/）、Chrome进程是否冲突、source map是否生成并加载、JetBrains IDE Support插件是否已弃用（Chrome 115+无需安装）。
为什么断点不命中？先确认调试类型是不是 JavaScript Debug
断点打上去没反应，90% 是因为运行配置选错了。WebStorm 里有 Node.js、npm、JavaScript Debug 三种常见类型，只有 JavaScript Debug 才能调试浏览器中运行的前端代码（Vue/React/Vite 等）。Node.js 调的是服务端进程，npm 调的是 npm 命令本身——这两者根本不会停在你写的 useMessageStreamHandler.ts 或 App.vue 里。
检查方式：右上角配置下拉菜单 → Edit Configurations… → 左侧列表里选中当前配置 → 右侧 Type 必须是 JavaScript Debug，不是别的。
- 如果是 Vue/Vite 项目，Name 建议叫 “Debug @localhost:5173” 这类带端口的名称，避免混淆
- URL 必须填项目实际地址，比如终端里
npm run dev启动后输出的Local:行，通常是http://localhost:5173/（结尾斜杠不能少） - Browser 选 Chrome，别用内置浏览器或 Firefox —— WebStorm 的 JS 调试只支持 Chromium 内核
Chrome 启动失败或连不上？关掉所有 Chrome 进程再试
WebStorm 启动调试时会尝试新建一个 Chrome 实例，并监听 --remote-debugging-port=9222。但如果你系统里已有 Chrome 在运行（哪怕只是后台进程），新实例就无法绑定该端口，导致状态栏一直显示 “Connecting…” 或直接报错 Unable to attach to Chrome。
最简单有效的办法：Mac 上执行 killall Google\ Chrome，Windows 上任务管理器结束所有 chrome.exe 进程，然后再点 Debug。
- 如果必须保留日常 Chrome，改用
Attach to Chrome模式：手动终端启动chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug，再在 WebStorm 配置里选 Attach，URL 和 Port 严格对应 -
jetbrains-ide-support插件已废弃，Chrome 115+ 完全不用装——WebStorm 2023.3 起直连 DevTools Protocol - Vue/Vite/React CLI 启动时默认自动打开浏览器，这会干扰 WebStorm 附加。务必在
vite.config.ts里加server: { open: false }，或vue.config.js里设devServer: { open: false }
断点命中了但变量看不清？Source map 和构建配置要对得上
断点停住了，但 Variables 面板里全是 __vccOpts、proxy、target，不是你写的原始变量名——这不是 WebStorm 问题，而是构建产物没正确映射源码。
Vite 默认开发模式开启 source map，但某些插件（如 @vitejs/plugin-react-swc）可能覆盖配置；Webpack 项目则常因 devtool: 'cheap-module-eval-source-map' 导致断点位置偏移或变量名被压缩。
- 确保构建配置里
build.sourcemap = true（Vite）或devtool: 'source-map'（Webpack），且打包后能在浏览器 Network 面板看到.js.map文件返回 200 - 开发阶段禁用代码压缩和混淆：Vite 中关掉
build.minify，Webpack/Terser 中设mangle: false，否则参数变a、t，WebStorm 无法还原 - 异步回调里的变量悬停不准？右键变量 →
Evaluate Expression，输入await somePromise强制求值，比 console.log 更直接
中文界面下调试异常？重点盯住三个状态信号
中文菜单不影响功能，但容易让人忽略关键连接状态。只要以下三点有一项没满足，调试就大概率失败：
- 右下角状态栏必须显示
Debugger connected或Connected to Chrome—— 没这个，说明根本没连上 - 所调试的 HTML 或入口文件路径要是本地可访问的，比如
http://localhost:63342/project/src/main.ts；含中文路径或空格的项目名会导致 URL 解析失败，建议根目录全英文 - Chrome DevTools 里不能勾选
Disable JavaScript breakpoints（⚙️ → Preferences → Debugger）—— 这个开关一旦打开，WebStorm 断点全失效
真正麻烦的从来不是步骤多，而是 Chrome 进程、source map、调试配置这三者之间差一个字符或一个开关，就会让断点彻底失灵。调不通时，先看状态栏，再查 Network 里的 .map 文件，最后杀 Chrome——比反复重启 WebStorm 有效得多。
