WebStorm 连不上 Chrome 主因是调试通道未打通，需手动启动带 --remote-debugging-port=9222 的专用 Chrome 实例，WebStorm 用 “Attach to Chrome” 模式连接，并确保 source map 路径映射正确。
WebStorm 连不上 Chrome，90% 是因为调试通道没打通——不是插件没装，而是 Chrome 实例、端口、URL 三者没对齐。关键不在“怎么配”，而在“谁连谁、连哪、凭什么连上”。
Chrome 启动必须带 --remote-debugging-port=9222
WebStorm 默认不启动 Chrome，它只“附加”（Attach）到一个已启用远程调试协议的实例。如果你平时开着 Chrome，它默认不监听调试端口；WebStorm 启动的新窗口又用临时 profile，插件和权限常被拦截。
- 关掉所有 Chrome 窗口（包括后台进程，任务管理器里检查 chrome.exe 是否还活着）
- 手动用命令行启动专用调试实例：
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir="C:\temp\chrome_debug"（macOS/Linux 路径和引号略有不同） - 别用无痕模式，除非你明确在扩展设置里勾选了“允许在无痕模式下运行”
- 新版 Chrome（115+）已弃用
JetBrains IDE Support插件，WebStorm 2023.3+ 直接走 Chrome DevTools Protocol，插件装了也无效
JavaScript Debug 配置选 “Attach to Chrome”，不是 “Launch”
“Launch” 模式会让 WebStorm 自己拉起 Chrome，但容易和日常浏览器冲突、无法复用已有 tab、source map 映射常错位。真要稳定调试，一律用 “Attach”。
- Run → Edit Configurations → + → JavaScript Debug → Attach to Node.js/Chrome
- Port 填
9222（必须和你命令行启动时的--remote-debugging-port完全一致） - URL 填你项目实际地址，比如
http://localhost:5173/（Vite）、http://localhost:3000/（CRA），不能写成http://localhost:63342（那是 WebStorm 内置服务端口，无关） - URL 末尾带斜杠，不加具体文件名（如
/index.html），否则 source map 路径解析可能失败
Vue/React 项目必须禁用自动打开浏览器
Vue CLI 和 Vite 默认启动时会用系统默认浏览器打开页面——这个“默认浏览器”几乎从来不是你那个带 --remote-debugging-port 的专用 Chrome 实例，导致 WebStorm 附加失败、断点不命中。
立即学习“前端免费学习笔记（深入）”；
- Vue CLI：在
vue.config.js加devServer: { open: false } - Vite：在
vite.config.ts的server里设open: false - 改完必须重启开发服务器（
npm run dev或npm run serve），否则配置不生效 - 之后手动在调试专用 Chrome 里访问你填的 URL，再点 WebStorm 的 Debug 按钮
断点不触发？先盯住 source map 和路径映射
断点灰掉、红点打了却不停、停在 proxy handler 里——大概率是 source map 没生成，或 WebStorm 不知道浏览器里的 webpack:///src/App.vue 对应你本地哪个文件夹。
- Vue CLI：确认
vue.config.js没覆盖devtool，开发模式下应为'source-map'或'eval-source-map' - Vite：默认已开
build.sourcemap: true，但开发时也要看终端输出是否有✓ built in xxx ms和 sourcemap 提示 - WebStorm 中：File → Settings → Languages & Frameworks → JavaScript → Source Maps，勾选
Enable source maps，并确认Remote URL填的是webpack:///src（不是http://...，也不是/src） - 如果用了
@/别名，额外加一条映射：Local path填src/components，Remote URL填webpack:///@/components
最常被忽略的一点：WebStorm 的 “Attach to Chrome” 不会帮你打开页面，它只连上已存在的调试目标。你得自己确保 Chrome 已加载对应 URL，且该页面的 JS 确实加载了带 sourcemap 的 bundle——否则断点只是摆设。
