预览流程简介与常见错误处理

本章节主要介绍浏览器预览的流程。

流程简介

浏览器预览本质上是编辑器开启了一个 express 服务器,在点击预览时打开用户的默认浏览器去访问预览 URL。预览模板里写了一些加载引擎和初始化场景的简单逻辑,而关于用户资源加载主要还是依赖于 setting.js 的生成,因为 setting.js 里面记载了当前项目的资源、脚本以及项目设置信息。预览的 setting.js 是调用构建插件的接口生成的,因此如果 setting.js 没有正常生成,便可以打开 开发者 -> 构建调试工具 查看。

常见错误处理

在遇到预览无法正常显示时,请先打开开发者工具的 NetWork 查看此时是否有资源或者脚本加载失败。

setting.js 加载失败

在寻找这个问题的原因之前,请先确保在预览前编辑器内没有报错信息。

setting.js 加载失败说明 setting.js 没能正常生成,这时候可以打开 开发者 —> 构建调试工具 查看是否有报错信息。正常情况下,如果生成失败基本会有对应的报错提示。比较常见的是脚本错误,因为在生成 settings 时会先加载一遍项目脚本,如果项目脚本内存在不合法的书写,那么在加载过程中便会抛出异常导致 setting.js 生成失败。具体报错的脚本信息可以参考报错信息内的提示,通常在此处的报错内容,有效信息都是资源的 UUID,可以复制对应的 UUID 到 资源管理器 中搜索定位该脚本。

关于 setting.js 具体的生成流程,可以参考 构建流程简介。预览的 setting.js 生成规则基本和只勾选了调试模式的生成规则一样,区别在于预览只梳理资源信息,并不会进行资源的打包生成。

资源加载 404

请将报 404 错误的资源的 UUID 到编辑器的 资源管理器 中搜索对应资源。