vscode运行代码浏览器空白怎么处理

双击打开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> 标签移到