PhpStorm 无原生“一键打开浏览器并自动刷新”功能，需配置内置 JavaScript Debug 服务器、标记 Sources Root、安装 JetBrains IDE Support 插件，并严格按 http://localhost:63342/项目名/index.html 格式启动调试会话方可实现 Live Edit 实时注入更新。
PhpStorm 本身不提供“一键打开浏览器并自动刷新”的原生能力——所谓“直接运行”，本质是让内置服务器响应请求，再通过正确协议加载页面。漏掉任一环节，就只能看到空白页、404 或 file:// 协议报错。
为什么右键没有 Run 或 Open in Browser 选项
常见错误现象：Run 菜单项缺失、Show Page in Browser 灰掉、右键只有 Open in Browser 但点击无反应。
- 文件未被识别为 HTML：右键
index.html→Override File Type→ 必须选HTML，不能是Text或Plain Text - 项目根目录未标记为 Sources Root：在项目视图中右键主文件夹 →
Mark Directory as→Sources Root（图标变蓝地球），否则内置服务器拒绝服务 - Web Browsers 设置未启用：进入
Settings → Tools → Web Browsers，至少勾选一个已安装浏览器，并设为默认
配置 JavaScript Debug 启动内置服务器
这是让 index.html 走 http://localhost:63342/ 的唯一可靠方式，不是独立服务，而是调试会话挂载的轻量 HTTP 代理。
- 菜单栏
Run → Edit Configurations…→ 左上角+→Templates → JavaScript Debug - URL 填写必须严格匹配：
http://localhost:63342/your-project-name/index.html，其中your-project-name是项目根目录名，大小写敏感，不能有空格或中文 - 名称建议改为
index.html (debug)，保存后右键文件就能看到该运行项 - 首次运行必须用
Debug 'index.html (debug)'（不是 Run），否则 Live Edit 不生效
Live Edit 实时更新但只对前端文件有效
Live Edit 不是刷新页面，而是把变更注入 DOM，保留 JS 执行状态——但它完全不处理 PHP、后端逻辑或任何服务端文件。
立即学习“PHP免费学习笔记（深入）”；
- 必须安装官方
JetBrains IDE Support浏览器插件（Chrome Web Store 官方发布，非第三方同名） - 修改
<div>、class、内联style、CSS 文件，保存即生效；JS 函数体可能热替换，但const、闭包变量不会更新 - 改完没反应？检查浏览器地址栏是否仍是
http://localhost:63342/...—— 如果跳成file://或其他域名，连接已断，需重启 Debug 会话 -
fetch('./data.json')能工作，但fetch('/api/users')会 404，因为内置服务器不代理根路径，只服务已标记目录下的静态资源
最容易被忽略的是：即使所有配置都对，只要 index.html 不在 Sources Root 目录下（比如放在 src/ 子目录却没标记该子目录），服务器就返回空响应——此时浏览器看似打开了，实际加载的是无效响应，控制台也无报错，纯靠检查 URL 协议和网络面板才能定位。
