白屏故障需先判断影响范围：所有用户白屏则检查index.html是否返回200，部分用户白屏则查Console报错及API兼容性；第一步紧盯Console面板，重点排查TypeError、SyntaxError等三类错误。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
当你打开一个前端页面，发现屏幕完全空白、没有任何内容、也没有加载提示，用户正在焦急等待——这不是页面慢，是白屏故障，必须立刻定位根源。
先快速判断白屏范围
打开页面前，先问自己三个问题：所有用户都白屏？还是只有某台手机、某个浏览器、某个地区白屏？是首次访问就白，还是刷新后突然变白？本地开发环境正常，线上却白屏？【这三个问题的答案直接决定你接下来该查 CDN 还是查代码】
如果所有用户都白屏，立刻跳转 Network 面板检查 index.html 是否返回 200；如果只有部分用户白屏，先看 Console 里有没有报错，再查是否用了未兼容的 API（比如 Safari 不支持 optional chaining 在旧版本中）。
第一步：盯死 Console 面板
按下 F12 → 切到 Console 标签页 → 刷新页面。
重点找三类错误：
• Uncaught TypeError: Cannot read properties of undefined：说明某个对象还没拿到就去取它的子属性，常见于接口返回空或字段缺失时直接写 user.info.name；
• SyntaxError: Unexpected token '：90% 是 publicPath 配错或 Nginx 路由 fallback 写错了，导致本该返回 JS 的请求返回了 HTML 页面；
• ChunkLoadError: Loading chunk xxx failed：懒加载的模块找不到，可能是构建后文件被删、CDN 缓存了旧 HTML、或部署时没同步新 chunk。
看到报错后，点开堆栈里的文件名和行号，直接定位到源码位置——别跳过这一步，它往往就是根因。
第二步：用 Network 面板验资源
方法一：过滤主资源
在 Network 面板顶部输入框填入 main.js、app.js、index.html、vendor.css 等关键词 → 按回车 → 查看这些资源的状态码。
状态码不是 200 或 304 就要立刻处理：404 表示路径错或文件没上传；500 表示服务器出问题；200 但 Preview 里显示的是 HTML 内容（而不是 JS 代码），说明 Nginx 把 JS 请求也 fallback 到了 index.html。
方法二：右键关键 JS 文件 → Copy as cURL → 粘贴到终端执行，验证 CDN 或服务端是否真能返回正确资源。
【注意：不要只看 Network 列表里有没有绿色勾，要看响应体内容是否匹配预期】
第三步：确认 DOM 是否挂载成功
第一步：切到 Elements 面板，看 标签下有没有子节点；
第二步：搜索 id="app" 或 id="root"，确认挂载容器存在；
第三步：如果容器存在但内部为空，打开 Console 输入 document.getElementById('app').innerHTML，返回空字符串说明框架根本没启动；
第四步：手动执行 console.log(typeof window.Vue, typeof window.React)，确认核心库是否已加载。
如果连 window.React 都是 undefined，说明 React 脚本压根没执行成功——这时候要回头查 Network 里 react.production.min.js 是否加载失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
