HarmonyOS之变量可视化调试

一、概述

• 在 HarmonyOS 应用调试过程中，查看变量的变化过程是否符合预期结果是一项常用的调试方法。为此 DevEco Studio 提供了调试变量的可视化功能，支持 Java、C/C++ 和 JS 语言的基本数据类型、数值类型的集合和表达式可视化调试，并以Plain（树形）、Line（折线图） 、Bar（柱状图）和Table（表格）的形式呈现。
• 开发者可以根据这些图形化界面观察当前值、数据类型以及数值的连续变化，通过查看、比对、分析当前变量的变化过程和逻辑关系，判断出当前值（变量）是否符合预期结果，从而迅速有效的定位问题。
• 变量可视化支持当前值可视化和连续变化值可视化两种方式。

二、当前值可视化

• 当前值可视化：通过解析 Debugger 当前帧的信息，获取指定变量当前栈帧中的值，以Plain（树形）、Line（折线图）、Bar（柱状图）和Table（表格）方式进行可视化展示。当前值可视化每次只能观察一个变量，开发者可以根据需要切换变量进行观察。
• Plain（树形）显示结果示意图：

• Line（折线图）显示结果示意图：

• Bar（柱状图）显示结果示意图：

• Table（表格）显示结果示意图：

• 支持的数据类型包括基本类型（包括基本数据类型和基本数据类型的包装类）、基本类型的集合和表达式（结果为基本数据类型和基本数据类型的包装类）。其中：
• • Java 支持的呈现形式如下表所示：

数据类型	支持的展示类型
数值类型：byte、short、int、long、float、double基本数值类型及其包装类型等	Plain（树形）、Line（折线图）、Bar（柱状图）和Table（表格）
字符类型：char及其包装类、String等	Plain（树形）和Table（表格）
布尔类型：boolean及其包装类	Plain（树形）和Table（表格）
包含数值类型的集合或一维数组：List、vector、set等	Plain（树形）、Line（折线图）、Bar（柱状图）和Table（表格）
一维对象、键值对map和数值/字符/布尔类型的集合或数组	Plain（树形）和Table（表格）
其它	Plain（树形）

• • C/C++ 支持的呈现形式如下表所示：

数据类型	支持的展示类型
数值类型：int、float、double（或者指定大小的类型如int32_t、int64_t）和signed、unsigned、short、long等的组合	Plain（树形）、Line（折线图）、Bar（柱状图）和Table（表格）
字符类型：char16_t、char32_t、wchar_t等	Plain（树形）和Table（表格）
布尔类型：bool	Plain（树形）和Table（表格）
包含数值类型的集合List、vector、set等	Plain（树形）和Table（表格）
包含数值类型的一维数组	Plain（树形）、Line（折线图）、Bar（柱状图）和Table（表格）
一维对象、键值对map和数值/字符/布尔类型的集合或数组	Plain（树形）和Table（表格）
其它	Plain（树形）

• • C/C++ 可视化功能说明：
• • • 如果观察的变量在当前断点之后，则会提示“Variable not initialized”。
• • • 如果全局静态变量在代码块中未使用，则会提示“error: use of undeclared identifier ‘varName’ ”。
• • • 如果在全局非静态变量和局部变量中存在同名变量名，则在添加 C/C++ 全局非静态变量时，需要以“::变量名”方式添加，才能正常观察其值。
• • JS 支持的呈现形式如下表所示：

数据类型	支持的展示类型
数值类型：number	Plain（树形）、Line（折线图）、Bar（柱状图）和Table（表格）
字符类型：string	Plain（树形）和Table（表格）
布尔类型：boolean	Plain（树形）和Table（表格）
一维数值类型的数组：array	Plain（树形）、Line（折线图）、Bar（柱状图）和Table（表格）
一维对象、null和undefined	Plain（树形）和Table（表格）
其它	Plain（树形）

• • JS 可视化功能说明：
• • • JS 语法定义变量不区分数据类型，因此，可视化功能会依据数据结果进行智能识别。例如，array 集合识别为数值集合，则支持 Plain、Line、Bar 和 Table；如果识别为字符集合，则只支持 Plain 和 Table。
• • • 针对 LiteWearable 和 Smart Vision 设备，如果变量在调试变量栏的 local 中存在，则可视化结果与 local 中该变量的结果保持一致；如果在 local 中不存在该变量，则显示结果为 Object，如下图中的变量 object，在 local 中存在，则以 local 中的取值为准。

三、连续变化值可视化

• 连续变化值可视化：通过坐标图的方式，可以同时显示多个变量的连续变化过程，以及变量之间的关系。
• 连续变化值可视化，只支持基本数值类型的数据可视化。
• 以 Java 变量可视化为例进行说明：

• 分析：
• • 在连续变化值可视化中，会呈现所有变量的连续变化结果，其中横坐标为断点命中clock，纵坐标为变量值，从添加观察变量的 clock 开始记录变量值的连续变化。
• • 在图中，圆圈符号表示支持（只有数值类型支持）连续变化值可视化，三角符号表示不支持。
• • 在图中，如果有多个变量的连续变化图，为方便查看其中指定的变量的变化趋势，避免非观察变量带来的影响，可以点击图形上方的变量名，将其设置为灰色，这样就可以在坐标图中隐藏该变量，再次点击灰色的变量名，则在坐标图中呈现出该变量的连续变化值。
• • 横坐标记录范围最大为 100，超过 100 后，则从 1 开始清除前面的数据。

• 在连续变化值可视化中，可以点击 clock 节点，会自动跳转到对应值的代码行（断点位置），并且会高亮显示代码行和 clock 时钟，如下图所示：

四、变量可视化操作

• Java、C/C++ 和 JS 调试变量可视化的操作相同。
• 在待调试的源代码中打上断点，并启动调试功能。
• 打开变量可视化调试窗口，可通过在编辑器或者调试变量栏窗口中，选中变量，点击鼠标右键，选中“Add to Visual Watches”，自动将该变量添加到可视化窗口中。
• 查看变量的当前值和连续变化值。