调试面板

完成应用设计后,您可以在预览模式下使用调试面板进行运行时应用错误自排查。本文介绍调试面板的详细使用方法。

背景信息

当您的应用在运行阶段发生预期之外的异常行为时,您可以在预览环境下借助调试面板进行错误自排查,调试面板主要提供了以下功能:

  • 实时日志

  • 元素审查

开启和关闭调试面板

开启调试面板

  1. 预览应用,调试面板的功能将在预览模式下自动开启。

  2. 单击悬浮按钮。

  3. 使用调试面板进行错误自排查。

image.png

说明
  • 调试模式当前仅在预览环境生效。

关闭调试面板

  1. 点击调试面板右侧的image.png

  2. 在下拉菜单中点击关闭调试模式。

image.png

说明
  • 关闭调试模式后,页面将自动刷新。

  • 关闭调试模式后如需再次打开,请在浏览器新 Tab 页中重新打开页面。

日志

日志格式

调试面板在日志模式下,会实时显示当前应用的运行日志,日志通常由日志时间、日志等级和日志信息等部分组成:

image.png

同时运行时日志被划分为了以下四个不同等级:

  • 系统日志,运行应用系统初始化、执行等产生的日志。

  • 常规日志,通常为用户自定义的日志。

  • 警告日志,运行应用发生了警告性错误产生的日志。

  • 错误日志,运行应用发生了严重错误产生的日志。

说明
  • 错误日志和警告日志会在面板中以黄色和红色底色进行高亮显示。

  • 调试面板上方会显示当前警告和错误日志的数量。

日志筛选

调试面板的日志功能支持用户自定义搜索或按照等级、日志产生的环境范围进行日志筛选,操作如下:

日志搜索

  1. 在调试面板的日志搜索区域输入预期搜索内容。

  2. 敲击回车键或点击右侧image.png

image.png

日志筛选

  1. 在调试面板的日志筛选区根据日志等级或环境范围进行下拉选择筛选。

image.png

image.png

日志清除

调试面板的日志功能支持用户快速清除当前调试面板中的全部日志,操作如下:

  1. 点击调试面板的日志清除区域的image.png

image.png

自定义日志

您可以在前端或者后端逻辑流中进行自定义日志打印,详情请参考打印日志一章。

元素审查

审查与大纲树

在调试面板中点击「审查」图标时,面板将自动切换至元素审查模式,此时可以通过鼠标选择页面上的内容进行组件级别的元素审查。

image

调试面板在元素审查模式下,也可以通过底部大纲树选中组件进行元素审查。

image

说明
  • 通过审查按钮选中的元素会在大纲树高亮。

  • 元素审查的审查粒度为可搭建的魔笔组件。

静态属性面板

元素审查面板的静态属性面板支持显示该组件的所有可配置属性:

image

动态数据面板

在元素审查面板的静态属性面板中选择动态属性后可显示动态数据面板,该面板显示当前组件绑定的实体或数据源等变量情况:

image