# 调测华为云Astro轻应用高级页面
在高级页面开发过程中，经常需要调测整个前台页面。对于前台页面中常遇到的样式或功能问题，可借助浏览器内置的开发者工具来对问题进行调试和定位。
#### 前台页面常用调测方法
在高级页面的开发中，常借助浏览器内置的开发者工具对样式或功能问题进行定位和分析。下面以Chrome浏览器为例，简单介绍浏览器开发者工具中常用的调测方法。在Chrome浏览器中，按下"F12"或者"Ctrl + Shift + I"，开启开发者工具。
- DOM和CSS样式调试 在Elements面板，可以自由的操作DOM和CSS，来迭代布局和设计页面。在开发者工具打开的状态下，使用左上角的箭头按钮![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894142732.png)，可点选页面元素，查看该元素DOM和CSS等。也可以在Elements页签下，修改页面上的元素的DOM标签或CSS样式（修改立即生效），实时查看修改后效果。
  图1Elements页签查看调试DOM和CSS样式   
  ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001936102321.png "点击放大") 
- 打印日志信息 在Console页签下，可使用控制台打印日志信息。在Sources页签下，调试JavaScript时常用方法是将多个console.log()语句插入代码，重新加载页面后，可以在Console页签中，查看到打印的消息。Sources页签主要包括三个部分，左侧为页面请求文件列表，中间为选择文件的文件内容，右侧为JavaScript调试窗格。 想要在JavaScript中打印日志，需要找到相应文件，查找相关代码，然后插入console.log()。
  图2Sources页签布局   
  ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894302640.png "点击放大") 
- 调用低代码平台API 在Console页签下，可使用控制台调用低代码平台提供的API，以获取相关信息进行调试。
  图3调用低代码平台API   
  ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894302636.png "点击放大") 
- 断点调试 在Sources页签下，可以设置断点来调试JavaScript。使用断点，DevTools会在暂停时及时显示所有变量值。Chrome开发者工具，提供了代码行断点、条件代码行断点、DOM断点和事件侦听断点等多种断点，请根据调测的实际需求选择合适的断点。断点的类型和使用场景，如[表1]所示。
   表1Chrome断点类型及使用场景 
  | 断点类型  | 使用场景                    |
  |:---|:---|
  | 代码行   | 在确切的代码区域中。              |
  | 条件代码行 | 在确切的代码区域中，且仅当其他一些条件成立时。 |
  | DOM   | 在更改或移除特定DOM节点或其子级的代码中。  |
  | XHR   | 当XHR网址包含字符串模式时。         |
  | 事件    | 在触发点击等事件后运行的代码中。        |
  | 侦听器   | 在引发已捕获或未捕获异常的代码行中。      |
  | 异常函数  | 任何时候调用特定函数时。            |
     
  代码行断点调试是最为常见的断点调试方法， 设置代码行断点的方法是找到请求文件，在Sources左侧请求文件列表按照目录查找，也可以借助"Ctrl+F"搜索关键词找到相关文件。在Sources中间文件内容区域，找到要设置断点的代码行，单击行号，出现蓝色图标，这意味着这行代码上有一个代码行断点。如[图4]所示，在global_BubbleChartWidget.js文件的49行代码处，设置了一个代码行断点。
  刷新此网页，事件运行始终会在执行此行代码之前暂停，可单击右侧调试窗格的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894302644.png)按钮进行单步调试，或者单击调试窗格的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001936102325.png)按钮继续执行事件。
  图4代码行断点示例   
  ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000002098696000.png "点击放大") 
- 多终端测试 在进行页面自适应测试时，可采用Chrome开发者工具提供的模拟移动设备的功能。借助此功能，可无实物快速对网页进行多个终端测试。
  单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001936102317.png)，可启动模拟移动设备界面，设备工具栏在打开时默认处于自适应视口模式，可以将视口大小调整为所需的任何尺寸，另外还可以选择多种终端型号。
  图5模拟移动设备   
  ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894142736.png "点击放大")