WebStorm运行配置错误是启动失败、断点失效和配置重置的主因：必须手动创建对应类型配置（如npm run dev或JavaScript Debug），确保Working directory为项目根目录、URL与实际访问地址一致，并启用sourceMap及“Ensure breakpoints are hit on page load”等关键开关。
WebStorm 启动项目失败、调试断点不生效、运行配置反复重置——这些问题几乎都卡在「运行/调试配置」这一层，而不是代码本身。
为什么新建项目后 Run 按钮是灰色的？
根本原因：WebStorm 没识别出可执行入口，或没创建任何运行配置。
- Vue/React/Vite 项目：必须手动创建
npm run dev类型的Node.js或npm配置，不能依赖“自动检测” - 纯 HTML/JS 项目：需创建
JavaScript 调试配置，并填对URL（如http://localhost:63342/my-project/index.html） - 右下角状态栏若显示
No configuration，说明当前无有效运行配置，点击它可快速跳转到Run | Edit Configurations - 临时配置最多只保留 5 个，删旧的再建新的，别指望它自动记住你上周配过的
bin/www
Node.js 运行配置里 Node interpreter 和 Working directory 哪个更重要？
Working directory 错了，package.json 找不到；Node interpreter 错了，连 node 命令都执行不了——但前者更容易被忽略。
-
Node interpreter推荐选Project default（即你在Settings | Languages & Frameworks | Node.js and NPM里设的路径），避免硬编码本地绝对路径 -
Working directory必须设为项目根目录（不是src，也不是dist），否则npm run dev会报Cannot find module 'package.json' -
JavaScript file字段在 Vite 项目中通常留空，靠Application parameters填run dev；但在 Express 项目中必须填bin/www这类启动文件 - 如果用了
pnpm或yarn，不要在Node.js配置里硬写pnpm run dev，改用npm类型配置更稳定
调试时断点不命中，常见被忽略的三个开关
断点灰掉、跳过、或提示 Source map not found，大概率不是代码问题，而是配置漏关了某项。
- Vue/TS 项目务必检查
tsconfig.json中"sourceMap": true和"inlineSources": true是否启用 - 在
JavaScript 调试配置里，勾选Ensure breakpoints are hit on page load——否则页面 JS 在 DOM 加载前就执行完了，断点永远不触发 - 如果是本地开发服务器（如 Vite 默认的
localhost:5173），URL字段必须和浏览器实际访问地址完全一致，包括端口；WebStorm 内置服务器端口默认是63342，别混用
永久配置 vs 临时配置：什么时候该点“Save Configuration”？
临时配置图标半透明，关 IDE 就丢；永久配置存进 .idea/runConfigurations/，但共享时容易引发路径冲突。
- 团队协作项目：把配置存为项目文件（勾选
Store as project file），但要确保.idea/runConfigurations/不被.gitignore排除 - 本地实验性脚本：用临时配置更快，右键菜单选
Run <file>即生成，不用进对话框 - 一旦点了
Save Configuration，图标变实心，但名字还是Unnamed——立刻改名，否则多人协作时一堆Unnamed配置根本分不清谁是谁的 - 删除配置别只删列表项：右键配置 →
Delete，或进.idea/runConfigurations/手动删 XML 文件，否则残留配置可能干扰新配置创建
最麻烦的不是配错哪一项，而是改完一个参数后没点 OK 或 Apply 就直接点运行——WebStorm 不会自动保存，所有改动当场作废。
