# 预览与调测UI引擎前端页面
当前端页面完成开发后，需要通过UI引擎的预览与调试功能验证页面的布局、交互逻辑与数据绑定是否符合预期，提前排查并修复设计或功能问题，保障页面上线后的可用性与稳定性。
#### 前提条件
- 已进入目标项目的页面设计器，具体操作请参见[进入前端项目页面设计器](https://support.huaweicloud.com/usermanual-idme/idme_ui_0014.html)。
- 已完成页面的创建、组件部件设计及相关逻辑配置。
 
#### 预览页面
在页面设计器的顶部工具栏中，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002500469868.png)，系统将自动打开新的浏览器窗口，展示当前页面的最终预览效果。
您可在此查看页面的实际展示与基础交互。
图1预览页面   
![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002500506704.png "点击放大")
#### 启用调试模式
预览页面支持开启调试模式，用于查看页面源码及依赖资源，辅助定位功能问题。
在预览页面右上角，您会看到一个"调试模式"开关。开启后，可深入查看页面的底层实现逻辑。
![](https://support.huaweicloud.com/usermanual-idme/public_sys-resources/caution_3.0-zh-cn.png)
如果同时开启页面预览的调试模式与浏览器自带调试模式，会产生较大内存开销，可能导致页面卡顿、崩溃等异常问题。建议调试时仅开启一种调试模式，优先使用UI引擎内置的预览调试模式。如需使用浏览器调试工具，需先关闭预览页面的调试模式。
图2预览调试模式   
![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002500478888.png "点击放大")
在调试模式下，可查看两类核心源码资源，助力问题排查：
- 页面源码：当前预览页面的源码存储在"Main.vue"文件中，可直接查看页面的组件结构、逻辑代码等核心内容。
- 工具方法源码："utils.js"文件中包含当前应用配置的所有工具方法，可查看方法实现逻辑，验证工具方法调用是否正确。