webstorm 2023.3+ 已彻底移除 live edit，唯一官方支持的实时预览方式是 debug 'index.html' 启动，依赖内置服务器（默认端口63342）、jetbrains ide support 插件及 websocket 连接协同工作。
WebStorm 2023.3 及之后版本已彻底移除 Live Edit 功能，所谓“配置本地服务器预览网页”，本质是选对启动方式 + 确保通信链路通——不是所有“打开 HTML”的操作都走服务器，只有特定路径才触发实时更新。
Debug 'index.html' 是唯一能触发热替换的入口
普通右键 Open in Browser 或点击编辑器右上角绿色三角形，走的是 file:// 协议或独立 HTTP 服务（如 Live Server 插件），它们不经过 WebStorm 调试通道，改代码不会自动刷新 DOM/CSS。
-
Debug 'index.html'启动时，WebStorm 会拉起内置服务器（默认localhost:63342），并建立 WebSocket 连接 - 浏览器地址必须含端口号
:63342，且来自 WebStorm 自动弹出窗口，手动输入或刷新会断连 - 页面顶部出现不可关闭的黄色提示条 “JetBrains IDE Support is connected”，才是连接成功标志
- 一旦关闭该提示条，连接即失效，需重新执行
Debug 'index.html'
JetBrains IDE Support 插件端口必须与 WebStorm 严格一致
插件默认监听 localhost:63342，但如果你在 Settings → Build, Execution, Deployment → Debugger → Built-in server 中改过端口（比如设为 8080），插件配置没同步就会静默失败——无报错、无提示、改代码毫无反应。
- 检查 WebStorm 端口：进入设置，记下
Built-in server的Port值 - 检查插件端口：Chrome 地址栏输入
chrome://extensions/→ 找到JetBrains IDE Support→Details→Extension options→ 填入**纯数字端口号**（例如8080，不能填http://127.0.0.1:8080） - 公司网络若限制本地端口，需确保该端口未被防火墙拦截
用 Deployment 配置实现局域网设备访问（如手机预览）
想让手机或同事电脑访问你的页面，不能只靠 Debug 模式——它默认只绑定 localhost，外部无法连接。必须启用外部访问并配好映射。
- 在
Settings → Build, Execution, Deployment → Debugger → Built-in server中勾选Can accept external connections，并修改端口（如8080） - 进入
Settings → Build, Execution, Deployment → Deployment→ 添加Local or mounted folder类型服务器 -
Connection → Folder填项目根路径（如/path/to/your/project） -
Connection → Web server root URL填http://[你的本机IP]:8080（用ipconfig或ifconfig查 IP） -
Mappings → Local path和Web path on server保持一致（如都为/或/src）
最容易被忽略的一点：所谓“本地服务器”在 WebStorm 里其实分三类——Debug 启动的调试服务器（带 WebSocket）、Deployment 配置的部署映射（用于上传或局域网访问）、以及第三方插件（如 Live Server）启动的独立服务。它们互不干扰，也互不兼容。选错入口，就等于没走对门。
