WebStorm运行失败和断点不生效的根本原因是运行配置错误：Vue/React/Vite项目须手动创建npm类型配置（Scripts填dev、Working directory为项目根目录），纯静态项目需用JavaScript Debug配置并填对URL（如http://localhost:63342/...），且必须勾选“Ensure breakpoints are hit on page load”、启用sourceMap、确保URL与实际服务端口完全一致。
WebStorm 本身不“制作网页”，它只负责启动服务、映射 URL、加载调试器——真正决定网页能否跑起来的，是运行配置是否匹配项目实际启动方式。绝大多数“点 Run 按钮没反应”“断点不命中”“双击 HTML 打不开浏览器”的问题，都出在配置层，而非代码。
Run 按钮灰色或无法启动服务
根本原因是 WebStorm 没识别到可执行入口，也没创建任何有效运行配置。它不会自动猜你用的是 vite 还是 npm run dev，更不会替你读 package.json。
- Vue/React/Vite 项目：必须手动创建
npm类型配置，Scripts填dev（不是start或serve），Working directory必须设为项目根目录（即含package.json的那层） - 纯静态 HTML/JS 项目：不能用 npm 配置，得选
JavaScript Debug，URL填完整地址，例如http://localhost:63342/my-project/index.html（端口固定为 63342，除非你改过内置服务器设置） - 右下角状态栏显示
No configuration？点击它，直接跳转到Run | Edit Configurations创建 - 临时配置最多保留 5 个，旧的会被自动顶掉；想长期用，一定要点齿轮图标 →
Save Configuration，并命名如dev-vite
断点灰掉、跳过或提示 Source map not found
这不是代码写错了，而是调试链路断在了三处关键开关上。WebStorm 默认不开启它们，必须手动勾选。
-
JavaScript Debug配置里，务必勾选Ensure breakpoints are hit on page load——否则 JS 在 DOM 加载前就执行完了，断点永远等不到时机 - Vue/TS 项目，检查
tsconfig.json是否有"sourceMap": true和"inlineSources": true；Vite 项目还需确认vite.config.ts中build.sourcemap设为true - URL 字段必须和浏览器实际访问地址**完全一致**：Vite 默认是
http://localhost:5173，你就不能填63342；WebStorm 内置服务器是63342，你就不能填5173
双击 index.html 不开浏览器，只在编辑器里打开
这是 WebStorm 的默认行为：它把 HTML 当作纯文本文件处理，而不是 Web 资源。要让它走 HTTP 服务，就得告诉 IDE “这个文件该映射到哪个 URL”。
- 进
Settings | Build, Execution, Deployment | Deployment，添加Local or mounted folder类型配置 -
Folder填项目根路径（如/home/user/my-site），Web server URL填http://localhost:63342/my-site - 再右键
index.html→Open in Browser，这时才真正触发本地 HTTP 服务，JS/CSS 才能正常加载 - 别依赖“双击打开”——那是文件管理器行为，不是 WebStorm 的预览逻辑
Node.js 启动报错 Cannot find module 'package.json'
90% 是 Working directory 设错了。WebStorm 启动时会在这个目录下找 package.json，如果设成 src 或 dist，自然找不到。
-
Working directory必须是项目根目录（和package.json同级），不是子目录 -
Node interpreter推荐选Project default（在Settings | Languages & Frameworks | Node.js and NPM里设好），避免硬写绝对路径导致换机器失效 - 如果用了
pnpm或yarn，不要在Node.js配置里手动写pnpm run dev；改用npm类型配置，package manager下拉选对应工具更稳定 - Windows 下中文乱码？在
Node options里加--inspect --no-warnings，再在Before launch里加Run External tool：命令填cmd，参数填/c chcp 65001 > nul
最常被忽略的其实是 Working directory 和 URL 的严格一致性——一个差一级目录，一个端口对不上，整个调试链路就断了。WebStorm 不会报错提醒你“URL 和服务不匹配”，它只会安静地让你的断点失效。
