WebStorm 连不上 Chrome 的核心原因是调试通道未打通，需手动启动带 --remote-debugging-port=9222 的专用 Chrome 实例，WebStorm 仅 Attach 而非 Launch，并确保端口、URL（与开发服务器完全一致）、source map 路径三者严格匹配。
WebStorm 连不上 Chrome，90% 是因为调试通道没打通——不是插件没装、也不是 URL 填错，而是 Chrome 实例、端口、开发服务器三者没对齐。关键不在“怎么配”，而在“谁连谁、连哪、凭什么连上”。
Chrome 必须手动启动带 --remote-debugging-port=9222 的专用实例
WebStorm 默认不启动 Chrome，它只“附加”（Attach）到一个已启用远程调试协议的实例。日常开着的 Chrome 不监听调试端口；WebStorm 自己拉起的新窗口又用临时 profile，常被拦截或缺失扩展。
- 关掉所有 Chrome 窗口，包括任务管理器里的
chrome.exe进程（Windows）或活动监视器里的 Chrome（macOS） - 用命令行启动专用调试实例：
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir="C:\temp\chrome_debug"（Windows）/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome_debug（macOS） - 别用无痕模式，除非你明确在插件设置里勾选了“允许在无痕模式下运行”
- 新版 Chrome（115+）已弃用
JetBrains IDE Support插件，装了也无效；WebStorm 2023.3+ 直接走 Chrome DevTools Protocol 原生通信
WebStorm 配置必须选 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或vite.config.js的server里设open: false - 改完必须重启开发服务器（
npm run dev或npm run serve），否则配置不生效 - 之后手动在调试专用 Chrome 里访问你填的
URL，页面空白没关系——WebStorm 只需能连上调试上下文
URL 必须与开发服务器输出的地址完全一致
WebStorm 的 URL 字段不是“随便写个能打开的地址”，它是源码映射（source map）定位的唯一依据。路径不匹配，断点就打不中——哪怕只差一个斜杠或前缀。
- 看终端里
npm run dev启动后输出的Local:行，完整复制过来（例如http://localhost:5173/） - 如果 Vue Router 配置了
base: '/admin/'，URL 就得是http://localhost:5173/admin/ - 如果后端用 Nginx 托管前端资源，实际访问地址是
http://localhost:8080/my-app/，URL 就不能漏掉/my-app/ - 确认开发服务器没被代理重写路径，否则 source map 中的
sources字段和本地文件路径对不上，断点会停在空行或webpack://协议下
最常被忽略的是：调试专用 Chrome 实例必须全程保持运行，且不能被其他工具（比如 VS Code 的 Live Server、Postman 的内置浏览器）意外占用 9222 端口；一旦端口被占，WebStorm 会静默失败，不会报错提示。
