PhpStorm没有真正内置浏览器，所谓“内置预览”仅为轻量渲染器，不支持现代CSS特性；可靠预览需用Alt+F2/⌘+F2通过本地HTTP服务（http://localhost:63342/）在真实浏览器中打开，且文件类型须设为HTML、项目含.idea目录。
PhpStorm里根本没有“内置浏览器”
别被名字骗了——PhpStorm 没有真正意义上的内置浏览器，所谓“内置预览”只是个轻量渲染器，不跑 Blink/WebKit，不支持 flex、@media、sticky、CSS 变量计算，连伪元素都可能不显示。你看到的不是用户看到的，调试布局时它只会误导你。
Open in Browser 的快捷键是 Alt+F2（Windows/Linux）或 ⌘+F2（macOS）
这是最常用、也最可靠的预览方式，本质是启动本地 HTTP 服务（http://localhost:63342/），再用真实浏览器打开。前提是：
- 当前文件类型必须是
HTML（右键 → Override File Type → HTML；若显示为 Text 或 Plain Text，快捷键会失效） - 项目根目录下至少有一个
.idea文件夹（由 PhpStorm 自动创建，删了就没了服务） - 没启用 Live Edit 时，改完代码必须手动刷新（F5 / ⌘+R）
- 如果弹出的是
file://路径，说明服务没起来——检查是否误点了文件系统双击，或项目未被识别为 Web 项目
Live Edit 实时更新要走 Debug，不是 Run
想保存即生效，必须用 Debug 启动，不是 Run。步骤卡点全在配置里：
- 先确保插件已启用：
Live Edit和JavaScript Debugger都得勾选（Settings → Plugins） - Chrome / Edge 必须装官方
JetBrains IDE Support插件（仅限 Chrome Web Store 官方版本） - Run → Edit Configurations → + → JavaScript Debug → URL 填
http://localhost:63342/your-project-name/index.html（your-project-name必须和项目文件夹名完全一致，大小写敏感） - 右键
index.html→ Debug 'index.html (debug)'，不是 Run - 地址栏必须保持
http://localhost:63342/...，一旦跳成file://或其他域名，Live Edit 就断了
多浏览器并行预览不用装插件
想同时看 Chrome、Firefox、Safari 渲染差异，根本不用手动切来切去：
立即学习“PHP免费学习笔记（深入）”；
- 右键
index.html→ Open in Browser → 选多个浏览器（按住 Ctrl/Cmd 多选） - 或者点击工具栏的浏览器图标旁的小箭头 → Check all browsers
- 所有浏览器都会访问同一个
http://localhost:63342/...地址，资源加载路径一致，对比才可靠 - 注意：如果某个浏览器打不开，大概率是它被系统设为默认且占用了端口，换端口或关掉另一个实例即可
http://localhost:63342/ 这个服务的根路径永远是项目根目录，不是 HTML 文件所在目录。写 href="css/style.css" 没问题，但写 href="../css/style.css" 或 href="src/css/style.css" 就会 404——路径错，不是快捷键错。 
