live edit 功能必须手动开启且需满足多项条件才能生效：启用设置中的两个开关、确保插件端口与ide一致、通过debug模式启动页面；js更新不受热替换支持，仅html/css实时生效。
Live Edit 功能必须手动开启，否则改代码不触发刷新
WebStorm 的 Live Edit 默认是关闭的，哪怕你装了插件、配好了 Chrome 路径，只要没在设置里勾选，编辑器根本不会向浏览器推送变更。这不是“自动生效”的功能，而是明确开关控制的调试通道。
操作路径：Ctrl + Alt + S → Build, Execution, Deployment → Debugger → Live Edit，确认以下两项已启用：
-
Enable live editing（核心开关） -
Update application in Chrome（或对应你用的浏览器）
注意：Auto update (ms) 值建议设为 500 或 1000，太小可能因频繁触发导致卡顿，太大又感知不到实时性。
JetBrains IDE Support 插件必须匹配 WebStorm 端口，且不能禁用黄色提示条
插件不是装上就完事——它需要知道 WebStorm 内置服务器监听哪个端口，默认是 63342，但如果你改过（比如在 Settings → Build, Execution, Deployment → Debugger → Built-in server port），插件也得同步。否则连接失败，页面静默不动。
打开插件弹窗（点击地址栏 JB 图标 → Options），检查 Host 和 Port 是否与 WebStorm 设置一致。常见错误现象：
- 修改 HTML/CSS 后无反应，但 JS 变更能打印日志 → 插件连上了，但 Live Edit 未启用或只对部分类型生效
- 插件图标变灰 / 显示 “Disconnected” → 端口不匹配或 WebStorm 内置服务未启动（重启 IDE 通常可恢复）
- 浏览器顶部出现黄色横幅提示 → 这是插件正在工作，关闭它等于切断通信链路
必须用 Debug 模式启动页面，View in Browser 不触发 Live Edit
Right-click → View in Browser 只是普通 HTTP 请求，走的是静态文件服务，不经过 Live Edit 通道；而 Debug 'index.html' 才会启动调试会话，建立 WebSocket 连接，让编辑器和浏览器双向通信。
验证方式：启动后看 WebStorm 底部状态栏是否显示 Debug running...，同时浏览器控制台应有类似 [JetBrains IDE Support] Connected to WebStorm 的日志。若没有，说明没走 Debug 流程。
常见误区：
- 以为右键菜单里选 Chrome 就够了 → 实际要选
Debug 'xxx.html'，不是Open in Chrome - 配置了多个浏览器但默认打开的是非 Debug 模式 → 检查右键菜单中 Debug 项是否可用，不可用说明项目没识别为 Web 类型（需确保项目根目录含
index.html或已配置为 Web Module）
JS 修改不刷新？Live Edit 对脚本更新有硬限制
Live Edit 主要针对 HTML 结构和 CSS 样式做 DOM 热替换，对 JavaScript 的处理非常保守：它不会重执行整个 <script></script> 块，也不会重新绑定事件监听器。所以你改了 JS 逻辑，页面视觉上大概率没变化，除非触发了明确的 DOM 更新语句（如 document.body.innerHTML = ...）。
这不是 bug，是设计取舍。真正想调试 JS 行为，应该：
- 用 WebStorm 的断点调试（
F9打断点 →Debug启动） - 配合浏览器 DevTools 查看 console 输出和调用栈
- 如果必须实时看 JS 效果，改用
browser-sync或webpack-dev-server配合 HMR，它们对 JS 模块更新支持更完整
最后提醒一句：Live Edit 的稳定性高度依赖 WebStorm 版本和插件版本匹配。2026 年最新版（如 2026.1）已将部分逻辑迁移到新协议，旧版插件（如 2.0.7）可能无法握手成功——务必从 Chrome Web Store 安装最新版 JetBrains IDE Support，不要手动拖 crx 文件。
