双击打开html使用file://协议受安全限制，资源易加载失败；live server通过http://本地服务绕过限制。遇空白页优先检查地址栏协议、路径正确性、dom操作时机及live server根目录设置。
本地 HTML 文件直接双击打开和 VS Code Live Server 启动的区别
浏览器空白最常见原因是路径或协议问题。双击打开 index.html 时，地址是 file:/// 协议，而 JS/CSS 中的相对路径（比如 ./script.js）可能被浏览器因安全策略拒绝加载——尤其是用了 fetch、import 或某些现代 API 时。
Live Server 启动的是 http://127.0.0.1:5500/ 这类本地 HTTP 服务，绕过了 file:// 的限制。
- 检查浏览器地址栏：如果是
file://开头，立刻换 Live Server - VS Code 安装并启用
Live Server插件后，右键 HTML 文件 →Open with Live Server - 别用 VS Code 内置的
Preview按钮，它走的仍是file://
控制台报 CORS 或 net::ERR_FILE_NOT_FOUND
这两个错误几乎都指向资源加载失败，但根源不同：ERR_FILE_NOT_FOUND 是路径写错了；CORS 错误在 file:// 下其实是个假象——浏览器实际是拒绝执行跨源请求，但提示不准确。
-
ERR_FILE_NOT_FOUND：检查<script src="js/main.js"></script>中的路径是否真有该文件，注意大小写和层级（VS Code 资源管理器里拖进去的路径可能带多余文件夹） -
CORS报错却没发请求：大概率是file://协议导致，换 Live Server 立刻消失 - 如果用了
fetch('./data.json')，确保data.json在同一目录，且 Live Server 已启动
JS 执行了但页面仍空白：检查 DOM 操作时机
HTML 加载顺序和 JS 执行时机不匹配，会导致 document.getElementById 拿不到元素，后续逻辑静默失败。
- 把
<script></script>标签移到
