唯一能稳定对比多页面效果的方式是用live server启动http服务后手动开多个标签页访问不同html文件；因file://协议下各标签页被浏览器严格隔离，localstorage不共享、fetch和import全部失效，而live server通过http://127.0.0.1:5500提供同源环境，确保资源共享与正常跳转。
直接用 Live Server 启动一个 HTTP 服务，再手动开多个浏览器标签页访问不同 HTML 文件，是唯一能稳定对比多页面效果的方式；file:// 协议下开多个标签页不仅跳转失效，连 JS 模块、fetch、localStorage 都会因跨文件隔离而行为不一致。
为什么不能靠双击或 Open In Default Browser 对比
浏览器对 file:// 协议做了严格隔离：每个标签页加载的 file:// 页面被视为独立来源，localStorage 不共享、fetch('./data.json') 直接报 net::ERR_FILE_PROTOCOL、import 语句全挂。你看到的“两个页面效果不同”，大概率是其中一个根本没加载 JS 或数据——不是代码问题，是协议限制。
Live Server 怎么开多个标签页对比
装好 Ritwick Dey 的 Live Server 插件后：
- 右键任意一个
index.html→Open with Live Server，浏览器打开http://127.0.0.1:5500/index.html - 在同一个浏览器里，新开标签页，手动输入
http://127.0.0.1:5500/about.html（路径必须相对项目根目录） - 再开一个标签页输
http://127.0.0.1:5500/contact.html，所有页面共用同一套localStorage、能互相fetch、JS 模块正常解析 - 如果端口被占（比如另一个 Live Server 正在跑），它会自动换端口并弹提示，此时把地址栏里的端口号同步改掉就行
对比时容易忽略的路径和刷新问题
Live Server 的根目录默认是 VSCode 当前打开的文件夹（即你通过 File → Open Folder 打开的路径），所有链接必须用相对路径：
- 错：
<a href="C:/project/about.html"></a>或<a href="/about.html"></a>（绝对路径或根路径） - 对：
<a href="about.html"></a>或<a href="./about.html"></a> - 改完 HTML 后保存，Live Server 默认自动刷新当前标签页；但其他已打开的标签页不会联动刷新——要对比差异，得手动按
F5或点地址栏回车 - 如果开了 Chrome DevTools，记得关掉“Disable cache”勾选项，否则可能缓存旧 JS 导致对比失真
真正卡住人的，从来不是“怎么开多个标签页”，而是没意识到 file:// 下的每个标签页都是孤岛，而 http://127.0.0.1:5500/ 才是它们共同承认的“同一个网站”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
