页面打开是空白？
先查这 6 个地方

按 F12 或右键“检查”，切到 Console / 网络面板。优先修复第一条红色错误。

// 不要直接操作还没出现的节点
document.addEventListener('DOMContentLoaded', () => {
  const app = document.querySelector('#app');
  if (app) app.textContent = '内容已渲染';
});

临时禁用样式表，或检查 display:none、visibility:hidden、opacity:0、color:white、z-index 和遮罩层。

/* 诊断：先看元素是否存在、是否可见 */
const el = document.querySelector('#app');
console.log(el, getComputedStyle(el).display, getComputedStyle(el).visibility);

确认实际入口是 index.html，相对路径没有大小写问题，文件不是 0 KB，服务器返回的是 HTML 而不是源码。

# 终端快速确认
ls -lh index.html
file index.html
# Windows 可用 PowerShell
Get-Content index.html -TotalCount 5

在脚本开头加 console.log('js ok')。如果没输出，检查 script 的 src、defer、语法错误和加载顺序。

<script src="main.js" defer></script>
<script>console.log('js ok', typeof main);</script>

Network 面板看接口是否 404 / 500 / CORS。异步失败也要捕获，否则页面可能停在 loading。

window.addEventListener('unhandledrejection', e => {
  console.error('Promise 失败：', e.reason);
});
fetch('/api/data').then(r => r.json()).catch(console.error);

强制刷新、开无痕窗口、换浏览器。服务器检查 Content-Type: text/html、Gzip / 反向代理和静态文件权限。用 file:// 打开时，部分 API 会被浏览器拦截。

# 常见 HTTP 头
Content-Type: text/html; charset=utf-8
Cache-Control: no-store  # 排查阶段先禁用缓存