VS Code中网页黑屏主因是路径错误或浏览器安全策略拦截；file://协议下资源加载失败，应改用Live Server插件启动HTTP服务，或对现代框架项目运行npm run dev。
网页在 VS Code 中打开是黑屏，但文件明明有内容
VS Code 本身不运行网页，它只是编辑器；黑屏说明你双击 HTML 文件用系统默认浏览器打开了，但页面没渲染出来。常见原因是路径错误或资源加载失败。
- 检查浏览器地址栏：如果是
file:///开头，说明是本地直接打开 —— 这时fetch、import、相对路径的script或img很可能被浏览器安全策略拦截（尤其 Chrome） - 右键网页 → “检查” → 切到
Console标签页，看有没有报错：Failed to load module script、net::ERR_FILE_NOT_FOUND、Cross-Origin Request Blocked - 确认所有
src和href路径是否写对：比如<script src="js/main.js">要求当前目录下有js/文件夹，且里面真有main.js；大小写、拼写、斜杠方向（Windows 也必须用/，不是\）都影响加载
用 Live Server 插件后还是黑屏
Live Server 启动的是本地 HTTP 服务（http://127.0.0.1:5500），能绕过 file:// 限制，但黑屏仍可能发生，多数是启动位置不对或配置冲突。
- 确保你在 VS Code 中已打开**整个项目文件夹**（File → Open Folder），而不是只打开单个 HTML 文件 —— Live Server 默认从工作区根目录起服务
- 右键 HTML 文件 → “Open with Live Server”，不要双击文件名；如果右键没这选项，先装插件：
Live Server（作者 Ritwick Dey） - 检查 VS Code 右下角状态栏：是否显示
Go Live？没显示说明插件没生效，重启 VS Code 或重装插件 - 如果页面空白但控制台无报错，可能是 CSS 把内容压出视口，或 JS 执行卡死：临时删掉
<link rel="stylesheet">和<script>标签，看能否显示纯 HTML
HTML 里写了 console.log 却看不到输出
不是代码没跑，而是你根本没打开开发者工具，或者日志被过滤了。
- 按
F12或Ctrl+Shift+I（Win/Linux）/Cmd+Option+I（Mac）强制打开 DevTools，再刷新页面 - 在 Console 面板左上角，确认过滤器没选成
Errors only；点清空按钮（Clear console图标）再刷新，避免旧日志干扰 -
console.log在<script>标签里，但脚本放在<head>且没加defer，可能因 DOM 还没加载就执行，导致后续逻辑失败 —— 建议把脚本移到</body>前，或加defer
用 Vite / React / Vue 创建的项目在 VS Code 里黑屏
这类项目不能直接用 Live Server 打开 HTML，因为它们依赖构建工具处理模块、路径和开发服务器。
- 终端进入项目根目录（含
vite.config.js或package.json），运行npm run dev或yarn dev，等命令行输出类似Local: http://127.0.0.1:5173/再访问该地址 - 别用 Live Server 右键打开
index.html—— 它只是个模板入口，实际资源由 Vite 动态注入，直接打开会丢失 JS bundle 和 HMR 支持 - 如果
npm run dev报错，重点看第一行错误：常见如command not found: vite（没全局装或没node_modules/.bin在 PATH）、Cannot find module 'vite'（node_modules没装全，运行npm install）
黑屏最常卡在路径和协议上：本地 file:// 不行就换 http://，HTTP 服务起不来就查终端报错。别猜，先开 Console 看第一行红字。
