atom-html-preview仅静态渲染html且不执行js、不加载外部资源；atom-live-server通过http服务实现保存即刷新，但仅监听同目录及子目录文件；open-in-browser用file://协议打开，无法真实模拟生产环境。
atom-html-preview 插件能直接在 Atom 编辑器内预览 HTML 渲染效果，但不执行 JS、不加载外部资源（如 @import 的 CSS 或远程图片），适合快速看结构和基础样式。
用 atom-html-preview 在编辑器里看渲染效果
- 安装后默认快捷键是
Ctrl+Shift+H（Windows/Linux）或Cmd+Shift+H（macOS），打开右侧面板显示当前 HTML 文件的静态渲染 - 它不走 HTTP 协议，所以所有
file://路径都能“假装”加载成功，但真实项目里的相对路径（比如./css/style.css）其实没被解析——面板里看不到样式，控制台也看不到报错 - 如果你改了 CSS 文件，
atom-html-preview不会自动刷新；必须手动再按一次快捷键，或关掉再重开面板 - 想让它响应保存自动更新？做不到。这个插件没监听文件系统，纯靠手动触发
用 atom-live-server 实现保存即刷新
- 必须通过
@#@#@#@#@#@#@#@#@#@0打开页面，file://地址无效，双击 HTML 文件或右键“Open in Browser”也不行 - 启动方式：打开任意 HTML 文件 → 按
Ctrl+Alt+L（Windows/Linux）或Cmd+Alt+L（macOS）；第一次会自动唤起浏览器新标签页 - 它只监听当前 HTML 文件所在目录及其子目录下的变更，如果
index.html在/project/src/，而style.css在/project/assets/，改完 CSS 不会触发刷新 -
@import引入的 CSS 文件变更不会被检测，只有<link rel="stylesheet">和<script></script>标签引入的才管用 - 端口被占时它会自动顺延（比如 3000 → 3001），但不提示，容易误判为“没启动成功”；可去浏览器手动试
@#@#@#@#@#@#@#@#@#@1
为什么 open-in-browser 插件不算实时预览
- 它只是调用系统命令把当前 HTML 文件用默认浏览器打开，地址是
file:///path/to/index.html - 修改保存后，浏览器页面不会变——必须手动刷新，或重新触发插件（快捷键
Ctrl+Alt+O/Cmd+Alt+O） - 如果 HTML 里引用了本地 CSS/JS，路径写错会导致浏览器控制台报
GET @#@#@#@#@#@#@#@#@#@2 404这类错误；但open-in-browser用的是file://，根本不会报 404，反而掩盖问题 - 它不依赖 Node.js，也不起服务，轻量但“假预览”——看着像打开了，其实没走 Web 服务器那套逻辑
真正能模拟生产环境行为的，只有走 http:// 协议的服务方案。哪怕只是临时验证一个表单提交或 AJAX 请求，file:// 下连 fetch() 都可能被浏览器拦截。别省那几秒重启服务的时间，端口冲突、路径错位、跨域限制，这些坑都在你点开 file:// 的那一刻悄悄埋好了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
