Debug 'index.html' 是唯一有效入口：WebStorm 2023.3+ 已彻底移除 Live Edit 功能，仅通过右键 Debug 'index.html' 启动（非 Run 或 Open in Browser），配合 JetBrains IDE Support 插件与内置服务器（端口需严格一致）才能实现实时更新，页面顶部黄色提示条和地址栏 JB 图标为连接成功标志。
Debug 'index.html' 是唯一有效入口
WebStorm 2023.3+ 版本中，Live Edit 功能已被彻底移除，勾选 Settings → Build, Execution, Deployment → Debugger → Live Edit 里的选项已无实际作用。真正能触发实时更新的，只有 Debug 'index.html' 这一操作。
- 右键任意
index.html文件 → 选择Debug 'index.html'（不是Run，也不是Open in Browser） - 首次执行会自动启动 Chrome，地址形如
http://localhost:63342/xxx/index.html - 页面顶部出现不可关闭的黄色提示条，内容为 “JetBrains IDE Support is connected”，且地址栏右侧有 JB 图标——这是连接成功的唯一确认信号
- 关闭该提示条、手动刷新、或修改 URL 路径（比如加
?t=1），都会断开 WebSocket 连接，实时更新立即失效
JetBrains IDE Support 插件端口必须严格匹配
插件与 WebStorm 内置服务器之间靠端口通信，不一致就会静默失败：改代码毫无反应，也无任何错误提示。
- 查 WebStorm 端口：Settings → Build, Execution, Deployment → Debugger → Built-in server → 记下
Port值（默认是63342） - 查插件端口：Chrome 地址栏输入
chrome://extensions/→ 找到JetBrains IDE Support→ Details → Extension options → 只填纯数字端口号（例如63342，不能带localhost:或http://） - 如果用的是 Firefox 或 Safari，插件配置页路径不同，但同样只接受纯数字端口
Vue / SFC 项目不要依赖 Live Edit
对 .vue 文件右键选 Debug 'xxx.vue'，本质是启动 Vite dev server，而非走 WebStorm 静态代理预览链路。后者根本不解析 <style scoped></style> 或 lang="scss"。
- 确保项目根目录有
vite.config.ts，且已配css.preprocessorOptions（如scss: { additionalData: '@use "@/styles/vars.scss" as *;' }） - 禁用 WebStorm 的
Live Edit设置项，避免干扰；它对 Vue SFC 的样式块基本无效 -
<style scoped></style>修改后没反应？检查浏览器 DevTools 中元素是否带data-v-xxxxxx属性，再回 WebStorm 搜索该 hash 值定位规则 - 临时删掉
scoped属性测试样式是否生效，确认后再加回——这是最直接的验证方式
别被“Open in Browser”和“Live Server 插件”误导
这两者都能打开页面，但都不提供 WebStorm 原生的实时编辑能力。它们各自适用场景不同，混用反而增加排查成本。
-
Open in Browser直接走file://协议，不经过内置服务器，无法建立 WebSocket，改代码后必须手动刷新 -
Live Server插件（需手动安装）启动的是独立 HTTP 服务（如http://127.0.0.1:5500），与 WebStorm 调试机制无关，也不触发JetBrains IDE Support连接 - 若你用的是 UniApp、React、Storybook 等框架项目，应优先走对应 CLI 启动（如
npm run serve或start-storybook），再用 WebStorm 的npm运行配置接管，而不是强行套用 HTML Debug 流程
Debug 启动、插件端口对齐、Vue 类项目绕过 WebStorm 静态预览。其他所有“开启 Live Edit”的设置项，在当前版本里只是视觉残留。 
