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

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

流程简介

浏览器预览本质上是编辑器开启了一个 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 到编辑器的 资源管理器 中搜索对应资源。