如何调测标准页面

标准页面开发完成后，需要预览调测，验证页面是否实现了想要的效果。标准页面的调测分为调试事件和调试DOM及样式两类。

打开一个标准页面。
图1 标准页面实例
选择一个组件，例如“上传”组件，在右侧区域切换到“事件”页签，单击“文件上传”事件后的“+”，进入“上传”事件的编排页面。
在代码编辑区域使用“debugger” 语句设置断点。
图2 使用“debugger”设置断点
保存并预览页面。
在弹出的预览页面，按“F12”或者“Ctrl + Shift + I”开启浏览器调试工具。
在“Console”页签查看日志相关信息，在“Network”页签查看网络请求信息。
图3 “Console”页签查看日志相关信息

图4 在“Network”页签查看网络请求信息
单击上传按钮上传文件，由于之前在上传事件的自定义JS代码中使用“debugger” 语句设置断点，因此事件代码在执行到debugger语句时会停止执行。
按“F8”可跳转下一个断点，按“F10”可跳转下一行，根据相关数据判断页面逻辑是否正确执行。
图5 调试js代码

在标准页面中，保存并预览页面。
在弹出的预览页面，按“F12”或者“Ctrl + Shift + I”开启浏览器调试工具。
在“Elements”页签，单击左边选择器。在预览的页面中选中组件，在右下“Styles”中调试样式，如改变“Upload File”的字体颜色或改变DOM结构。
图6 调试DOM及样式