白屏主因是HTML5页面在WebView中执行出错或资源加载失败。需先确认调试通道:Android启用setWebContentsDebuggingEnabled,iOS用真机+Safari调试;检查资源MIME类型、本地协议限制、框架模板编译及WebView线程与生命周期管理。
页面白屏大概率是 HTML5 页面在 WebView 中执行出错或资源加载失败,而非“渲染卡死”本身。
WebView 控制台日志根本看不到?先确认调试通道是否打通
很多白屏问题其实连 JS 错误都没报出来,因为默认 WebView 关闭了远程调试或未注入调试桥接脚本。
- Android:确保
WebView.setWebContentsDebuggingEnabled(true)在 Application 或 Activity 初始化时调用(仅 debug 包启用) - iOS:必须用真机 + Safari → 开发者菜单 → 选择设备和对应 WebView 页面,模拟器不支持 Web Inspector
- Hybrid 框架(如 Cordova、Capacitor)需检查插件是否启用
console重定向,否则console.log会静默丢弃 - 若仍无日志,可在 JS 入口最顶部加
try/catch包裹整个初始化逻辑,并用alert()或原生 Toast 输出异常信息(临时手段,定位后移除)
白屏但控制台无报错?重点查资源加载拦截与 MIME 类型
WebView(尤其 Android 4.4+ 的 Chromium 内核)对资源响应头更严格,常见于本地 file:// 协议或未配 Content-Type 的本地服务器。
- 检查 HTML 中
是否被 WebView 拦截:通过WebViewClient.shouldInterceptRequest()打印所有请求 URL 和返回的WebResourceResponse - 本地开发时若用
file://加载,iOS WKWebView 默认禁止XMLHttpRequest和fetch加载本地 JSON/JS;需改用http://127.0.0.1:8080启服务(推荐serve或http-server) - 检查服务器返回的 JS/CSS 文件是否带正确
Content-Type:JS 必须是text/javascript或application/javascript,CSS 必须是text/css;Nginx/Apache 配置遗漏会导致 Chrome 内核拒绝执行
Vue/React 页面白屏?别只盯着 mounted,先看模板编译是否失败
SPA 框架的白屏常发生在模板解析阶段,错误发生在 new Vue() 或 ReactDOM.render() 之前,控制台可能只显示 “Failed to load module script” 或空白控制台。