WebStorm 不自动生成 SPA，需手动编码；新建项目应选 Empty Project；双击打开 HTML 有跨域限制，IDE 启动 HTTP 服务无此问题；建议关闭 HTML Live Templates 干扰；调试需结合 Network 和 Elements 面板。
WebStorm 本身不“制作”网页，它只是帮你高效写 HTML/CSS/JS 并快速预览——真正生成单页面效果靠的是你写的代码逻辑，不是 IDE 自动合成。别指望点几下就出 SPA，但用对方式，开发体验确实比记事本强一个量级。
新建空项目时选错模板会卡死后续流程
WebStorm 的 New Project 对话框里，如果误选了 React、Vue 或 Angular 模板，IDE 会自动拉取大量依赖、生成配置文件（如 webpack.config.js、package.json），哪怕你只想写一个 index.html。这会导致：
- 首次加载慢，Node.js 进程常驻占用内存
-
index.html里直接写<script>alert(1)</script>可能被 HMR（热更新）拦截，不生效 - 右上角浏览器图标点击后打开的页面路径带了
/index.html#/这类路由前缀，纯静态页根本不需要
✅ 正确做法：在 New Project 左侧明确选 Empty Project，右侧只填项目名和路径，其他全留空。之后手动在项目根目录或 basic 子目录里右键 → New → HTML File，文件名写 index 即可。
直接双击 HTML 文件打开 vs 点击右上角浏览器图标，行为完全不同
这是新手最常混淆的点。两种方式底层加载机制不同：
- 资源管理器里双击
index.html：走的是file://协议，所有 AJAX 请求、fetch、importES 模块都会因跨域被浏览器拒绝（报错CORS policy: The request client is not a secure context） - WebStorm 右上角点击 Chrome/Firefox 图标：IDE 启动一个本地 HTTP 服务（默认端口如
http://localhost:63342/your-project/index.html），协议是http://，无跨域限制，JS 能正常发请求、读本地 JSON
⚠️ 容易踩的坑：fetch('./data.json') 在双击模式下必失败，但点图标就能通——别急着改代码，先确认你用的是哪种打开方式。
写单页面时禁用 WebStorm 的 Live Templates 干扰
WebStorm 默认给 .html 文件启用了大量 Live Templates（比如输入 html 回车自动生成完整 HTML5 结构），这在写简单页面时很顺手，但一旦你要做单页路由（如用 history.pushState + hashchange），这些模板可能悄悄插入你不想要的 <head> 内容或 <body> 结构，导致样式错乱或 JS 执行异常。
✅ 建议关掉干扰项：
- 进入
Settings | Editor | Live Templates - 找到
HTML模板组，把html5、html这类高频触发项的勾去掉 - 保留
div、img等单标签模板，够用不啰嗦
改完后新建 HTML 文件，只会生成干净的 <!DOCTYPE html><html><head></head><body></body></html>，其余全由你控制。
调试单页面 JS 时别只看 Console，要盯住 Network 和 Elements
单页面应用的核心是 DOM 动态替换，光看 console.log 很难定位问题。WebStorm 集成的 Chrome 调试器必须配合浏览器 DevTools 使用：
- 在 WebStorm 里设断点 → 点右上角 Chrome 图标启动 → 切到浏览器按
F12打开 DevTools - 切到
Network标签：检查 AJAX 是否发出、状态码是否 200、响应体是不是预期 JSON（尤其注意 mock 数据路径是否写错） - 切到
Elements标签：右键 DOM 节点 →Break on > subtree modifications，DOM 被 JS 修改时会自动断在对应 JS 行
很多“页面没更新”问题，其实不是 JS 逻辑错，而是你用 innerHTML 替换了整个 <div id="app">，但新内容里的 <script> 标签根本没执行——这种细节，Console 里根本不会报错，只有 Elements 里能看到 script 标签被干掉了。
