atom-html-preview插件可在atom右侧内嵌预览html，支持内联样式及引入的css（含cdn），但不走http协议，故fetch等api不可用；默认快捷键ctrl+shift+h，需文件已保存且为.html扩展名。
atom-html-preview 插件能内嵌预览，但不走 HTTP 协议
它在 Atom 右侧开一个独立渲染面板，直接解析当前 .html 文件，支持内联样式、<style></style> 和 <link rel="stylesheet">（含 CDN），但所有资源必须能被本地文件系统直接读取——这意味着：
-
../css/style.css可以加载，/css/style.css或http://example.com/style.css会失败 -
fetch()、XMLHttpRequest、Service Worker、WebSocket全部不可用，因为没 HTTP 上下文 - 快捷键默认是
Ctrl+Shift+H（Windows/Linux）或Cmd+Shift+H（macOS），若无效，检查右下角状态栏是否显示HTML—— 不是Plain Text - 安装后无需重启 Atom，但文件必须已保存且扩展名正确（如
index.html），未保存的untitled标签页不会触发预览
atom-live-server 才真能“保存即刷新”，但必须用 http:// 访问
它起一个本地最小 HTTP 服务（默认端口 3000），监听文件变更后调用 location.reload()。这是唯一能自动刷新的方案，但硬性前提很明确：
- 不能双击打开
file:///path/to/index.html，必须用插件启动后访问类似http://localhost:3000/index.html的地址 - 只监听「当前打开的 HTML 文件所在目录及其子目录」：比如你在
/project/src/index.html启动，但style.css在/project/assets/，改它不会触发刷新 - 不响应
@import的 CSS 变更，只认<link>和<script></script>标签引入的资源 - 端口被占时会顺延到
3001等，但无提示；如果没反应，先看控制台是否报ERR_CONNECTION_REFUSED
open-in-browser 最轻量，但完全不自动
它不做监听、不启服务，只做一件事：把当前 .html 文件用默认浏览器打开。适合快速验证单次效果，但每次改完都得手动刷新。
- 快捷键是
Ctrl+Alt+O（Windows/Linux）或Cmd+Alt+O（macOS） - 若快捷键失效，常见原因是 Atom 没重启（插件安装后需重启才生效）
- 它不处理路径中含空格或中文的问题，但比 atom-live-server 更少出错
- 如果你只是写个静态页面、不调 API、不测交互，这个组合最省心
为什么改了代码却没刷新？先查这三件事
绝大多数“不生效”不是插件坏了，而是路径、协议或监听范围没对上：
- 浏览器地址栏是不是
file://开头？必须是http://localhost:3000/...才可能自动刷新 - 修改的文件是否在 atom-live-server 的监听范围内？检查它和主 HTML 文件是否在同一目录树里（不是同一磁盘、不是同名即可）
- 控制台有没有
404？比如GET http://localhost:3000/assets/style.css 404，说明引用路径错了，得改<link href="assets/style.css">或移动文件位置
真正卡住人的，往往不是装不上，而是装上了却以为“该刷新了”，结果在 file:// 下干等。协议差异这事，一眼就能看出来，但很多人就是不低头看地址栏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
