WebStorm的「预览」界面是只读静态快照，不执行JS、不加载外部资源、不响应交互；启用需在Settings→Appearance & Behavior→System Settings中勾选Enable preview tab，且仅渲染内联样式与当前可见HTML片段。
WebStorm 的「预览」界面不是浏览器窗口，也不是内置渲染器，它本质上是编辑器右侧或下方的一个只读、不可交互的 HTML/CSS/JS 实时快照视图——它不执行 JS、不加载外部资源、不响应点击，只做静态结构与样式渲染。想靠它调试交互逻辑或检查网络请求，注定会失败。
预览功能在哪启用
预览标签页（Preview tab）和文件预览弹窗（File Preview Popup）是两个独立开关，常被混为一谈：
- 预览标签页：在
Settings | Appearance & Behavior | System Settings中勾选 Enable preview tab；启用后，双击 HTML 文件会在编辑器下方自动打开一个只读预览面板 - 文件预览弹窗：在
Project Tool Window（Alt+0+1）中选中 HTML 文件，按Space键触发；该弹窗不依赖任何设置开关，但需确保文件类型被识别为 HTML（扩展名正确、无乱码、未被标记为 Plain Text） - 若按
Space没反应，先检查文件是否被 IDE 误判为Plain Text：右键文件 →Override File Type→ 选HTML
预览内容不更新或样式错乱
预览视图不会监听保存事件自动刷新，也不会解析 <link rel="stylesheet"> 或 <script></script> 标签——它只渲染当前编辑器中可见的 HTML 片段，并内联提取 <style></style> 和 属性中的 CSS 规则。
- 外部 CSS 文件（如
index.css）完全不会生效，哪怕路径正确；必须把样式复制进<style></style>块或行内才可见 - JS 代码块会被忽略，
<script>console.log(1)</script>不会执行，也不报错 - 预览默认使用 WebKit 内核（类似 Safari），不模拟 Chrome/Firefox 差异；遇到 flex/grid 渲染不一致，别怪预览，要怪浏览器兼容性本身
- 修改 HTML 后，预览不会实时同步；需手动触发：右键预览区 →
Reload Preview，或关闭再重开标签页
为什么改了缩进设置，预览里没变化
预览界面的排版完全不受 Settings | Editor | Code Style | HTML 中的缩进、空格、换行等格式设置影响。它只关心语义结构，不关心代码是否美观。
-
Tab size、Indent、Keep indents on empty lines这些配置只作用于编辑器内的源码显示和格式化（Ctrl+Alt+L），对预览输出零影响 - 想让预览更“干净”，唯一办法是删掉冗余空格和换行——但没必要，因为预览本就不该用于代码审查
- 真正需要关注的是
Settings | Editor | Color Scheme | HTML里的颜色高亮设置，它会影响预览中标签、属性、文本的颜色呈现（仅限视觉，不影响结构）
预览的核心价值是快速确认 DOM 结构层级和基础样式表现，不是替代浏览器测试。一旦涉及 JS 行为、响应式断点、字体加载或第三方库渲染，立刻切到真实浏览器——用右上角的浏览器图标按钮（或快捷键 Ctrl+Shift+F10）启动调试会话，这才是正路。
