Atom本身不带内置浏览器预览，需通过open-in-browser快速打开file://页面或atom-live-server启动http://localhost:3000服务实现热刷新；前者适合单文件手动调试，后者解决CORS与fetch问题，但必须统一项目根路径并避免混用协议。
Atom 本身不带内置浏览器预览，但通过合理配置插件和系统路径，能快速实现本地 HTML 文件双击/快捷键打开、实时刷新、路径解析正确——关键不在“装得多”，而在 atom-live-server 和 open-in-browser 的分工是否清晰。
为什么不用 atom-live-server 直接启动服务？
它默认监听 localhost:3000 并启用热重载，但对纯静态页面（无构建流程）常出现两个问题：404 找不到子资源（如 ./css/style.css），或相对路径在服务器根目录下失效。根本原因是它把当前项目根当 Web root，而双击打开的 file:// 路径行为完全不同。
- 只用
atom-live-server：适合已有明确入口 HTML 且所有资源路径基于项目根写死（如/js/app.js） - 只用
open-in-browser：适合单文件调试、快速验证 DOM 结构，但改完要手动刷新 - 推荐组合：用
open-in-browser快速打开，再手动启用atom-live-server（仅当需要 AJAX 或跨域资源时）
必须安装的两个插件及其配置要点
open-in-browser 负责调起系统默认浏览器并传入 file:// 路径；atom-live-server 提供本地 HTTP 服务。两者互不干扰，但需注意默认行为差异：
-
open-in-browser默认快捷键是Ctrl+Alt+O（Win/Linux）或Cmd+Alt+O（macOS），右键菜单也可见；它会把当前编辑的 HTML 文件完整路径转为file://URL，不处理路径别名 -
atom-live-server启动后会在状态栏显示端口（如http://localhost:3000），点击即可跳转；它默认以当前 Atom 窗口的“项目文件夹”为服务器根目录，不是单个文件所在目录 - 如果 HTML 中引用了
../assets/js/main.js，用open-in-browser可正常加载（因是文件系统路径），但atom-live-server会报 404（因它不解析上级目录）
避免路径错误的三个实操动作
本地调试最常卡在资源 404，根源几乎全是路径解析错位。以下操作直接解决：
- 在 Atom 中用
File → Add Project Folder加载整个站点目录（而非只打开单个 HTML），确保atom-live-server的根目录和你写的相对路径一致 - HTML 中所有资源引用统一用**相对路径**（如
css/style.css），不要用/css/style.css（这是绝对路径，只在服务器根有效） - 检查浏览器地址栏：若看到
file:///Users/xxx/index.html，说明走的是open-in-browser；若看到http://localhost:3000/index.html，说明走的是atom-live-server—— 二者不能混用同一套路径写法
容易被忽略的系统级细节
Windows 用户尤其要注意：Atom 默认用 file:// 协议打开 HTML 时，某些浏览器（如新版 Edge）会因安全策略禁用本地 JS 的 fetch 或 XMLHttpRequest，表现为控制台报 CORS policy 错误。这不是 Atom 配置问题，而是浏览器行为。
此时唯一可靠解法是启用 atom-live-server（它走 http:// 协议），或临时改用 Firefox 测试。Mac/Linux 用户较少遇到此问题，但若用了 VS Code 的 Live Server 插件迁移过来，会误以为 Atom 也默认支持跨协议资源加载 —— 实际上它没有。
