Debug 'index.html' 是唯一能触发热替换的入口；WebStorm 2023.3+ 已彻底移除 Live Edit，仅 Debug 模式通过内置服务器（默认63342端口）与 JetBrains IDE Support 插件建立 WebSocket 连接，实现 DOM/CSS 局部热更新，其他方式如 Open in Browser 或 Live Server 均不参与该调试链路。
Debug 'index.html' 是唯一能触发热替换的入口
WebStorm 2023.3 及之后版本已彻底移除 Live Edit，所谓“实时预览”只在 Debug 模式下成立。普通右键 Open in Browser 或点击编辑器右上角绿色三角形，走的是 file:// 协议或第三方服务（如 Live Server），它们不经过 WebStorm 调试通道——改代码不会触发 DOM/CSS 热替换。
必须右键 HTML 文件 → 选择 Debug 'index.html'（注意不是 Run）。成功后浏览器会自动打开，地址含端口号（如 http://localhost:63342/project/index.html），页面顶部出现不可关闭的黄色提示条 JetBrains IDE Support is connected，这才是连接有效的唯一信号。
- 关闭该提示条、手动刷新、或重新输入地址，连接立即中断，热替换失效
- WebStorm 默认端口是
63342，但若你在Settings → Build, Execution, Deployment → Debugger → Built-in server中改过Port值，插件端口必须同步更新 - Chrome 扩展页
chrome://extensions/→ 找到JetBrains IDE Support→Extension options→ 填入**纯数字端口号**（例如8080，不能带http://或localhost:）
Live Server 插件适合静态刷新，不参与 WebStorm 调试链路
如果你只需要保存即刷新、不依赖 DOM 热替换（比如改完 HTML 就整页重载），Live Server 插件更轻量、更稳定。它启动的是独立 HTTP 服务（默认 http://127.0.0.1:5500），能正确解析相对路径、AJAX 请求和模块导入，且不受 WebStorm 端口配置影响。
- 安装后右键 HTML →
Start Live Server，页面即打开；保存文件自动刷新 - 它不依赖
JetBrains IDE Support插件，也不需要调试会话，适合快速验证结构、样式或 JS 行为 - 缺点：无法实现 CSS/HTML 的局部热替换（比如改一个 class 名，DOM 不重绘，只刷新整个页面）
- 与 Debug 模式互斥——同一页面不能同时走两个服务器，切勿混用
端口不通、插件无响应？先确认这三件事
90% 的“改了没反应”问题，根源不在代码，而在通信链路断裂。静默失败是常态，没有错误弹窗，只有页面毫无变化。
-
JetBrains IDE Support插件是否启用？图标灰色 = 已禁用，需手动启用 - 当前浏览器标签页是否由 WebStorm 自动弹出？手动输入
localhost:63342地址 ≠ 连接成功 - 黄色提示条是否被误点关闭？一旦消失，WebSocket 连接已断，必须重新执行
Debug 'index.html' - 公司网络或防火墙是否拦截了内置服务器端口？可临时换为
8080测试
想让手机或同事访问你的页面？Debug 模式不行，得配 Deployment
Debug 'index.html' 默认只绑定 localhost，外部设备无法连接。要实现局域网预览（比如手机扫码看效果），必须启用外部访问并配置映射，且不能依赖 Debug 模式本身。
- 在
Settings → Build, Execution, Deployment → Debugger → Built-in server中勾选Can accept external connections，并设一个可用端口（如8080） - 进入
Settings → Build, Execution, Deployment → Deployment→ 添加Local or mounted folder类型服务器 -
Connection → Folder填项目根路径（如/Users/me/project） -
Connection → Web server root URL填http://[你的本机IP]:8080（用ifconfig或ipconfig查 IP） -
Mappings → Local path和Web path on server保持一致（如都填/）
最易忽略的一点：WebStorm 的“本地服务器”本质是两套机制——Debug 模式走 WebSocket 热替换，Deployment 配置走 HTTP 静态服务。它们共用端口但不共享状态，切勿以为开了 Debug 就能直接手机访问。
