空白页主因是document.write()在加载后清空页面，或HTML未正确加载、JS报错阻塞、CSS隐藏内容；应按Network→Console→Elements顺序排查。
检查 document.write() 是否覆盖了整个页面
很多新手在调试时会用 document.write() 输出调试信息，但这个函数在页面加载完成后调用会清空整个 document，导致只剩空白。它只适合在 HTML 解析过程中同步使用，现代开发中应避免。
- 如果用了
document.write("test")且页面已加载完成，浏览器会执行文档重写，原有 DOM 全部丢失 - 替代方案：用
console.log()调试，或操作innerHTML/textContent更新特定元素 - Chrome DevTools 的 Console 面板里输入
document.body.innerHTML，若返回空字符串，大概率是被document.write()清过屏
确认 HTML 文件是否被正确加载（404 或 MIME 类型错误）
浏览器看似打开了一个 HTML 文件，实际可能根本没加载成功——比如服务器返回了 404、或者把 .html 当成纯文本（text/plain）而非 text/html，这时页面不会渲染，只留白。
- 打开 Chrome DevTools → Network 标签页，刷新页面，看第一个请求的
Status是否为200，Type是否为document - 如果
Type是text/plain，说明 Web 服务器没配对 MIME 类型，Nginx 需确保有types { text/html html; }；本地双击打开文件时，URL 是file://协议，部分浏览器会限制脚本执行或拒绝解析 JS/CSS，建议用python3 -m http.server 8000启一个本地服务 - 右键“查看网页源代码”，如果一片空白，基本可断定 HTML 根本没传过来
排查 JS 错误阻塞了 DOM 渲染或执行流
HTML 结构本身没问题，但内联或外部 JS 报错（尤其是 Uncaught SyntaxError 或 ReferenceError），可能导致后续脚本不执行，而你的内容又依赖 JS 插入（比如 React/Vue 挂载点为空、innerHTML 赋值逻辑被跳过）。
- 打开 DevTools → Console，看是否有红色报错，重点关注第一行错误位置（如
script.js:12） - 常见低级错误：
let data = JSON.parse("{...")缺少闭合引号、const obj = { a: 1, }在旧版 IE 中报错、箭头函数写成=>但未声明变量 - 如果用了
DOMContentLoaded或window.onload，但内部逻辑抛错，后续 DOM 操作就全失效了；可临时把 JS 逻辑包进try/catch并console.error(e)定位
验证 CSS 是否意外隐藏了全部内容
HTML 和 JS 都正常，但内容就是看不见——最常被忽略的是 CSS 把 body、html 或根容器设成了 display: none、visibility: hidden、opacity: 0，或者设置了极大负 margin/transform 把内容移出视口。
- DevTools → Elements 面板，选中
，右侧 Styles 面板逐条检查是否被某条规则覆盖- 快捷方式：按
Ctrl+Shift+P（Win）或Cmd+Shift+P（Mac），输入 “disable all styles”，回车，看内容是否突然出现- 特别注意重置类库（如
normalize.css）或 UI 框架（如 Bootstrap）的全局样式冲突，例如body { height: 100vh; overflow: hidden; }可能裁掉内容空白页问题往往不是单一原因，而是加载链路上某个环节静默失败：从文件是否抵达浏览器，到能否被识别为 HTML，再到 JS 是否跑通、CSS 是否藏起了内容。最有效的排查顺序是 Network → Console → Elements，别急着改代码，先确认浏览器到底收到了什么、执行到了哪一步。
- 快捷方式：按
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
