WebStorm调试成功依赖三步精准落点：启用JavaScript Debugger插件、选择JavaScript Debug配置类型、通过内置服务器URL（如http://localhost:63342/）访问HTML文件；缺一不可，否则断点静默失效。
WebStorm 调试能跑通，不靠“设置全开”，而靠三步精准落点：启用插件、选对配置类型、走对访问路径。其他操作都是锦上添花，这三点漏掉任意一个，断点就静默失效。
确认 JavaScript Debugger 插件已启用
这是调试器的底层依赖，不是可选项。插件未启用时，JavaScript Debug 配置类型根本不会出现在新建列表里，但界面不会报错，只会让你反复找不着入口。
- 按
Ctrl Alt S打开设置 →Plugins→ 切换到Installed标签页 - 搜索
JavaScript Debugger，确保其右侧开关为开启状态（不是灰色禁用） - 如果没找到，说明插件被手动禁用或损坏，需点击
Marketplace重新安装
必须使用 JavaScript Debug 类型配置，而非 Node.js 或 npm
前端调试和后端执行是两套逻辑。选错类型会导致 WebStorm 尝试用 Node.js 解释器去加载 HTML 文件，直接抛出 Uncaught SyntaxError: Cannot use import statement outside a module，且断点永远灰色不可用。
- 运行配置创建入口：
Run | Edit Configurations…→ 点击左上角+→ 选择JavaScript Debug - 在
URL字段填入项目内可访问的地址，例如http://localhost:63342/my-project/index.html（注意不是file://协议） - 不要用
npm类型去跑vite dev—— 它能启动服务，但调试会话无法注入源码映射；也不要选Node.js去打开 HTML —— 这根本不是它的职责
确保文件通过 WebStorm 内置服务器访问
WebStorm 调试只认自己起的服务，不支持双击 HTML 或拖进浏览器直接打开。路径含中文、空格、或用了非默认端口但未同步配置，都会导致 Debugger 连接失败，右下角不显示 Debugger connected。
- 项目根目录名建议全英文、无空格（如
my-vue-app，避免我的项目） - 检查内置服务器端口是否被占用：设置 →
Tools | Web Browsers and Preview→Built-in server port，默认63342，冲突时可改为63343等 - HTML 文件必须放在项目内，且 URL 中的路径要与实际目录结构严格一致；若用 Vite，务必访问
http://localhost:5173/（Vite 自带服务），而非http://localhost:63342/（WebStorm 内置服务）—— 二者不能混用
真正卡住人的从来不是功能缺失，而是调试请求发出去了，却压根没走到 WebStorm 的调试管道里。确认那三个硬性条件之后，再谈 sourcemap、Vue SFC 支持、Chrome 插件这些延伸配置才有意义。
