答案：需左右分屏后分别用atom-live-server启动两个独立服务，确保html与css同目录并用相对路径引入。atom无内置网页比对功能，须手动并排浏览器窗口或分屏+插件组合实现。
怎么让两个HTML文件在Atom里左右对照看效果
Atom本身不提供“网页效果比对”功能，所谓比对，本质是手动控制两个独立预览窗口或Pane，再靠人眼识别差异。关键不是自动diff，而是让两个页面同时可见、可刷新、路径不冲突。
- 先用
Ctrl+K→Right把编辑器分成左右两栏，左边放index-v1.html，右边放index-v2.html - 两边都必须装
atom-live-server插件，且各自单独启动：在左栏HTML上按Ctrl+Alt+L，右栏再按一次——它会分别起两个服务（比如http://localhost:3000和http://localhost:3001） - 不能共用一个
atom-live-server实例：它只监听“当前激活文件”的目录，跨文件不会同步刷新 - 如果右边预览空白，检查右下角状态栏是否显示
HTML语言模式；显示Plain Text说明没识别后缀，得手动选语言
为什么改了CSS，两边预览都不刷新
常见错因不是插件失效，而是资源路径没被监听到。atom-live-server只认引入的CSS，且只监控当前HTML所在目录及子目录。
-
@import语句完全被忽略——哪怕CSS文件就在同目录，也不会触发重载 - 若
index-v1.html在/project/src/，而style.css在/project/assets/，改这个CSS文件不会导致任何页面刷新 - 解决办法只有两个：把所有相关资源（HTML/CSS/JS）统一挪到同一级目录下；或改用
<link rel="stylesheet">显式引入，且路径为相对路径（如../assets/style.css） - 浏览器控制台出现
GET http://localhost:3000/assets/style.css 404，就说明路径解析失败，不是插件问题
想看样式差异，但preview-plus分屏不生效
preview-plus在分屏里只是静态快照，不监听保存事件，也不支持跨文件热加载。它适合单页快速查看，不适合比对场景。
- 在左栏
style.css上按Ctrl+Shift+P→ 输入preview-plus:toggle，结果是空白或报错Cannot preview this file type——它只处理HTML - 即使你在右栏HTML上开了
preview-plus，左边改完CSS保存，右边也不会更新，必须手动按F5或重新toggle - 真要比样式，建议放弃内嵌预览，直接用
open-in-browser插件：右键两个HTML文件，分别选“Open in Default Browser”，然后手动并排浏览器窗口——这样CSS修改后，只要两个页面都用http://协议访问，就能各自刷新
Git版本比对时，怎么同步预览改动
如果你要对比Git不同commit里的HTML效果，split-diff能显示代码差异，但无法渲染效果。需要配合atom-live-server手动切换分支再启动。
- 先用
git checkout commit-hash切到旧版本，确保index.html已更新，再按Ctrl+Alt+L启动服务 - 开新终端窗口，运行
npx live-server --port=3002指向另一个端口，避免和Atom插件冲突 -
split-diff只负责代码行级对比，它不启动服务器——别指望它帮你打开浏览器预览 - 注意：Atom项目根目录下必须有
.git文件夹，split-diff才能启用Git模式；纯文件夹里只能手动选两个文件比
../就404。比对效果前，先确认两个页面都能独立跑通，再谈同步与差异。
