JetBrains IDE Support 插件必须启用且端口与WebStorm Debugger一致（默认63342），devtool需设为source-map，须先启动dev server再运行JavaScript Debug配置，并仅在WebStorm启动的隔离Chrome实例中生效。
JetBrains IDE Support 插件必须启用且端口匹配
WebStorm 和 Chrome 之间的调试通道依赖插件主动连接，不是“装了就能用”。关键在于 JetBrains IDE Support 插件的监听端口必须和 WebStorm 的 Debugger 端口完全一致——默认是 63342，但如果你改过 WebStorm 的 Debugger 设置（比如为了避开端口冲突），就必须同步改插件配置。
常见错误现象：断点灰色不可用、点击后无响应、Console 显示 Cannot connect to JetBrains IDE Support。
实操建议：
- 在 Chrome 地址栏输入
chrome://extensions，找到JetBrains IDE Support，点击「详情」→「扩展程序选项」→ 填入与 WebStorm 完全一致的端口号 - WebStorm 中确认路径：
Settings → Build, Execution, Deployment → Debugger → JavaScript → Port - 插件启用状态必须是「开启」，且不能被浏览器策略（如企业策略或某些安全插件）禁用
devtool 必须设为 source-map，cheap-module-eval-source-map 不可靠
Vue CLI 项目默认的 devtool: 'cheap-module-eval-source-map' 在 WebStorm 调试中大概率导致断点失效或跳转错位，尤其在 .vue 单文件组件里。真正能稳定映射源码行号的是 source-map。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- Vue CLI 3+ 项目：修改
vue.config.js，添加configureWebpack: { devtool: 'source-map' } - Vue CLI 2 项目（webpack 3）：修改
config/index.js中dev.devtool字段，取消注释并设为'source-map' - 不要用
eval-source-map或cheap-source-map，前者无物理 map 文件，后者缺失列信息，WebStorm 无法精确定位
必须先启动 dev server，再启动 JavaScript Debug 配置
WebStorm 的 JavaScript Debug 不会自动拉起 webpack-dev-server；它只负责建立 Chrome 调试协议连接。如果 server 没跑，打开的 Chrome 页面会直接报 404 或空白，断点永远不会触发。
实操建议：
- 终端先执行
npm run serve（或npm run dev），确认控制台输出类似App running at: http://localhost:8080/ - WebStorm 中新建
JavaScript Debug配置，URL必须填 server 实际地址（如http://localhost:8080），不能写127.0.0.1或带 path 的完整 URL（除非你明确配了 history fallback） - 可选优化：在 Debug 配置的
Before launch里加一个npmTask，命令设为run serve，避免手动切窗口
断点只能在 WebStorm 自动打开的 Chrome 实例中生效
WebStorm 启动 JavaScript Debug 时，会强制用新用户数据目录启动 Chrome 进程（带 --remote-debugging-port=9222 --user-data-dir=... 参数）。这个进程和你日常用的 Chrome 完全隔离——书签、插件、登录态全无，但它是唯一能与 WebStorm 通信的实例。
常见误解：在自己常用的 Chrome 里打开 http://localhost:8080 并点击按钮，断点不会停。
实操建议：
- 务必在 WebStorm 弹出的新 Chrome 窗口中操作（标题栏通常显示「Chrome (WebStorm Debug)」或无书签栏）
- 如需保留插件或登录态，可在 WebStorm 的 Debug 配置中设置
Browser → Use custom Chrome user data directory，指向一个你导出过的干净 profile 目录 - 不要关闭该窗口再重开——每次 Debug 启动都会生成新临时目录，旧窗口无法复用
