# 如何调测标准页面
标准页面开发完成后，需要预览调测，验证页面是否实现了想要的效果。标准页面的调测分为调试事件和调试DOM及样式两类。
#### 使用说明
标准页面开发完成后，需要预览调测，验证页面是否实现了预期效果。标准页面的调测分为调试事件和调试DOM及样式两类。
#### 调试事件
1. 打开一个标准页面。 
   图1标准页面实例   
   ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960287061.png "点击放大")
   
   
2. 选择一个组件，例如"上传"组件，在右侧区域切换到"事件"页签，单击"文件上传"事件后的"+"，进入"上传"事件的编排页面。 
   图2单击文件上传后的加号   
   ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932888560.png)
   
   
3. 在代码编辑区域，使用"debugger" 语句设置断点，单击"创建"。 
   图3使用"debugger"设置断点   
   ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960287069.png "点击放大")
   
   
4. 返回标准页面开发界面，单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960287065.png)，保存标准页面后，单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933047956.png)，预览标准页面。
5. 在弹出的预览页面，按"F12"或者"Ctrl + Shift + I"，开启浏览器调试工具。 
   在"Console"页签，查看日志相关信息。在"Network"页签，查看网络请求信息。
   图4"Console"页签查看日志相关信息   
   ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960127265.png "点击放大")
   图5在"Network"页签查看网络请求信息   
   ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960127269.png "点击放大")
   
   
6. 单击上传按钮上传文件，由于之前在上传事件的自定义JS代码中使用"debugger" 语句设置断点，因此事件代码在执行到debugger语句时会停止执行。
7. 按"F8"可跳转下一个断点，按"F10"可跳转下一行，根据相关数据判断页面逻辑是否正确执行。 
   图6调试js代码   
   ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960287057.png "点击放大")
   
   
 
#### 调试DOM及样式
1. 在标准页面开发界面，单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933047936.png)，预览标准页面。
2. 在弹出的预览页面，按"F12"或者"Ctrl + Shift + I"，开启浏览器调试工具。
3. 在"Elements"页签，单击左边选择器。
4. 在预览的页面中，选中组件，在右下"Styles"中调试样式，如改变"Upload File"的字体颜色或改变DOM结构。 
   图7调试DOM及样式   
   ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960287081.png "点击放大")