在上一篇全新UI引擎的介绍中，我们展示了鹈鹕骑车、喝水等几套会动的安装界面。画面动起来之后，制作时也会多出一个很实际的问题：改完页面、文案和动画，怎样快速看到欢迎页、安装中、安装完成以及卸载流程的效果？
今天继续用鹈鹕喝水模板，记录一下新版安装包UI的调试与预览方法。预览入口会构建当前界面并打开模拟环境，我们可以自己点击按钮体验流程，也可以把页面停在指定进度，仔细检查文字、间距、图标和动画位置，不需要每改一次就先生成完整安装包。
需要先说明的是：这里运行的是模拟流程，不会真的安装或卸载产品，也不会修改系统中的文件和配置。
一、准备环境，快速打开喝水模板
开始前，请保留完整的 Release 交付目录，并准备符合模板要求的 Node.js。当前喝水模板要求 Node.js 22.22.0 或以上版本。
第一次使用时，在 Release 根目录打开 PowerShell，依次执行：
npm.cmd --prefix .\SetupScripts\leeqia_drink\skin ci
.\debugger\run.bat leeqia_drink第一条命令用于安装界面依赖，首次使用或依赖清单更新后执行即可；依赖已经准备好时，以后只运行第二条命令。也可以直接双击下面的入口：
SetupScripts/leeqia_drink/run_test.bat启动完成后会看到两个窗口：
| 窗口 | 用途 |
|---|---|
| UI预览窗口 | 查看安装界面，自己点击协议、设置、安装和卸载按钮 |
| 调试窗口 | 查看日志，切换安装或卸载模式，指定页面和进度 |
先认清调试命令的输入位置
后文中的 JavaScript 命令，都输入在调试窗口底部的脚本控制台中，不是在 PowerShell 里执行。打开调试窗口后，可以先按下面的方法确认位置：
- 顶部和中间区域用于查看当前页面结构与元素状态。
- 底部带有
>提示符的区域是脚本控制台，点击输入行后再粘贴命令。 - 如果窗口连接了多个页面，先选择名称中带有当前模板和
.debug.html的页面，再读取状态或切换阶段。
下面是实际调试窗口中与本次操作相关的区域。截图保留了页面结构和底部命令输入位置，后面的切换模式、指定进度与查看状态都在这里完成。
第一次使用时，可以先在脚本控制台输入下面这一行：
__nsWebSkinDebugApp.getState();如果能返回当前页面状态，就说明已经连接到正确的预览页面，可以继续执行后文命令。多行命令可以逐行执行；切换模式或页面前，先确认当前模拟任务尚未开始，或者已经结束。
喝水模板的安装欢迎页如下。左侧是鹈鹕与水瓶场景，右侧保留快速安装、自定义选项和用户许可协议等操作区域。
二、自己点击，体验完整安装流程
预览窗口打开后，可以像实际使用安装包一样操作：
- 先查看欢迎页和未开始时的动画。
- 打开许可协议或自定义选项，检查文案、安装目录和选项状态。
- 按界面提示确认协议，然后点击"快速安装"。
- 模拟进度开始推进，界面会依次显示安装中和安装完成状态。
喝水模板把动画与进度放在同一个场景里。进入安装状态后，水瓶中的水量会随着进度变化，右侧同时显示当前状态和百分比，让等待过程更直观。
模拟进度通常会很快走完。如果只想重新体验一次完整流程，关闭当前预览窗口，再运行预览入口即可。如果要停下来检查某一个百分比，可以使用后面的指定进度方法。
三、切换到卸载流程
除了安装过程，卸载确认、卸载中和卸载完成页面也可以直接预览。请在尚未开始任务，或当前模拟任务已经结束后，在调试窗口的脚本控制台中依次执行：
__nsWebSkinDebugMock.setScenario("success");
__nsWebSkinDebugMock.setInstallMode("uninstall");
__nsWebSkinDebugApp.setInstallMode("uninstall");
__nsWebSkinDebugApp.setProgress({ percent: 0 });
__nsWebSkinDebugApp.setPhase("uninstallConfirm");界面会停在卸载确认页。此时可以检查"保留用户数据"等选项，再自己点击卸载按钮，继续观察后面的状态变化。
卸载开始后，动画和进度仍会继续工作，右侧切换为卸载状态。
想切回安装欢迎页时，在任务结束后执行：
__nsWebSkinDebugMock.setScenario("success");
__nsWebSkinDebugMock.setInstallMode("install");
__nsWebSkinDebugApp.setInstallMode("install");
__nsWebSkinDebugApp.setProgress({ percent: 0 });
__nsWebSkinDebugApp.setPhase("welcome");四、停留在指定页面和进度
制作动态界面时，最实用的能力之一，就是让页面停在一个指定状态。这样可以慢慢检查长文案有没有换行、动画是否遮挡按钮、进度条两端是否完整，以及不同状态之间的颜色是否统一。
例如，让安装过程停在 50%，可以执行：
__nsWebSkinDebugMock.setInstallMode("install");
__nsWebSkinDebugApp.setInstallMode("install");
__nsWebSkinDebugApp.setProgress({ percent: 50, message: "正在安装，请稍候..." });
__nsWebSkinDebugApp.setPhase("installing");继续检查 75% 时，只需要修改进度：
__nsWebSkinDebugApp.setProgress({ percent: 75 });percent 可以填写 0～100 的整数。因为这时没有启动完整模拟任务，进度会停在设定值，模板自身的循环动画仍然可以继续播放。
常用页面名称如下：
| 页面名称 | 显示内容 | 模式 |
|---|---|---|
welcome |
安装欢迎页 | 安装 |
license |
用户许可协议页 | 安装 |
options |
安装设置页 | 安装 |
installing |
安装中 | 安装 |
finish |
安装完成 | 安装 |
failed |
失败页 | 当前模式 |
uninstallConfirm |
卸载确认页 | 卸载 |
uninstalling |
卸载中 | 卸载 |
uninstallFinish |
卸载完成 | 卸载 |
切换页面时使用：
__nsWebSkinDebugApp.setPhase("页面名称");直接切页适合检查外观，不会自动重放完整流程。想检查按钮行为，仍然建议回到预览窗口亲自点击。
五、查看失败提示和运行状态
成功页面做好后，失败提示也不要漏掉。在任务开始前执行：
__nsWebSkinDebugMock.setScenario("failure");回到预览窗口点击安装或卸载，模拟流程会在进度结束后进入失败状态，方便检查错误标题、说明文字和页面布局。需要恢复成功场景时，等当前任务结束后执行：
__nsWebSkinDebugMock.setScenario("success");排查页面状态时，还可以查看：
__nsWebSkinDebugApp.getState();
__nsWebSkinDebugApp.getProgressState();
__nsWebSkinDebugMock.getLogs();它们分别返回当前界面状态、进度状态以及模拟服务最近的事件与日志。
六、修改UI后重新预览
界面源文件位于：
SetupScripts/<模板目录>/skin/src/修改页面、样式、资源或文案后，保存文件，关闭旧的预览窗口，再次运行预览入口。构建完成后，按前面的流程检查受影响页面；如果改了进度动画或长文案，最好再停留到几个不同百分比逐一确认。
不要直接修改 skin/dist/ 或 debugger/work/ 下的文件，它们属于构建生成内容，下次运行时会被覆盖。普通界面修改不需要重复安装依赖，只有依赖清单发生变化时才需要再次执行 npm.cmd ci。
七、预览能检查什么，不能代替什么
这套流程适合检查页面、文案、选项交互、动画、模拟进度以及安装和卸载各个阶段的视觉效果。产品名称和版本等内容来自模拟环境，可能显示为 LeeQia、1.0.0-debug，不会自动读取打包工具中保存的正式产品配置。
真实安装包中的文件写入、注册表、快捷方式、网络下载、程序启动、窗口行为和不同 DPI 下的显示效果，仍然要在正式生成安装包后分别验证。预览解决的是UI制作阶段的快速检查问题，不能代替最后的真实安装与卸载测试。
八、完整效果展示
最后放上两段完整动画。第一段是鹈鹕喝水场景，从欢迎页进入安装，水瓶中的水量会跟随进度变化。
第二段展示骑行场景，角色、背景和安装区域使用了另一套视觉表达，也可以通过同样的方法调试和预览。
结语
从欢迎页到安装中，从卸载确认到失败提示，一套动态安装界面会有许多需要反复查看的状态。有了独立的调试与预览入口，我们可以先把每个页面停下来检查，再自己点击走完完整流程，让界面修改与验证衔接得更顺畅。
愿天下没有难做的安装包！