CN110399063B - 页面元素属性的查看方法及装置 - Google Patents

Abstract

本发明公开了一种页面元素属性的查看方法及装置，其中，方法包括：当监听到页面的用户操作事件时，获取用户操作事件的操作坐标位置；对页面的各个视图进行遍历，根据操作坐标位置查找用户操作事件对应的页面元素所属的目标视图；获取目标视图的元素属性信息；生成遮罩层，在遮罩层中呈现元素属性信息。该方式提供了一种高效的选中元素的属性信息的查看交互方案，通过对页面的视图进行遍历，从而确定用户所选中的目标视图，并将目标视图的元素属性信息呈现在遮罩层中，使得相关人员通过简单的页面操作就可以快速地获取到选中元素所属视图的属性信息，能够减少操作的复杂性，有利于提升应用程序的开发或者测试效率。

Description

页面元素属性的查看方法及装置

技术领域

本发明涉及页面处理技术领域，具体涉及一种页面元素属性的查看方法及装置。

背景技术

随着通信技术的发展，终端的功能列表中包含了越来越多的应用程序，例如电脑中安装的应用程序、智能手机中安装的应用程序。应用程序大多包含页面，例如基于超文本标记语言(Hyper Text Markup Language，HTML)编写的网页。在一些应用场景中，需要获取页面指定元素的属性信息，如在开发或者测试的过程中，页面中的元素布局信息、文本框文本内容、文本框文本字体等属性信息出现异常时，页面会显示异常。在排查异常问题时，需要去获取页面中元素的属性信息。

发明人在实现本发明的过程中发现：在一种现有技术(CN 1048666509 A)中，根据页面元素的标识属性、自定义属性、类属性中的至少一项获取页面元素的路径，从而实现指定元素的定位，但缺乏一种快速查看选中元素的属性信息的方案，仍然不能满足开发或者测试人员快速获取元素的属性信息的需求；而在另一种现有技术中，利用专用的开发工具来定位页面元素的属性信息，例如Xcode自带的Debug view Hierarchy工具，但是这种方式需要安装相应的开发工具，不方便使用且效率低，实时性要求也较高。由此可见，现有技术中缺乏一种能够高效且准确的查看页面元素的属性信息的方法。

发明内容

鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的页面元素属性的查看方法及装置。

根据本发明的一个方面，提供了一种页面元素属性的查看方法，包括：

当监听到页面的用户操作事件时，获取用户操作事件的操作坐标位置；

对页面的各个视图进行遍历，根据操作坐标位置查找用户操作事件对应的页面元素所属的目标视图；

获取目标视图的元素属性信息；

生成遮罩层，在遮罩层中呈现元素属性信息。

可选地，根据操作坐标位置查找用户操作事件对应的页面元素所属的目标视图进一步包括：查找目标视图，使操作坐标位置位于目标视图的视图区域内；

其中，目标视图不具有子视图或者操作坐标位置不位于目标视图的任意一个子视图的视图区域内。

可选地，对页面的各个视图进行遍历，根据操作坐标位置查找用户操作事件对应的页面元素所属的目标视图进一步包括：

步骤S0，将根视图添加到第一视图集合中；

步骤S1，从第一视图集合中提取一个待处理视图，提取完成后从第一视图集合中删除待处理视图；

步骤S2，遍历待处理视图的各个子视图，判断是否存在操作坐标位置位于其视图区域内的子视图；若是，则执行步骤S3；若否，则执行步骤S4；

步骤S3，将操作坐标位置位于其视图区域内的子视图添加至第一视图集合中，并跳转执行步骤S1；

步骤S4，判断操作坐标位置是否位于待处理视图的视图区域内；若是，则执行步骤S5；若否，则执行步骤S6；

步骤S5，将待处理视图添加到第二视图集合中；

步骤S6，判断第一视图集合中的视图数量是否大于零；若是，则跳转执行步骤S1；若否，则从第二视图集合中选取目标视图。

可选地，步骤S2中，遍历待处理视图的各个子视图之前，方法进一步包括：

判断待处理视图是否具有至少一个子视图；若是，则执行遍历待处理视图的各个子视图的步骤；若否，则跳转执行步骤S4。

可选地，从第二视图集合中选取目标视图具体为：从第二视图集合中选取最后一个添加的视图作为目标视图。

可选地，在根据操作坐标位置查找用户操作事件对应的页面元素所属的目标视图之后，方法还包括：

对目标视图的视图区域进行高亮展示处理。

可选地，对目标视图的视图区域进行高亮展示处理进一步包括：

对目标视图进行快照备份，生成经过高亮处理的目标视图图像；

在生成遮罩层之后，根据目标视图的区域坐标，将目标视图图像添加至遮罩层中。

可选地，在遮罩层中呈现元素属性信息进一步包括：

将目标视图的元素属性信息以文本形式呈现在遮罩层中。

可选地，目标视图的元素属性信息包括以下一种或多种信息：

元素布局信息、文本框文本内容信息、文本框文本字体信息、文本框文本颜色信息、元素透明度信息。

根据本发明的另一方面，提供了一种页面元素属性的查看装置，包括：

位置获取模块，适于当监听到页面的用户操作事件时，获取用户操作事件的操作坐标位置；

查找模块，适于对页面的各个视图进行遍历，根据操作坐标位置查找用户操作事件对应的页面元素所属的目标视图；

属性获取模块，适于获取目标视图的元素属性信息；

呈现模块，适于生成遮罩层，在遮罩层中呈现元素属性信息。

可选地，查找模块进一步适于：

查找目标视图，使操作坐标位置位于目标视图的视图区域内；

其中，目标视图不具有子视图或者操作坐标位置不位于目标视图的任意一个子视图的视图区域内。

可选地，查找模块进一步适于：

步骤S0，将根视图添加到第一视图集合中；

步骤S1，从第一视图集合中提取一个待处理视图，提取完成后从第一视图集合中删除待处理视图；

步骤S2，遍历待处理视图的各个子视图，判断是否存在操作坐标位置位于其视图区域内的子视图；若是，则执行步骤S3；若否，则执行步骤S4；

步骤S3，将操作坐标位置位于其视图区域内的子视图添加至第一视图集合中，并跳转执行步骤S1；

步骤S4，判断操作坐标位置是否位于待处理视图的视图区域内；若是，则执行步骤S5；若否，则执行步骤S6；

步骤S5，将待处理视图添加到第二视图集合中；

步骤S6，判断第一视图集合中的视图数量是否大于零；若是，则跳转执行步骤S1；若否，则从第二视图集合中选取目标视图。

可选地，查找模块进一步适于：

步骤S2中，遍历待处理视图的各个子视图之前，判断待处理视图是否具有至少一个子视图；若是，则执行遍历待处理视图的各个子视图的步骤；若否，则跳转执行步骤S4。

可选地，查找模块进一步适于：从第二视图集合中选取最后一个添加的视图作为目标视图。

可选地，呈现模块进一步适于：

对目标视图的视图区域进行高亮展示处理。

可选地，呈现模块进一步适于：

对目标视图进行快照备份，生成经过高亮处理的目标视图图像；

在生成遮罩层之后，根据目标视图的区域坐标，将目标视图图像添加至遮罩层中。

可选地，呈现模块进一步适于：

将目标视图的元素属性信息以文本形式呈现在遮罩层中。

可选地，目标视图的元素属性信息包括以下一种或多种信息：

元素布局信息、文本框文本内容信息、文本框文本字体信息、文本框文本颜色信息、元素透明度信息。

根据本发明的又一方面，提供了一种电子设备，包括：处理器、存储器、通信接口和通信总线，所述处理器、所述存储器和所述通信接口通过所述通信总线完成相互间的通信；

所述存储器用于存放至少一可执行指令，所述可执行指令使所述处理器执行上述页面元素属性的查看方法对应的操作。

根据本发明的再一方面，提供了一种计算机存储介质，所述存储介质中存储有至少一可执行指令，所述可执行指令使处理器执行如上述页面元素属性的查看方法对应的操作。

根据本发明的页面元素属性的查看方法及装置，当监听到页面的用户操作事件时，获取用户操作事件的操作坐标位置；对页面的各个视图进行遍历，根据操作坐标位置查找用户操作事件对应的页面元素所属的目标视图；获取目标视图的元素属性信息；生成遮罩层，在遮罩层中呈现元素属性信息。该方式提供了一种高效的选中元素的属性信息的查看交互方案，通过对页面的视图进行遍历，从而确定用户所选中的目标视图，并将目标视图的元素属性信息呈现在遮罩层中，使得相关人员通过简单的页面操作就可以快速地获取到选中元素所属视图的属性信息，能够减少操作的复杂性，有利于提升应用程序的开发或者测试效率。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。

附图说明

通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：

图1示出了根据本发明一个实施例的页面元素属性的查看方法的流程示意图；

图2示出了根据本发明另一个实施例的页面元素属性的查看方法的流程示意图；

图3示出了本发明一个实施例中步骤S202包含的各个子步骤的示意图；

图4示出了本发明一个示例中页面元素属性的查看方法的效果示意图；

图5示出了根据本发明又一个实施例的页面元素属性的查看装置的功能模块图；

图6示出了根据本发明实施例的一种电子设备的结构示意图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

图1示出了根据本发明一个实施例的页面元素属性的查看方法的流程示意图，本发明对此不做限定。如图1所示，该方法包括：

步骤S101，当监听到页面的用户操作事件时，获取用户操作事件的操作坐标位置。

其中，页面可以是基于HTML所编写的Web页面。用户可点击或者长按或者双击页面以选中页面中的元素，相应地，用户操作事件可以指的是用户点击事件、用户长按事件、用户双击事件等等，当然，本发明中的用户操作事件包括但不限于上述列举的操作事件，本领域技术人员可以根据实际需要来设置用户操作事件的具体形式。

当监听到页面的用户操作事件时，获取用户操作事件的操作坐标位置，操作坐标位置也就是选中的坐标位置。以用户点击事件为例，用户点击事件的操作坐标位置具体指的是用户点击事件的触碰点在页面坐标系中的坐标位置。

步骤S102，对页面的各个视图进行遍历，根据操作坐标位置查找用户操作事件对应的页面元素所属的目标视图。

该步骤也就是确定选中的目标视图，具体地，遍历页面的各个视图，将操作坐标位置与各个视图的视图区域进行匹配，确定操作坐标位置具***于哪个目标视图中。

步骤S103，获取目标视图的元素属性信息。

在确定了选中的目标视图之后，获取目标视图的元素属性信息，例如元素布局信息、文本框文本内容信息、文本框文字字体信息、文本框文本颜色信息、元素透明度信息等等。

步骤S104，生成遮罩层，在遮罩层中呈现元素属性信息。

为页面新增一个遮罩层，例如，生成一个灰度透明的遮罩层置于页面的最顶层，在遮罩层中呈现获取的目标视图的元素属性信息。至此，完成了定位选中元素的视图以及呈现选中元素所属视图的属性信息。

根据本实施例所提供的页面元素属性的查看方法，当监听到页面的用户操作事件时，获取用户操作事件的操作坐标位置；对页面的各个视图进行遍历，根据操作坐标位置查找用户操作事件对应的页面元素所属的目标视图；获取目标视图的元素属性信息；生成遮罩层，在遮罩层中呈现元素属性信息。该方式提供了一种高效的选中元素的属性信息的查看交互方案，通过对页面的视图进行遍历，从而确定用户所选中的目标视图，并将目标视图的元素属性信息呈现在遮罩层中，使得相关人员通过简单的页面操作就可以快速地获取到选中元素所属视图的属性信息，能够减少操作的复杂性，有利于提升应用程序的开发或者测试效率。

图2示出了根据本发明另一个实施例的页面元素属性的查看方法的流程示意图，本实施例的方法在客户端侧执行，当然在具体实施时，也可以在服务端侧执行，本发明对此不做限定。如图2所示，该方法包括：

步骤S201，当监听到页面的用户操作事件时，获取用户操作事件的操作坐标位置。

用户操作事件可以指的是用户点击事件、用户长按事件、用户双击事件等等，本发明对用户操作事件的具体形式不做限定。当监听到页面的用户操作事件时，获取用户操作事件的操作坐标位置。

其中，操作坐标位置具体包括指通过操作事件所选中的点在页面坐标系的坐标位置，例如，用户通过点击页面所选中的点的坐标位置、用户通过双击页面所选中的点的坐标位置、用户通过长按页面所选中的点的坐标位置等等。

步骤S202，对页面的各个视图进行遍历，查找目标视图，使操作坐标位置位于目标视图的视图区域内，目标视图不具有子视图或者操作坐标位置不位于目标视图的任意一个子视图的视图区域内。

该步骤也就是确定选中的目标视图，对页面的各个视图进行遍历，将页面的各个视图的视图区域与操作坐标位置进行匹配，确定操作坐标位置具***于哪个目标视图中。其中，最终所查找到的目标视图不具有子视图或者操作坐标位置不位于目标视图的任意一个子视图的视图区域内，也就是说，目标视图是视图区域包含操作坐标位置的各个视图中最深层的视图。

具体地，获取操作坐标位置的坐标值，以及各个视图的视图区域的坐标值，将操作坐标位置的坐标值与各个视图的视图区域的坐标值进行比对，确定操作坐标位置位于哪个视图区域内。

需要说明的是，视图的视图区域的坐标值和操作坐标位置的坐标值可以是参照同一坐标系中的坐标值，例如都是在页面的坐标系中的坐标值。或者，也可以参照不同的坐标系中的坐标值，则在进行匹配时，需要根据各个视图的视图区域的坐标值所参照的坐标系，以及操作坐标位置的坐标值所参照的坐标系，对视图的视图区域的坐标值和操作坐标位置的坐标值进行转换，使转换之后的坐标值能够直接进行匹配。

图3示出了本发明一个实施例中步骤S202包含的各个子步骤的示意图，如图3所示，步骤S202包括：

子步骤S0，将根视图添加到第一视图集合中。

将页面的根视图添加到第一视图集合中，各个根视图即是待处理的视图，这种方式能够提升处理效率。当然，在实际应用中，也可以将根视图连同其子视图以及更深层的视图添加到第一视图集合中，本发明对此不做限定。

子步骤S1，从第一视图集合中提取一个待处理视图，提取完成后从第一视图集合中删除待处理视图。

按照一定的顺序从第一视图集合中提取待处理视图，提取完成后就从待处理视图从第一视图集合删除。

子步骤S2，遍历待处理视图的各个子视图，判断是否存在操作坐标位置位于其视图区域内的子视图；若是，则执行子步骤S3；若否，则执行子步骤S4。

分别将待处理视图的各个子视图的视图区域的坐标值与操作坐标位置的坐标值进行匹配，判断操作坐标位置是否位于某一个子视图的视图区域内。

子步骤S3，将操作坐标位置位于其视图区域内的子视图添加至第一视图集合中，并跳转执行子步骤S1。

如果判断出操作坐标位置位于某个子视图的视图区域内，就将该子视图添加至第一视图集合中，并跳转执行子步骤S1，继续从第一视图集合中提取一个待处理视图进行处理。

优选地，上述从第一视图集合中提取的待处理视图的位置与将操作坐标位置位于其视图区域内的子视图添加至第一视图集合中的位置相对应。例如，提取第一视图集合中的最后一位视图作为待处理视图，则将操作坐标位置位于其视图区域内的子视图也添加至第一视图集合中的最后一位。这种方式采用了深度优先遍历算法，一旦查找到了操作位置位于其视图区域的视图，就继续一级一级地向该视图的更深的子视图进行查找，确定操作坐标位置是否位于该视图更深的子视图的视图区域内。

子步骤S4，判断操作坐标位置是否位于待处理视图的视图区域内；若是，则执行子步骤S5；若否，则执行子步骤S6。

如果操作坐标位置不位于待处理视图的任意一个子视图的视图区域内，则判断操作坐标位置是否位于待处理视图的视图区域内。

子步骤S5，将待处理视图添加到第二视图集合中。

如果操作坐标位置不位于待处理视图的任意一个子视图内，但位于待处理视图的视图区域内，就将待处理视图添加到第二视图集合中。

子步骤S6，判断第一视图集合中的视图数量是否大于零；若是，则跳转执行子步骤S1；若否，则执行子步骤S7。

如果操作坐标位置不位于待处理视图的任意一个子视图内，且不位于待处理视图区域的视图区域内，就判断第一视图集合中是否还有未处理的视图。如果第一视图集合中还有未处理的视图，则继续从第一视图集合中提取一个待处理视图，重复执行上述步骤。

子步骤S7，从第二视图集合中选取目标视图。

如果第一视图集合中的视图数量不大于零，也即第一视图集合汇总不包含未处理的视图，则从第二视图集合中选取目标视图。其中，从第二视图集合中选取最后一个添加的视图作为目标视图。

根据上述内容可知，对于添加至第二视图集合中的视图，操作坐标位置位于其视图区域内，但不位于其任意一个子视图的视图区域内，或者该视图不具有子视图。

可选地，在子步骤S2中，遍历待处理视图的各个子视图之前，首先判断待处理视图是否具有至少一个子视图；若是，则执行遍历待处理视图的各个子视图的步骤；若否，则跳转执行子步骤S4。很容易理解，先判断待处理视图是否具有子视图，如果有，则对各个子视图进行判断；如果没有，则就直接对待处理视图进行判断。

下面以一个例子来解释上述查找目标视图的步骤，假设页面的根视图包括A和B，视图A具有子视图A1、视图A1具有子视图A2；视图B具有子视图B1、视图B1具有子视图B2。首先，将视图A和B加入第一视图集合内，提取视图A作为待处理视图，判断出操作坐标位置不位于视图A1的视图区域内，则再判断操作坐标位置是否位于视图A的视图区域内，判断出操作坐标位置也不位于视图A的视图区域内，不再对视图A做处理。此时，由于第一视图集合内还有视图B，则将视图B提取出来作为待处理视图，判断出操作坐标位置位于视图B1的视图区域内，则将视图B1添加至第一视图集合内。再将视图B1提取出来作为待处理视图，判断操作坐标位置是否位于视图B2的视图区域内，判断出操作坐标位置位于视图B2的视图区域内，再将视图B2添加至第一视图集合中。再将视图B2从第一视图集合中提取出来，判断出视图B2不具有子视图，则判断操作坐标位置是否位于视图B2的视图区域，操作坐标位置是位于视图B2的视图区域的，则将视图B2添加至第二视图集合中。至此，第一视图集合中的视图数量为零，第二视图集合中的视图B2就是最终查找到的目标视图。

步骤S203，对目标视图进行快照备份，生成经过高亮处理的目标视图图像。

步骤S204，生成遮罩层，根据目标视图的区域坐标，将目标视图图像添加至遮罩层中，将目标视图的元素属性信息以文本形式呈现在遮罩层中。

步骤S203-步骤S204也就是将选中的目标视图进行高亮，并且将目标视图的元素属性信息进行展示。具体地，首先对目标视图进行快照备份，生成高亮的目标视图图像；然后，在页面中增加灰度透明的遮罩层，按照目标视图的位置，将目标视图图像添加到遮罩层中相应的位置，至此，完成了将将目标视图的视图区域进行高亮展示处理；然后，根据目标视图的元素的类型，如Lable、ImageView、TableViewCell、View等，将目标视图的元素属性信息以文本的形式展现在遮罩层中，由于元素属性信息是以文本的形式进行展现的，因此可以对元素属性信息的文本直接进行复制。可选地，还可以提供元素属性信息的分享功能，例如，设置相应的分享控件，实现一键分享元素属性信息，这种为呈现的属性信息提供复制和分享功能的方式进一步为相关人员提供便利。

图4示出了本发明一个示例中页面元素属性的查看方法的效果示意图，附图左侧对应于处理前的页面，附图右侧对应于处理后的页面。在测试或者开发场景中，用户点击操作落入到处理前的页面中的“到店券-【大堡口福单人餐】K36…”的区域，客户端执行本发明上述任一实施例中的方法，定位并高亮用户点击的目标视图，并获取目标视图的元素属性信息进行呈现，最终呈现的页面中，“【大堡口福单人餐】K36…”相应的视图被高亮显示，该视图的元素属性信息被呈现在遮罩层中，呈现目标视图的元素属性信息如下：

attributed-text:【大堡口福单人餐】K36狠霸王鸡堡+王道椒香鸡腿+薯霸王+可口可乐(中)

font：14.4pt

textcolor：#333333

textAlignment：4

frame：{{0,0},{171,17.333333969116211}}…

该示例中呈现的目标视图的元素属性信息包括：元素布局信息、文本框文本内容信息、文本框文本字体信息以及文本框文本颜色信息。当然，本发明中所述的元素属性信息包括但不限于上述列举的各项信息，具体呈现什么信息根据实际情况而确定。

根据本实施例所提供的页面元素属性的查看方法，提供了一种高效的选中元素的属性信息的查看交互方案，根据用户选中的位置的坐标，对页面的视图进行遍历，确定用户所选中的目标视图，将目标视图的视图区域进行高亮展示，突出选中视图的区域范围，使得相关人员可以很方便地获知自己选中的是哪一个视图；并在遮罩层中展示目标视图的元素信息，使得相关人员通过简单的页面操作就可以快速地获取到选中元素所属视图的属性信息，能够减少操作的复杂性，有利于提升应用程序的开发或者测试效率。

图5示出了根据本发明又一个实施例的页面元素属性的查看装置的功能模块图，如图5所示，该装置包括：

位置获取模块51，适于当监听到页面的用户操作事件时，获取用户操作事件的操作坐标位置；

查找模块52，适于对页面的各个视图进行遍历，根据操作坐标位置查找用户操作事件对应的页面元素所属的目标视图；

属性获取模块53，适于获取目标视图的元素属性信息；

呈现模块53，适于生成遮罩层，在遮罩层中呈现元素属性信息。

可选地，查找模块52进一步适于：

查找目标视图，使操作坐标位置位于目标视图的视图区域内；

其中，目标视图不具有子视图或者操作坐标位置不位于目标视图的任意一个子视图的视图区域内。

可选地，查找模块52进一步适于：

步骤S0，将根视图添加到第一视图集合中；

步骤S1，从第一视图集合中提取一个待处理视图，提取完成后从第一视图集合中删除待处理视图；

步骤S2，遍历待处理视图的各个子视图，判断是否存在操作坐标位置位于其视图区域内的子视图；若是，则执行步骤S3；若否，则执行步骤S4；

步骤S3，将操作坐标位置位于其视图区域内的子视图添加至第一视图集合中，并跳转执行步骤S1；

步骤S4，判断操作坐标位置是否位于待处理视图的视图区域内；若是，则执行步骤S5；若否，则执行步骤S6；

步骤S5，将待处理视图添加到第二视图集合中；

步骤S6，判断第一视图集合中的视图数量是否大于零；若是，则跳转执行步骤S1；若否，则从第二视图集合中选取目标视图。

可选地，查找模块52进一步适于：

步骤S2中，遍历待处理视图的各个子视图之前，判断待处理视图是否具有至少一个子视图；若是，则执行遍历待处理视图的各个子视图的步骤；若否，则跳转执行步骤S4。

可选地，查找模块52进一步适于：从第二视图集合中选取最后一个添加的视图作为目标视图。

可选地，呈现模块54进一步适于：

对目标视图的视图区域进行高亮展示处理。

可选地，呈现模块54进一步适于：

对目标视图进行快照备份，生成经过高亮处理的目标视图图像；

在生成遮罩层之后，根据目标视图的区域坐标，将目标视图图像添加至遮罩层中。

可选地，呈现模块54进一步适于：

将目标视图的元素属性信息以文本形式呈现在遮罩层中。

可选地，目标视图的元素属性信息包括以下一种或多种信息：

元素布局信息、文本框文本内容信息、文本框文本字体信息、文本框文本颜色信息、元素透明度信息。

本申请实施例提供了一种非易失性计算机存储介质，所述计算机存储介质存储有至少一可执行指令，该计算机可执行指令可执行上述任意方法实施例中的页面元素属性的查看方法。

图6示出了根据本发明实施例的一种电子设备的结构示意图，本发明具体实施例并不对电子设备的具体实现做限定。

如图6所示，该电子设备可以包括：处理器(processor)602、通信接口(Communications Interface)604、存储器(memory)606、以及通信总线608。

其中：

处理器602、通信接口604、以及存储器606通过通信总线608完成相互间的通信。

通信接口604，用于与其它设备比如客户端或其它服务器等的网元通信。

处理器602，用于执行程序610，具体可以执行上述页面元素属性的查看方法实施例中的相关步骤。

具体地，程序610可以包括程序代码，该程序代码包括计算机操作指令。

处理器602可能是中央处理器CPU，或者是特定集成电路ASIC(ApplicationSpecific Integrated Circuit)，或者是被配置成实施本发明实施例的一个或多个集成电路。电子设备包括的一个或多个处理器，可以是同一类型的处理器，如一个或多个CPU；也可以是不同类型的处理器，如一个或多个CPU以及一个或多个ASIC。

存储器606，用于存放程序610。存储器606可能包含高速RAM存储器，也可能还包括非易失性存储器(non-volatile memory)，例如至少一个磁盘存储器。

程序610具体可以用于使得处理器602执行以下操作：当监听到页面的用户操作事件时，获取用户操作事件的操作坐标位置；对页面的各个视图进行遍历，根据操作坐标位置查找用户操作事件对应的页面元素所属的目标视图；获取目标视图的元素属性信息；生成遮罩层，在遮罩层中呈现元素属性信息。

在一种可选的方式中，程序610具体还可以用于使得处理器602执行以下操作：查找目标视图，使操作坐标位置位于目标视图的视图区域内；其中，目标视图不具有子视图或者操作坐标位置不位于目标视图的任意一个子视图的视图区域内。

在一种可选的方式中，程序610具体还可以用于使得处理器602执行以下操作：步骤S0，将根视图添加到第一视图集合中；

步骤S1，从第一视图集合中提取一个待处理视图，提取完成后从第一视图集合中删除待处理视图；

步骤S2，遍历待处理视图的各个子视图，判断是否存在操作坐标位置位于其视图区域内的子视图；若是，则执行步骤S3；若否，则执行步骤S4；

步骤S3，将操作坐标位置位于其视图区域内的子视图添加至第一视图集合中，并跳转执行步骤S1；

步骤S4，判断操作坐标位置是否位于待处理视图的视图区域内；若是，则执行步骤S5；若否，则执行步骤S6；

步骤S5，将待处理视图添加到第二视图集合中；

步骤S6，判断第一视图集合中的视图数量是否大于零；若是，则跳转执行步骤S1；若否，则从第二视图集合中选取目标视图。

在一种可选的方式中，程序610具体还可以用于使得处理器602执行以下操作：步骤S2中，遍历待处理视图的各个子视图之前，判断待处理视图是否具有至少一个子视图；若是，则执行遍历待处理视图的各个子视图的步骤；若否，则跳转执行步骤S4。

在一种可选的方式中，程序610具体还可以用于使得处理器602执行以下操作：从第二视图集合中选取最后一个添加的视图作为目标视图。

在一种可选的方式中，程序610具体还可以用于使得处理器602执行以下操作：在根据操作坐标位置查找用户操作事件对应的页面元素所属的目标视图之后，对目标视图的视图区域进行高亮展示处理。

在一种可选的方式中，程序610具体还可以用于使得处理器602执行以下操作：对目标视图进行快照备份，生成经过高亮处理的目标视图图像；在生成遮罩层之后，根据目标视图的区域坐标，将目标视图图像添加至遮罩层中。

在一种可选的方式中，程序610具体还可以用于使得处理器602执行以下操作：将目标视图的元素属性信息以文本形式呈现在遮罩层中。

在一种可选的方式中，元素布局信息、文本框文本内容信息、文本框文本字体信息、文本框文本颜色信息、元素透明度信息。

在此提供的算法和显示不与任何特定计算机、虚拟***或者其它设备固有相关。各种通用***也可以与基于在此的示教一起使用。根据上面的描述，构造这类***所要求的结构是显而易见的。此外，本发明也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本发明的内容，并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。

在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本发明的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。

类似地，应当理解，为了精简本公开并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说，如下面的权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本发明的单独实施例。

本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。

此外，本领域的技术人员能够理解，尽管在此所述的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。例如，在下面的权利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。

本发明的各个部件实施例可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器(DSP)来实现根据本发明实施例的电子设备中的一些或者全部部件的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序(例如，计算机程序和计算机程序产品)。这样的实现本发明的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。

应该注意的是上述实施例对本发明进行说明而不是对本发明进行限制，并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本发明可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。

Claims (18)

1.一种页面元素属性的查看方法，包括：

当监听到页面的用户操作事件时，获取所述用户操作事件的操作坐标位置；

对所述页面的各个视图进行遍历，根据所述操作坐标位置查找所述用户操作事件对应的页面元素所属的目标视图；其中包括：步骤S0，将根视图添加到第一视图集合中；步骤S1，从所述第一视图集合中提取一个待处理视图，提取完成后从第一视图集合中删除所述待处理视图；步骤S2，遍历所述待处理视图的各个子视图，判断是否存在所述操作坐标位置位于其视图区域内的子视图；若是，则执行步骤S3；若否，则执行步骤S4；步骤S3，将所述操作坐标位置位于其视图区域内的子视图添加至第一视图集合中，并跳转执行步骤S1；步骤S4，判断所述操作坐标位置是否位于所述待处理视图的视图区域内；若是，则执行步骤S5；若否，则执行步骤S6；步骤S5，将所述待处理视图添加到第二视图集合中；步骤S6，判断所述第一视图集合中的视图数量是否大于零；若是，则跳转执行步骤S1；若否，则从所述第二视图集合中选取目标视图；

获取所述目标视图的元素属性信息；

生成遮罩层，在遮罩层中呈现所述元素属性信息。

2.根据权利要求1所述的方法，其中，所述根据所述操作坐标位置查找所述用户操作事件对应的页面元素所属的目标视图进一步包括：查找目标视图，使所述操作坐标位置位于所述目标视图的视图区域内；

其中，所述目标视图不具有子视图或者所述操作坐标位置不位于所述目标视图的任意一个子视图的视图区域内。

3.根据权利要求1所述的方法，其中，所述步骤S2中，遍历所述待处理视图的各个子视图之前，所述方法进一步包括：

判断待处理视图是否具有至少一个子视图；若是，则执行遍历所述待处理视图的各个子视图的步骤；若否，则跳转执行步骤S4。

4.根据权利要求3所述的方法，其中，所述从所述第二视图集合中选取目标视图具体为：从所述第二视图集合中选取最后一个添加的视图作为目标视图。

5.根据权利要求1-4中任一项所述的方法，其中，在所述根据所述操作坐标位置查找所述用户操作事件对应的页面元素所属的目标视图之后，所述方法还包括：

对所述目标视图的视图区域进行高亮展示处理。

6.根据权利要求5所述的方法，其中，所述对所述目标视图的视图区域进行高亮展示处理进一步包括：

对所述目标视图进行快照备份，生成经过高亮处理的目标视图图像；

在生成遮罩层之后，根据所述目标视图的区域坐标，将所述目标视图图像添加至所述遮罩层中。

7.根据权利要求1-4中任一项所述的方法，其中，所述在遮罩层中呈现所述元素属性信息进一步包括：

将所述目标视图的元素属性信息以文本形式呈现在遮罩层中。

8.根据权利要求1所述的方法，其中，所述目标视图的元素属性信息包括以下一种或多种信息：

元素布局信息、文本框文本内容信息、文本框文本字体信息、文本框文本颜色信息、元素透明度信息。

9.一种页面元素属性的查看装置，包括：

位置获取模块，适于当监听到页面的用户操作事件时，获取所述用户操作事件的操作坐标位置；

查找模块，适于对所述页面的各个视图进行遍历，根据所述操作坐标位置查找所述用户操作事件对应的页面元素所属的目标视图；其中包括：步骤S0，将根视图添加到第一视图集合中；步骤S1，从所述第一视图集合中提取一个待处理视图，提取完成后从第一视图集合中删除所述待处理视图；步骤S2，遍历所述待处理视图的各个子视图，判断是否存在所述操作坐标位置位于其视图区域内的子视图；若是，则执行步骤S3；若否，则执行步骤S4；步骤S3，将所述操作坐标位置位于其视图区域内的子视图添加至第一视图集合中，并跳转执行步骤S1；步骤S4，判断所述操作坐标位置是否位于所述待处理视图的视图区域内；若是，则执行步骤S5；若否，则执行步骤S6；步骤S5，将所述待处理视图添加到第二视图集合中；步骤S6，判断所述第一视图集合中的视图数量是否大于零；若是，则跳转执行步骤S1；若否，则从所述第二视图集合中选取目标视图；

属性获取模块，适于获取所述目标视图的元素属性信息；

呈现模块，适于生成遮罩层，在遮罩层中呈现所述元素属性信息。

10.根据权利要求9所述的装置，其中，所述查找模块进一步适于：

查找目标视图，使所述操作坐标位置位于所述目标视图的视图区域内；

其中，所述目标视图不具有子视图或者所述操作坐标位置不位于所述目标视图的任意一个子视图的视图区域内。

11.根据权利要求9所述的装置，其中，所述查找模块进一步适于：

所述步骤S2中，遍历所述待处理视图的各个子视图之前，判断待处理视图是否具有至少一个子视图；若是，则执行遍历所述待处理视图的各个子视图的步骤；若否，则跳转执行步骤S4。

12.根据权利要求11所述的装置，其中，所述查找模块进一步适于：从所述第二视图集合中选取最后一个添加的视图作为目标视图。

13.根据权利要求9-12中任一项所述的装置，其中，所述呈现模块进一步适于：

对所述目标视图的视图区域进行高亮展示处理。

14.根据权利要求13所述的装置，其中，所述呈现模块进一步适于：

对所述目标视图进行快照备份，生成经过高亮处理的目标视图图像；

在生成遮罩层之后，根据所述目标视图的区域坐标，将所述目标视图图像添加至所述遮罩层中。

15.根据权利要求9-12中任一项所述的装置，其中，所述呈现模块进一步适于：

将所述目标视图的元素属性信息以文本形式呈现在遮罩层中。

16.根据权利要求9所述的装置，其中，所述目标视图的元素属性信息包括以下一种或多种信息：

元素布局信息、文本框文本内容信息、文本框文本字体信息、文本框文本颜色信息、元素透明度信息。

17.一种电子设备，包括：处理器、存储器、通信接口和通信总线，所述处理器、所述存储器和所述通信接口通过所述通信总线完成相互间的通信；

所述存储器用于存放至少一可执行指令，所述可执行指令使所述处理器执行如权利要求1-8中任一项所述的页面元素属性的查看方法对应的操作。

18.一种计算机存储介质，所述存储介质中存储有至少一可执行指令，所述可执行指令使处理器执行如权利要求1-8中任一项所述的页面元素属性的查看方法对应的操作。

Images