一种UI界面字段数据的调试方法、系统及相关装置与流程

一种ui界面字段数据的调试方法、系统及相关装置
技术领域
1.本技术涉及计算机领域，特别涉及ui界面字段数据的调试方法、系统及相关装置。


背景技术：

2.在移动端开发调试过程中，经常需要针对ui界面的字段数据进行修改，然后促使ui界面刷新，判断ui界面是否出现异常，用于验证各字段数据在变化时是否对ui界面产生不良影响。当前调试过程依赖于人工修改字段，然而当ui界面字段数据较多时，人工修改字段进行ui界面调试效率低，且由于ui界面渲染占用大量时间，使得调试过程效率极低。


技术实现要素：

3.本技术的目的是提供一种ui界面字段数据的调试方法、ui界面字段数据的调试系统、计算机可读存储介质和电子设备，能够提高ui界面的调试效率。
4.为解决上述技术问题，本技术提供一种ui界面字段数据的调试方法，具体技术方案如下：
5.接收ui界面的源数据，确定所述源数据中待调试的目标字段数据；
6.对所述目标字段数据进行数据修改，生成调试源数据；
7.在渲染所述调试源数据生成新ui界面后，判断所述新ui界面是否存在异常；
8.若是，确定所述目标字段数据为异常字段。
9.可选的，判断所述新ui界面是否存在异常包括：
10.对所述新ui界面进行画面截图，得到新ui界面图；
11.对所述新ui界面图进行图像分析，判断所述新ui界面图是否存在边界异常。
12.可选的，所述对目标字段数据进行数据修改，生成调试源数据包括：
13.对目标字段数据采用预设修改方式进行字段修改，生成调试源数据；其中，所述预设修改方式包括字符串长度变更、整形数字变更和布尔值反转中的至少一种。
14.可选的，确定所述源数据中待调试的目标字段数据包括：
15.确定所述源数据中各字段数据的调试顺序；
16.根据所述调试顺序确定所述源数据中待调试的目标字段数据。
17.可选的，确定所述源数据中各字段数据的调试顺序包括：
18.对所述源数据进行数据结构转换，得到一维数据格式的源数据；
19.根据所述一维数据格式的源数据中的键编号关系链确定各字段数据之间的父子关系；
20.根据所述父子关系确定各字段数据之间的调试顺序。
21.可选的，根据所述调试顺序确定所述源数据中待调试的目标字段数据包括：
22.根据所述键编号关系链确定已修改的字段数据的最大键编号；
23.将调试顺序中大于所述最大键编号的最小键编号对应的未修改字段数据作为所述源数据中待调试的目标字段数据。
24.可选的，若所述新ui界面不存在异常，还包括：
25.确定所述调试顺序中所述目标字段数据之后的第二目标字段数据；
26.将所述第二目标字段数据作为所述目标字段数据，并返回执行对目标字段数据进行数据修改，并生成调试源数据的步骤。
27.本技术还提供一种ui界面字段数据的调试系统，包括：
28.数据接收模块，用于接收ui界面的源数据，确定所述源数据中待调试的目标字段数据；
29.数据修改模块，用于对所述目标字段数据进行数据修改，生成调试源数据；
30.异常判断模块，用于在渲染所述调试源数据生成新ui界面后，判断所述新ui界面是否存在异常；
31.字段定位模块，用于所述异常判断模块的判断结果为是时，确定所述目标字段数据为异常字段。
32.本技术还提供一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现如上所述的方法的步骤。
33.本技术还提供一种电子设备，包括存储器和处理器，所述存储器中存有计算机程序，所述处理器调用所述存储器中的计算机程序时实现如上所述的方法的步骤。
34.本技术提供一种ui界面字段数据的调试方法，包括：接收ui界面的源数据，确定所述源数据中待调试的目标字段数据；对所述目标字段数据进行数据修改，生成调试源数据；在渲染所述调试源数据生成新ui界面后，判断所述新ui界面是否存在异常；若是，确定所述目标字段数据为异常字段。
35.本技术在接收ui界面的源数据后，先确定待调试的目标字段数据，针对目标字段数据进行修改并调试ui界面，若调试源数据对应的新ui界面存在异常，可直接确定目标字段数据为异常字段。无需人工修改元数据，也无需人工验证ui界面是否发生变化，能够有效降低ui界面源数据的调试成本，同时大大提高了调试效率。
36.本技术还提供一种ui界面字段数据的调试系统、计算机可读存储介质和电子设备，具有上述有益效果，此处不再赘述。
附图说明
37.为了更清楚地说明本技术实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本技术的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。
38.图1为本技术实施例所提供的一种ui界面字段数据的调试方法的流程图；
39.图2为本技术实施例所提供的另一种ui界面字段数据的调试方法的流程图；
40.图3为本技术实施例所提供的一种ui界面字段数据的调试系统结构示意图；
41.图4为本技术实施例提供的一种电子设备的结构示意图。
具体实施方式
42.为使本技术实施例的目的、技术方案和优点更加清楚，下面将结合本技术实施例
中的附图，对本技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本技术一部分实施例，而不是全部的实施例。基于本技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。
43.当前，在进行ui界面的开发调试过程中，需要针对ui界面的字段数据进行调试验证，以判断字段数据修改时是否会导致ui界面出现异常，例如可能导致ui界面边界异常，或者出现数据覆盖。但当前调试主要依赖于人工修改，并对修改后的数据渲染得到的ui界面进行人工验证，给调试人员造成不小的压力，且调试效率较低。
44.为解决上述问题，本技术提供一种ui界面字段数据的调试方法，具体技术方案如下：
45.s101：接收ui界面的源数据，确定源数据中待调试的目标字段数据；
46.本实施例可以应用于一切需要执行ui界面调试的电子设备，特别是移动终端，可以由与包含ui界面的电子设备相连的服务器或者第三方终端设备实现。为便于描述，下文称包含ui界面的电子设备为被测设备，用于执行本实施例和后续各实施例的电子设备为调试设备。当然，在此对于二者之间的连接关系不作限定，仅要求设备之间可实现源数据等数据的传输即可。
47.本步骤需要先接收ui界面的源数据。在此对于如何接收ui界面的源数据不作限定。可以通过调试设备与被测设备之间的任意可行的通信方式或数据传输方式接收ui界面的源数据。此外，在接收ui界面的源数据前，可以先向被测设备发送源数据的请求，然后接收ui界面的源数据。
48.本实施例对于源数据的具体内容不作限定，其可以包括ui界面中包含的显示数据以及渲染过程中所需应用的数据。
49.在得到源数据后，需要确定源数据中待调试的目标字段数据。由于调试时需要逐个字段数据进行调试验证，本步骤需要确定本次调试过程所需要进行验证的目标字段数据。本实施例在此对于如何确定该目标字段数据不作具体限定，例如可以根据事先设定的调试顺序确定本次调试过程中待调试的目标字段数据，也可以对已调试的字段数据进行标记，以便从不包含标记的字段数据中选取目标字段数据。
50.s102：对目标字段数据进行数据修改，生成调试源数据；
51.本步骤旨在对目标字段数据进行数据修改，从而生成调试源数据。在此对于如何进行数据修改不作具体限定，可以采用预设修改方式进行字段修改，生成调试源数据。该预设修改方式包括但不限于字符串长度变更、整形数字变更和布尔值反转中的至少一种。例如，若选择字符串长度变更，可以对目标字段数据进行字符串长度扩大，以测试长度扩大后的字段数据是否在渲染后会导致ui界面的边界越界。当然，在进行数据修改时，可以采用多种方式相结合进行修改，例如可以同时采用字符串长度变更和整形数字变更对目标字段数据进行数据修改。
52.容易理解的是，本步骤中的修改通常为对目标字段数据参数的修改，本领域技术人员还可以在上述三种修改方式外采用其他用于调试的数据修改方式，也应在本技术的保护范围内。
53.在进行数据修改后，所得到的调试源数据，与步骤s101中接收的源数据相比，应当仅有一个字段数据存在差异。
54.s103：在渲染调试源数据生成新ui界面后，判断新ui界面是否存在异常；若是，进入s104；
55.本步骤旨在判断新ui界面是否存在异常，而对于如何渲染调试源数据并生成新ui界面不作具体限定。通常而言，本步骤可以在调试设备将调试源数据发往被测设备，并由被测设备渲染调试源数据，生成新ui界面后，执行判断过程。若调试设备为服务器或者具有ui界面渲染功能的电子设备，则调试设备可以直接根据调试源数据渲染得到新ui界面，从而执行新ui界面是否存在异常的判断。甚至，还可以由调试设备将调试源数据发往另一个与被测设备具有相同ui渲染条件和环境的验证设备，从而分别在被测设备和验证设备显示源数据对应的ui界面，以及调试源数据对应的新ui界面，有助于直接比对两个ui界面，直接确定新ui界面到底是否存在异常。
56.在此对于如何判断新ui界面是否存在异常不作具体限定，可以将新ui界面与源数据对应的ui界面进行界面比对，或者与预定设计的ui标准界面进行比对。也可以不执行ui界面间的比对，利用其他配置完成的ui界面检测模型或应用对新ui界面进行异常判断，均可以作为判断新ui界面是否存在异常的判断方式。
57.s104：确定目标字段数据为异常字段。
58.若新ui界面存在异常，可以确定目标字段数据为异常字段，即提示当目标字段数据发生变化时，可能造成ui界面出现异常，例如发生ui界面边界越界、数据覆盖等异常，以便于运维人员对异常字段进行修复，降低ui界面的异常率。
59.当然，若新ui界面未存在异常，说明本次调试过程中确定的目标字段数据尚未造成ui界面出现异常。容易理解的是，在步骤s102中采用的数据修改方式越全面，在新ui界面未存在异常时，越能确保目标字段数据的健壮性。
60.本技术实施例在接收ui界面的源数据后，先确定待调试的目标字段数据，针对目标字段数据进行修改并调试ui界面，若调试源数据对应的新ui界面存在异常，可直接确定目标字段数据为异常字段。无需人工修改元数据，也无需人工验证ui界面是否发生变化，能够有效降低ui界面源数据的调试成本，同时大大提高了调试效率。
61.基于上述实施例，作为优选的实施例，在渲染调试源数据生成新ui界面后，该判断过程可以包括如下步骤：
62.s201：对新ui界面进行画面截图，得到新ui界面图；
63.s202：对新ui界面图进行图像分析，判断新ui界面图是否存在边界异常。
64.本实施例针对于上一实施例中步骤s103判断新ui界面是否存在异常的过程进行具体描述，在判断时，对调试源数据进行画面截图，得到新ui界面的界面图片。此后对新ui界面图进行图像分析，在此对于具体的图像分析方式不作限定。例如可以将新ui界面图上传至云端，利用云端设备对新ui界面图进行图像分析，或者将新ui界面图与预定设计的ui标准界面图像进行比对等，从而得到相应的判断结果。
65.基于上述实施例，作为优选的实施例，接收ui界面的源数据后，本实施例针对如何确定源数据中待调试的目标字段数据作进一步描述，其过程可以包括：
66.s301：确定源数据中各字段数据的调试顺序；
67.s302：根据调试顺序确定源数据中待调试的目标字段数据。
68.即先确定字段数据的调试顺序，需要说明的是，该调试顺序并不一定需要在确定
待调试的目标字段数据时实时配置。由于在调试过程中需要逐个字段数据进行调试，若在第一次调试过程中确定了调试顺序，则在后续调试过程中，可以直接获取并应用第一次调试过程中确定的调试顺序。
69.此外，本实施例对于如何确定源数据中各字段数据的调试顺序不作具体限定，该调试顺序可以预先设定，无论采用何种调试顺序，均应保证所有的字段数据均可被调试。参见图2，图2为本技术实施例所提供的另一种ui界面字段数据的调试方法的流程图，此时本技术实施例提供的一种ui界面字段数据的调试方法完整过程如下：
70.第一步、接收ui界面的源数据；
71.第二步、确定源数据中各字段数据的调试顺序；
72.第三步、根据调试顺序确定源数据中待调试的目标字段数据；
73.第四步、对目标字段数据进行数据修改，生成调试源数据；
74.第五步、在渲染调试源数据生成新ui界面后，判断新ui界面是否存在异常；若是，进入第六步；
75.第六步、确定目标字段数据为异常字段。
76.下文为在上述实施例的基础上，所提供一种优选的确定调试顺序的过程，其具体过程如下：
77.s3011：对源数据进行数据结构转换，得到一维数据格式的源数据；
78.在得到源数据后，由于通常源数据为json结构数据，其呈现树状结构的数据关系，为了便于确定调试顺序，对源数据进行数据结构转换，得到一维数据格式的源数据。在此对于一维数据格式不作具体限定，可以为数组，也可以为队列等等。
79.s3012：根据一维数据格式的源数据中的键编号关系链确定各字段数据之间的父子关系；
80.在转换得到一维数据格式的源数据的过程中，可以确定源数据中各字段数据的键编号，即kv(key—value)键值对中的key值，从而确定键编号关系链，表明了各关键字的关系链，从而明确各字段数据之间的父子关系。例如若采用一维数组，且得到的一维数组为a&b&c&d的形式，则字段数据d的父节点是字段数据c，字段数据c的父节点是字段数据b，字段数据b的父节点是字段数据a。
81.s3013：根据父子关系确定各字段数据之间的调试顺序。
82.确定父子关系后，即可逐一确定字段数据的调试顺序。例如，若得到一维数组为a&b&c&d，则调试顺序可以为a
→b→c→
d，也可以为d
→c→b→
a。
83.当然上文仅为本实施例公开的一种确定调试顺序的过程，本领域技术人员还可以在本实施例的基础上采用其他方式确定调试顺序，甚至为源数据中的字段数据自定义调试顺序。
84.在步骤s301确定源数据中各字段数据的调试顺序的基础上，步骤s302根据调试顺序确定源数据中待调试的目标字段数据时可以包括如下步骤：
85.s3021：根据键编号关系链确定已修改的字段数据的最大键编号；
86.s3022：将调试顺序中大于最大键编号的最小键编号对应的未修改字段数据作为源数据中待调试的目标字段数据。
87.由于除第一次调试过程外，其余后续调试过程中所确定的目标字段数据均应为未
调试过的目标字段数据，在已经根据键编号关系链确定调试顺序时，可以先确定已作为目标字段数据对应的键编号，将大于最大键编号的最小键编号对应的未修改字段数据作为本次待调试的目标字段数据，即可确保循环调试过程中，所选择的目标字段数据按照调试顺序一一确定，避免字段数据被遗漏，保证调试过程的完整性。
88.换句话说，若根据调试源数据得到的新ui界面不存在异常，此后可以循环进行调试，即确定调试顺序中目标字段数据之后的第二目标字段数据，将第二目标字段数据作为目标字段数据，重新执行如步骤s102至s104的调试过程。
89.则此时，本实施例提供的一种ui界面字段数据的调试方法，其在初次进行调试时，对应的完整执行过程可以如下：
90.第一步、接收ui界面的源数据，对源数据进行数据结构转换，得到一维数据格式的源数据；
91.第二步、根据一维数据格式的源数据中的键编号关系链确定各字段数据之间的父子关系；
92.第三步、根据父子关系确定各字段数据之间的调试顺序；
93.第四步、根据键编号关系链确定已修改的字段数据的最大键编号，将调试顺序中大于最大键编号的最小键编号对应的未修改字段数据作为源数据中待调试的目标字段数据
94.第五步、对目标字段数据进行数据修改，生成调试源数据；
95.第六步、在渲染调试源数据生成新ui界面后，判断新ui界面是否存在异常；若是，进入第七步；若否，进入第八步；
96.第七步、确定目标字段数据为异常字段。
97.第八步、确定调试顺序中目标字段数据之后的第二目标字段数据，将第二目标字段数据作为目标字段数据，返回第五步。
98.下文以本技术的一种具体应用过程对本技术提供的一种ui界面字段数据的调试方法进行描述，以移动端设备上某app的ui界面作为待调试的ui界面，所采用的调试设备可以为笔记本电脑或者其他具备数据处理功能的终端设备，该过程可以如下：
99.1、用户建立移动端设备与调试设备的连接；
100.2、用户打开app，对初始ui界面截图并保存；
101.3、操控调试设备向移动端设备请求获取ui界面的源数据，并在移动端设备点击确认，此后调试设备接收ui界面的源数据；
102.此后，下文的调试过程均由调试设备自动完成。
103.若初次对该app的ui界面进行调试，执行如下步骤：
104.确定源数据中各字段数据的调试顺序，将调试顺序中第一的字段数据作为待调试的目标字段数据；
105.对目标字段数据进行数据修改，该数据修改包括但不限于字符串长度变更、整形数字变更和布尔值反转等，数据修改后生成调试源数据；
106.调试设备将调试源数据发送至移动端设备，由移动端设备渲染调试源数据得到新ui界面，并截图保存；
107.比较初始ui界面和新ui界面的截图，判断新ui界面是否存在异常；
108.若存在，确定调试顺序中第一的字段数据为异常字段；
109.若不存在，继续执行调试。
110.若非初次对该app的ui界面进行调试，执行如下步骤：
111.根据键编号关系链确定已修改的字段数据的最大键编号，将调试顺序中大于最大键编号的最小键编号对应的未修改字段数据作为目标字段数据。
112.对目标字段数据进行数据修改，该数据修改包括但不限于字符串长度变更、整形数字变更和布尔值反转等，数据修改后生成调试源数据；
113.调试设备将调试源数据发送至移动端设备，由移动端设备渲染调试源数据得到新ui界面，并截图保存；
114.比较初始ui界面和新ui界面的截图，判断新ui界面是否存在异常；
115.若存在，确定调试顺序中第一的字段数据为异常字段；
116.若不存在，继续执行调试，直至无法确定目标字段数据时结束。
117.在判断新ui界面是否存在异常时，也可以借助于第三方设备或者云端进行判断，在此不作赘述。
118.由上文可以看出，用户只需建立移动端设备和调试设备之间的连接，此后的调试过程均可自动执行，不必人工修改数据，人工验证ui界面是否存在异常，实现了调试自动化，提高了ui界面调试效率。
119.下面对本技术实施例提供的ui界面字段数据的调试系统进行介绍，下文描述的调试系统与上文描述的ui界面字段数据的调试方法可相互对应参照。
120.参见图3，图3为本技术实施例所提供的一种ui界面字段数据的调试系统结构示意图，本技术还提供一种ui界面字段数据的调试系统，包括：
121.数据接收模块100，用于接收ui界面的源数据，确定所述源数据中待调试的目标字段数据；
122.数据修改模块200，用于对所述目标字段数据进行数据修改，生成调试源数据；
123.异常判断模块300，用于在渲染所述调试源数据生成新ui界面后，判断所述新ui界面是否存在异常；
124.字段定位模块400，用于所述异常判断模块的判断结果为是时，确定所述目标字段数据为异常字段。
125.基于上述实施例，作为优选的实施例，异常判断模块300包括：
126.截图单元，用于对所述新ui界面进行画面截图，得到新ui界面图；
127.图像分析单元，用于对所述新ui界面图进行图像分析，判断所述新ui界面图是否存在边界异常。
128.基于上述实施例，作为优选的实施例，数据修改模块200为用于对目标字段数据采用预设修改方式进行字段修改，生成调试源数据的模块；其中，所述预设修改方式包括字符串长度变更、整形数字变更和布尔值反转中的至少一种。
129.基于上述实施例，作为优选的实施例，数据接收模块100包括：
130.顺序确定单元，用于确定所述源数据中各字段数据的调试顺序；
131.字段数据确定单元，用于根据所述调试顺序确定所述源数据中待调试的目标字段数据。
132.基于上述实施例，作为优选的实施例，所述顺序确定单元包括：
133.结构转换子单元，用于对所述源数据进行数据结构转换，得到一维数据格式的源数据；
134.父子关系确定子单元，用于根据所述一维数据格式的源数据中的键编号关系链确定各字段数据之间的父子关系；
135.顺序确定单元，用于根据所述父子关系确定各字段数据之间的调试顺序。
136.基于上述实施例，作为优选的实施例，字段数据确定单元为用于根据所述键编号关系链确定已修改的字段数据的最大键编号，将调试顺序中大于所述最大键编号的最小键编号对应的未修改字段数据作为所述源数据中待调试的目标字段数据的单元。
137.基于上述实施例，作为优选的实施例，若所述新ui界面不存在异常，还包括：
138.重调试模块，用于确定所述调试顺序中所述目标字段数据之后的第二目标字段数据；将所述第二目标字段数据作为所述目标字段数据，并进入所述数据修改模块。
139.本技术还提供了一种计算机可读存储介质，其上存有计算机程序，该计算机程序被执行时可以实现上述实施例所提供的步骤。该存储介质可以包括：u盘、移动硬盘、只读存储器(read-only memory，rom)、随机存取存储器(random access memory，ram)、磁碟或者光盘等各种可以存储程序代码的介质。
140.本技术还提供了一种电子设备，参见图4，本技术实施例提供的一种电子设备的结构图，如图4所示，可以包括处理器1410和存储器1420。
141.其中，处理器1410可以包括一个或多个处理核心，比如4核心处理器、8核心处理器等。处理器1410可以采用dsp(digital signal processing，数字信号处理)、fpga(field－programmable gate array，现场可编程门阵列)、pla(programmable logic array，可编程逻辑阵列)中的至少一种硬件形式来实现。处理器1410也可以包括主处理器和协处理器，主处理器是用于对在唤醒状态下的数据进行处理的处理器，也称cpu(central processing unit，中央处理器)；协处理器是用于对在待机状态下的数据进行处理的低功耗处理器。在一些实施例中，处理器1410可以在集成有gpu(graphics processing unit，图像处理器)，gpu用于负责显示屏所需要显示的内容的渲染和绘制。一些实施例中，处理器1410还可以包括ai(artificial intelligence，人工智能)处理器，该ai处理器用于处理有关机器学习的计算操作。
142.存储器1420可以包括一个或多个计算机可读存储介质，该计算机可读存储介质可以是非暂态的。存储器1420还可包括高速随机存取存储器，以及非易失性存储器，比如一个或多个磁盘存储设备、闪存存储设备。本实施例中，存储器1420至少用于存储以下计算机程序1421，其中，该计算机程序被处理器1410加载并执行之后，能够实现前述任一实施例公开的ui界面字段数据的调试方法中的相关步骤。另外，存储器1420所存储的资源还可以包括操作系统1422和数据1423等，存储方式可以是短暂存储或者永久存储。其中，操作系统1422可以包括windows、linux、android等。
143.在一些实施例中，电子设备还可包括有显示屏1430、输入输出接口1440、通信接口1450、传感器1460、电源1470以及通信总线1480。
144.当然，图4所示的电子设备的结构并不构成对本技术实施例中电子设备的限定，在实际应用中电子设备可以包括比图4所示的更多或更少的部件，或者组合某些部件。
145.说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。对于实施例提供的系统而言，由于其与实施例提供的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。
146.本文中应用了具体个例对本技术的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本技术的方法及其核心思想。应当指出，对于本技术领域的普通技术人员来说，在不脱离本技术原理的前提下，还可以对本技术进行若干改进和修饰，这些改进和修饰也落入本技术权利要求的保护范围内。
147.还需要说明的是，在本说明书中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。