预览白屏或加载不全
白屏的原因按概率排序
① 打开的文件不是 index.html 或入口文件
WebCat 预览时加载的是当前正在编辑的文件。如果你正在编辑一个 .css 文件或脚本里的子模块,点运行自然看不到完整页面。
解法:先回到项目的主入口文件(一般是 index.html),点运行。如果你的入口文件不叫 index.html,就先打开它再运行。
② 文件路径写错了
HTML 里引用的 CSS、JS、图片路径不对,会导致白屏或样式全丢。常见错误:
- 文件夹名拼写错了(
cs/写成css/但实际目录名是cs/) - 相对路径层级不对(子目录里的文件引用父级目录的资源没加
../) - 文件名大小写不匹配(Windows 不区分但 WebView 有时区分)
解法:在 WebCat 的文件列表里核对实际文件名和目录结构,把 HTML 里写的路径一个字母一个字母对上。
③ JS 错误导致页面卡死
如果页面里有 JS 代码报了未捕获的错误,WebView 可能因为 JS 执行中断而白屏或停止渲染。
解法:
- 暂时把所有
<script>标签注释掉,再点运行——如果白屏消失说明是 JS 的锅 - 逐段打开 JS,定位到具体哪段代码有问题
- 如果用了特别新的 JS 特性(比如某些 WebAssembly 实验性 API),WebCat 内置 WebView 可能不支持——在电脑 Chrome 里对比一下
④ PHP 环境没开但文件是 .php
文件名是 .php 但 PHP 运行环境开关关着,WebView 收到的是原始 PHP 代码文本(而不是 HTML),渲染出来可能是一片乱码或空白。
解法:打开 PHP 环境开关,再点运行。
⑤ 外部 CDN 资源加载不出来
页面里引用了 CDN 上的 js/css(如 https://cdn.jsdelivr.net/npm/vue),如果:
- 当前没联网 → CDN 资源加载失败
- 预览环境的网络策略拦截了外部请求
解法:把外部资源下载到本地工程里用相对路径引用,或者确认当前网络畅通。
排查白屏的快速步骤
按这个顺序一条一条过,一般前三条就能定位到问题:
- 确认打开的是入口文件(index.html)
- 检查 HTML 里的引用路径(一个一个对着文件列表核对)
- 临时注释掉所有 JS(排除 JS 错误)
- PHP 文件确认环境开关开了
- 联网状态(排除 CDN 问题)
极端情况:WebCat 本身的问题
如果上面全都排除了还是白屏,可能是 WebCat 版本 bug 或 WebView 兼容性问题。这时候把相同代码在电脑浏览器(Chrome/Firefox)里打开对比——电脑上正常就说明代码没问题,是 WebCat 的锅;电脑上也白屏说明代码本身有错。