CN111078530A - 应用程序调试方法、系统、电子设备及计算机可读存储介质 - Google Patents

Abstract

本发明实施例提供了一种应用程序调试方法、系统、电子设备及计算机可读存储介质，涉及通信技术领域，所述方法包括：第一电子设备接收第二电子设备发送的原生应用程序的视图层级数据，并基于所述视图层级数据生成并显示虚拟视图树；所述第一电子设备接收对目标视图节点的节点信息的修改输入，并基于所述修改输入生成所述目标视图节点的节点修改信息，以及，向所述第二电子设备发送所述节点修改信息，所述目标视图节点为所述虚拟视图树中的节点；所述第二电子设备基于所述节点修改信息对所述视图层级数据进行修改，以更新所述原生应用程序的显示界面。本发明实施例能够提高原生应用程序的调试效率。

Description

应用程序调试方法、系统、电子设备及计算机可读存储介质

技术领域

本发明涉及通信技术领域，特别是涉及一种应用程序调试方法、系统、电子设备及计算机可读存储介质。

背景技术

应用程序可以包括使用网页技术实现的网页应用程序，还可以包括使用原生技术实现的原生应用程序，其中，原生应用程序的用户体验优于网页应用程序的用户体验。

原生应用程序的调试过程可以如下：在开发机上使用专用集成开发工具编辑应用程序的源代码文件，通过专用集成开发工具启动应用程序的编译连接流程，在开发机上构建生成应用程序安装文件，将应用程序安装文件部署在设备上，运行设备上的应用程序查看界面显示效果，若界面显示效果不符合预期，则修改源代码文件，重新执行编译连接构建生成应用程序安装文件，将应用程序安装文件部署在设备上，运行设备上的应用程序查看界面显示效果。

目前，在原生应用程序的调试过程中，需要多次执行修改源代码文件，重新执行编译连接构建生成应用程序安装文件，将应用程序安装文件部署在设备上，运行设备上的应用程序的过程，从而导致原生应用程序的调试效率较低。

发明内容

本发明实施例的目的在于提供一种应用程序调试方法、系统、电子设备及计算机可读存储介质，以实现提高原生应用程序的调试效率。具体技术方案如下：

在本发明实施的第一方面，首先提供了一种应用程序调试方法，所述方法包括：

第一电子设备接收第二电子设备发送的原生应用程序的视图层级数据，并基于所述视图层级数据生成并显示虚拟视图树；

所述第一电子设备接收对目标视图节点的节点信息的修改输入，并基于所述修改输入生成所述目标视图节点的节点修改信息，以及，向所述第二电子设备发送所述节点修改信息，所述目标视图节点为所述虚拟视图树中的节点；

所述第二电子设备基于所述节点修改信息对所述视图层级数据进行修改，以更新所述原生应用程序的显示界面。

在本发明实施的第二方面，还提供了一种应用程序调试系统，所述应用程序调试系统包括第一电子设备和第二电子设备；

所述第一电子设备用于接收第二电子设备发送的原生应用程序的视图层级数据，并基于所述视图层级数据生成并显示虚拟视图树；

所述第一电子设备还用于接收对目标视图节点的节点信息的修改输入，并基于所述修改输入生成所述目标视图节点的节点修改信息，以及，向所述第二电子设备发送所述节点修改信息，所述目标视图节点为所述虚拟视图树中的节点；

所述第二电子设备用于基于所述节点修改信息对所述视图层级数据进行修改，以更新所述原生应用程序的显示界面。

在本发明实施的又一方面，还提供了一种电子设备，包括处理器、通信接口、存储器和通信总线，其中，处理器，通信接口，存储器通过通信总线完成相互间的通信；存储器，用于存放计算机程序；处理器，用于执行存储器上所存放的程序时，执行上述任一所述的应用程序调试方法。

在本发明实施的又一方面，还提供了一种计算机可读存储介质，所述计算机可读存储介质中存储有指令，当其在计算机上运行时，使得计算机执行上述任一所述的应用程序调试方法。

在本发明实施的又一方面，还提供了一种包含指令的计算机程序产品，当其在计算机上运行时，使得计算机执行上述任一所述的应用程序调试方法。

本发明实施例中，第一电子设备接收第二电子设备发送的原生应用程序的视图层级数据，并基于所述视图层级数据生成并显示虚拟视图树；所述第一电子设备接收对目标视图节点的节点信息的修改输入，并基于所述修改输入生成所述目标视图节点的节点修改信息，以及，向所述第二电子设备发送所述节点修改信息，所述目标视图节点为所述虚拟视图树中的节点；所述第二电子设备基于所述节点修改信息对所述视图层级数据进行修改，以更新所述原生应用程序的显示界面。这样，在进行原生应用程序的调试时，不需要在调试过程中多次执行修改源代码文件，重新执行编译连接构建生成应用程序安装文件，将应用程序安装文件部署在设备上，运行设备上的应用程序的过程，从而能够提高原生应用程序的调试效率。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍。

图1是本发明实施例提供的一种应用程序调试方法的流程图；

图2是本发明实施例提供的另一种应用程序调试方法的流程图；

图3是本发明实施例提供的一种应用程序调试方法的原理示意图；

图4是本发明实施例提供的一种应用程序调试系统的结构示意图；

图5是本发明实施例提供的一种电子设备的结构示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行描述。

参见图1，图1是本发明实施例提供的一种应用程序调试方法的流程图，如图1所示，所述方法包括以下步骤：

步骤101、第一电子设备接收第二电子设备发送的原生应用程序的视图层级数据，并基于所述视图层级数据生成并显示虚拟视图树；

步骤102、所述第一电子设备接收对目标视图节点的节点信息的修改输入，并基于所述修改输入生成所述目标视图节点的节点修改信息，以及，向所述第二电子设备发送所述节点修改信息，所述目标视图节点为所述虚拟视图树中的节点；

步骤103、所述第二电子设备基于所述节点修改信息对所述视图层级数据进行修改，以更新所述原生应用程序的显示界面。

其中，在第二电子设备上可以运行所述原生应用程序，所述原生应用程序可以处于调试过程中，例如，所述原生应用程序可以为移动端应用程序(APP)。在第一电子设备上可以运行用于调试所述原生应用程序的网页程序，例如运行在桌面开发机浏览器上的桌面调试器(Desktop Debugger)。

第一电子设备接收第二电子设备发送的原生应用程序的视图层级数据之前，第二电子设备可以与第一电子设备之间建立通信连接，可以是通过通用串行总线(USB)与第一电子设备建立通信连接，或者可以是通过有线或无线网络与第一电子设备建立通信连接。第二电子设备与第一电子设备建立通信连接，具体的，可以是第二电子设备上的APP进程与第一电子设备上的Desktop Debugger进程之间建立通信连接，例如，建立WebSocket的连接。

进一步的，第二电子设备与第一电子设备之间通过USB建立通信连接，可以是，在第二电子设备上运行WebSocket服务端(WebSocket Server)，在第一电子设备上运行WebSocket客户端(WebSocket Client)，通过WebSocket Server与WebSocket Client建立通信。

具体的，以第二电子设备为移动端，第一电子设备为桌面开发机为例进行说明，可以在移动端APP中运行WebSocket Server，在桌面开发机上的Desktop Debugger中运行WebSocket Client。

第二电子设备与第一电子设备建立通信连接流程可以如下：移动端APP启动后，监听移动端的可用端口，启动WebSocket Server，启动成功后将WebSocket Server监听的设备端口DevicePort写入日志，日志被存储到移动端的本地文件系统中；移动端通过USB连接桌面开发机，在桌面开发机上使用日志读取工具(例如，Xcode或者Android Studio工具)读取移动端日志文件，捕获WebSocket Server监听的设备端口号DevicePort；通过USB连接，在桌面开发机本地选择一个本地端口localPort，在桌面开发机上通过命令(例如，iProxy或者ADB命令)在桌面开发机本地端口localPort和设备端口DevicePort之间建立端口映射(例如，采用Port forwarding或mapping)；Desktop Debugger以WebSocket Client身份主动和本地端口localPort建立连接，本地端口localPort收到连接请求之后自动把通信数据包通过USB转发到设备端口DevicePort，被移动端的WebSocket Server进程接收，第二电子设备与第一电子设备之间的通信连接建立完成。

第二电子设备与第一电子设备之间通过USB建立通信连接，不需要依赖网络环境，不必获知电子设备的网络协议(IP)地址，基于USB数据线在第二电子设备和第一电子设备之间开启端口映射后，可以在移动端APP和桌面开发机的Desktop Debugger之间建立通信连接。

进一步的，第二电子设备与第一电子设备可以通过有线或无线网络建立通信连接，以第二电子设备为移动端，第一电子设备为桌面开发机为例，可以是，桌面开发机单独启动WebSocket Server，桌面开发机上的Desktop Debugger受浏览器限制，不能开启WebSocket Server服务。Desktop Debugger和移动端APP均以WebSocket Client身份，经由WebSocket Server互相通信。

第二电子设备与第一电子设备建立通信连接流程可以如下：桌面开发机选择可用的端口号devPort并启动WebSocket Server进程，通过Xcode编译构建安装启动移动端APP，并在移动端APP启动参数里面传入桌面开发机IP和端口号devPort；移动端APP运行之后，通过启动参数捕获到桌面开发机IP和端口号devPort，以WebSocket Client身份，对桌面开发机IP和端口号devPort为标识的WebSocket Server，发起建立通信连接请求；在桌面开发机上启动Desktop Debugger，Desktop Debugger以WebSocket Client身份，对桌面开发机本地devPort端口的WebSocket Server发起建立通信连接请求；WebSocket Server接收到移动端APP和Desktop Debugger的连接建立请求时，允许连接建立，并通知两个WebSocketClient对方的存在，并将两个WebSocket Client的请求数据，转发给对方；移动端APP和Desktop Debugger这两个WebSocket Client之间，通过同一个WebSocket Server，成功建立通信连接。

第二电子设备与第一电子设备通过有线或无线网络建立通信连接，不需要依赖USB数据线，通过第二电子设备及第一电子设备所在的网络环境(例如，Wifi或者4G)，可以在移动端APP和桌面开发机的Desktop Debugger之间建立通信连接。

需要说明的是，在实际应用中，第二电子设备可以包括第一连接(Connection)模块，第一电子设备可以包括第二连接模块，以第二电子设备为移动端，第一电子设备为桌面开发机为例，第一连接模块和第二连接模块用于在移动端APP和Desktop Debugger之间维持通信连接。

作为一种实施方式，移动端APP进程中第一连接模块运行的是WebSocket Server，在移动端特定端口号上监听WebSocket链接服务，等待运行在桌面开发机桌面浏览器上的调试网页进程Desktop Debugger以WebSocket Client的身份主动与WebSocket Server建立通信连接。

作为另一种实施方式，在桌面开发机上单独运行WebSocket Server进程，在桌面开发机特定端口上监听WebSocket链接服务，移动端APP进程和桌面浏览器上的调试网页进程Desktop Debugger都以WebSocket Client身份和WebSocket Server建立连接，连接建立之后，移动端APP和Desktop Debugger通过WebSocket Server互相通信。

另外，所述原生应用程序的视图层级(View Hierarchy)数据，可以是源代码编译构建出的程序在第二电子设备上运行时在内存中存储的一个中间状态的数据，视图层级(View Hierarchy)数据可以经由绘制处理为图像，绘制处理后的图像可以显示在第二电子设备的屏幕上。

进一步的，目标视图节点的节点信息可以包括节点大小、位置或者外观属性等信息，具体的，可以包括节点大小、尺寸及样式信息。所述目标视图节点(View node)为虚拟视图树(Virtual View tree)中的节点，所述目标View node的节点修改信息可以包括对目标View node的节点大小、位置或者外观属性等修改后的节点信息。以第二电子设备为移动端，第一电子设备为桌面开发机为例，桌面开发机上的Desktop Debugger将目标View node的节点修改信息发送至移动端APP，移动端APP执行View Hierarchy数据的修改操作，并在移动端实时展示修改后的界面显示效果。

需要说明的是，在实际应用中，以第二电子设备为移动端，第一电子设备为桌面开发机为例，移动端APP可以包括ViewManager(视图管理)模块，用户在桌面开发机的网页上对目标View node的节点信息进行修改后，可以将目标View node的节点修改信息发送至移动端APP的ViewManager模块，由ViewManager模块对View Hierarchy数据进行修改，以更新移动端APP的显示界面。

本发明实施例中，第一电子设备接收第二电子设备发送的原生应用程序的视图层级数据，并基于所述视图层级数据生成并显示虚拟视图树；所述第一电子设备接收对目标视图节点的节点信息的修改输入，并基于所述修改输入生成所述目标视图节点的节点修改信息，以及，向所述第二电子设备发送所述节点修改信息，所述目标视图节点为所述虚拟视图树中的节点；所述第二电子设备基于所述节点修改信息对所述视图层级数据进行修改，以更新所述原生应用程序的显示界面。这样，在进行原生应用程序的调试时，不需要在调试过程中多次执行修改源代码文件，重新执行编译连接构建生成应用程序安装文件，将应用程序安装文件部署在设备上，运行设备上的应用程序的过程，从而能够提高原生应用程序的调试效率。

可选的，所述第一电子设备接收对目标视图节点的节点信息的修改输入之前，所述方法还包括：

所述第一电子设备接收用户在所述虚拟视图树中选择所述目标视图节点的输入，并向所述第二电子设备发送用于标识所述目标视图节点的标识信息；

所述第二电子设备基于所述标识信息获取所述目标视图节点的节点信息，以及，向所述第一电子设备发送所述目标视图节点的节点信息；

所述第一电子设备显示所述目标视图节点的节点信息。

其中，所述用于标识所述目标视图节点的标识信息可以是数字或者字符或者文字等等。所述标识信息可以用于唯一标识所述目标视图节点。所述第一电子设备显示所述目标视图节点的节点信息，可以是在虚拟视图树显示目标视图节点的位置显示所述目标视图节点的节点信息，或者，还可以是弹出新的网页以表单的形式显示所述目标视图节点的节点信息。

在实际应用中，以第二电子设备为移动端，第一电子设备为桌面开发机为例，桌面开发机上的Desktop Debugger可以包括ViewPresenter(视图展示)模块，ViewPresenter模块将Virtual View tree以目录树结构展示在网页中，用户选择Virtual View tree中的目标View node，Desktop Debugger将用户选择的目标View node发送至移动端APP，移动端APP将目标View node的节点大小、位置或者外观属性等节点信息发送至DesktopDebugger，Desktop Debugger提供目标View node的展示和修改界面。

该实施方式中，所述第一电子设备接收用户在所述虚拟视图树中选择所述目标视图节点的输入，并向所述第二电子设备发送用于标识所述目标视图节点的标识信息；所述第二电子设备基于所述标识信息获取所述目标视图节点的节点信息，以及，向所述第一电子设备发送所述目标视图节点的节点信息；所述第一电子设备显示所述目标视图节点的节点信息。这样，用户可以便捷地查看到所述目标视图节点的当前节点信息，并基于当前节点信息进行修改，用户体验较好。

可选的，所述方法还包括：

所述第二电子设备向所述第一电子设备发送修改后的视图层级数据；

所述第一电子设备基于所述修改后的视图层级数据对所述虚拟视图树进行更新。

其中，以第二电子设备为移动端，第一电子设备为桌面开发机为例，ViewHierarchy数据发生修改后，移动端APP的ViewManager模块可以通知Desktop Debugger的ViewPresenter模块，View Hierarchy发生了属性变动或View node增删变动事件，ViewPresenter模块根据通知消息更新Virtual View tree以及用户选择的View node表单界面。

该实施方式中，所述第二电子设备向所述第一电子设备发送修改后的视图层级数据；所述第一电子设备基于所述修改后的视图层级数据对所述虚拟视图树进行更新。这样，在视图层级数据发生修改后，能够实时对虚拟视图树进行更新，用户能够查看到最新的虚拟视图树，不需要进行额外的刷新操作，能够进一步提高原生应用程序的调试效率。

可选的，所述第一电子设备接收第二电子设备发送的原生应用程序的视图层级数据之前，所述方法还包括：

所述第二电子设备将所述原生应用程序的视图层级数据序列化处理为文本数据，并向所述第一电子设备发送所述文本数据；

所述第一电子设备接收第二电子设备发送的原生应用程序的视图层级数据，并基于所述视图层级数据生成虚拟视图树，包括：

所述第一电子设备接收所述第二电子设备发送的所述文本数据，将所述文本数据进行反序列化处理；

所述第一电子设备将反序列化处理后的文本数据以虚拟视图树的数据结构存储在内存中，并在网页上显示所述虚拟视图树。

其中，以第二电子设备为移动端，第一电子设备为桌面开发机为例，移动端APP和桌面开发机的Desktop Debugger建立通信连接之后，移动端将移动端APP内存中的ViewHierarchy数据序列化处理为文本数据(例如，JSON)，并通过通信连接将文本数据传输至Desktop Debugger，Desktop Debugger将接收到的文本数据进行反序列化处理，将反序列化处理后的文本数据在内存中以Virtual View tree的数据结构进行存储，并使用网页展示Virtual View tree。

具体的，移动端APP的ViewManager模块可以提供View Hierarchy数据序列化输出接口，Desktop Debugger上的ViewPresenter模块可以对View Hierarchy数据序列化处理后的文本数据进行反序列化处理，在内存中创建Virtual View tree的数据结构，将Virtual View tree以目录树结构展示在网页中。

该实施方式中，所述第二电子设备将所述原生应用程序的视图层级数据序列化处理为文本数据，并向所述第一电子设备发送所述文本数据；所述第一电子设备接收所述第二电子设备发送的所述文本数据，将所述文本数据进行反序列化处理；所述第一电子设备将反序列化处理后的文本数据以虚拟视图树的数据结构存储在内存中，并在网页上显示所述虚拟视图树。这样，将视图层级数据序列化处理为文本数据后，能够便于数据的传输。

可选的，所述第一电子设备接收第二电子设备发送的原生应用程序的视图层级数据之前，所述方法还包括：

所述第二电子设备采用图形服务器对所述原生应用程序的视图层级数据进行绘制处理，在屏幕上生成图像；

所述第二电子设备基于所述节点修改信息对所述视图层级数据进行修改之后，所述方法还包括：

所述第二电子设备采用所述图形服务器对修改后的所述视图层级数据进行绘制处理，以更新所述屏幕上的图像。

其中，View Hierarchy可以被第二电子设备的操作系统的图形服务器进行绘制处理，生成图像显示到屏幕上，为用户所看到的图形界面。View Hierarchy被修改之后，第二电子设备的操作系统的图形服务器再次进行绘制操作，重新生成图像显示到屏幕上，用户看到的即为更新后的图形界面。

该实施方式中，所述第二电子设备采用图形服务器对所述原生应用程序的视图层级数据进行绘制处理，在屏幕上生成图像；所述第二电子设备采用所述图形服务器对修改后的所述视图层级数据进行绘制处理，以更新所述屏幕上的图像。这样，能够基于视图层级数据实时更新所述屏幕上的图像，用户体验较好。

作为一种具体的实施方式，所述第二电子设备为移动设备，所述第一电子设备为桌面开发机，所述移动设备上运行有APP进程，所述桌面开发机上运行有Desktop Debugger进程，所述APP包括ViewManager模块及第一连接模块，所述Desktop Debugger包括ViewPresenter模块及第二连接模块。如图2所示，所述应用程序调试方法具体可以包括如下步骤：

步骤201、启动WebSocket Server。

其中，移动端APP的第一连接模块启动WebSocket Server，输出DevicePort。

步骤202、通过USB建立端口映射。

其中，Desktop Debugger的第二连接模块捕获到DevicePort，通过USB在桌面开发机和移动设备之间建立端口映射。

步骤203、WebSocket Server与WebSocket Client建立通信连接。

其中，Desktop Debugger以WebSocket Client身份和WebSocket Server建立通信连接。

步骤204、通知连接建立成功。

其中，第二连接模块通知ViewPresenter模块，通信连接建立成功。

步骤205、查询View Hierarchy数据。

其中，ViewPresenter模块向第二连接模块发送查询View Hierarchy数据的请求，第二连接模块将查询View Hierarchy数据的请求转发至第一连接模块，第一连接模块收到查询请求后，将该查询请求转发至ViewManager模块。

步骤206、将View Hierarchy数据序列化处理并返回。

其中，ViewManager模块接收到查询View Hierarchy数据的请求后，将ViewHierarchy数据序列化处理，并发送至第一连接模块，第一连接模块将序列化处理后的ViewHierarchy数据发送至第二连接模块，第二连接模块接收到序列化处理后的ViewHierarchy数据，转发至ViewPresenter模块。

步骤207、反序列化处理，创建Virtual View tree。

其中，ViewPresenter模块接收到序列化处理后的View Hierarchy数据，进行反序列化处理，基于View Hierarchy数据创建Virtual View tree。

步骤208、展示Virtual View tree。

其中，ViewPresenter模块将Virtual View tree展示在网页上，以便用户检查。

步骤209、查询ID对应的View node。

其中，ViewPresenter模块接收到用户在Virtual View tree中选择View node的输入后，向第二连接模块发送查询用户选择的View node的节点信息的请求，请求中携带View node的ID，ID(身份标识号)用于标识用户选择的View node。第二连接模块将查询用户选择的View node的节点信息的请求转发至第一连接模块，第一连接模块收到查询请求后，将该查询请求转发至ViewManager模块。

步骤210、返回ID对应的View node信息。

其中，ID对应的View node信息可以是ID对应的的View node的大小、尺寸及样式信息等。ViewManager模块接收到查询用户选择的View node的节点信息的请求后，将ID对应的View node信息发送至第一连接模块，第一连接模块将ID对应的View node信息发送至第二连接模块，第二连接模块接收到ID对应的View node信息，转发至ViewPresenter模块。

步骤211、展示ID对应的View node信息。

其中，ViewPresenter模块以表单的形式展示选中的View node的大小、尺寸及样式信息，并且表单字段可编辑。

步骤212、修改ID对应的View node信息。

其中，ViewPresenter模块接收到用户修改View node的大小、尺寸或者样式字段等信息的输入后，将修改ID对应的View node信息的请求发送至第二连接模块。第二连接模块将修改ID对应的View node信息的请求转发至第一连接模块，第一连接模块收到修改请求后，将该修改请求转发至ViewManager模块。

步骤213、执行修改View node信息，并发送变更后的View Hierarchy数据。

其中，ViewManager模块执行ID对应的View node大小、尺寸或者样式字段等信息的修改指令，修改完成后APP的显示界面同步更新，View Hierarchy通知View Hierarchy数据的变更列表，将View Hierarchy数据的变更列表发送至第一连接模块。第一连接模块将View Hierarchy数据的变更列表转发至ViewPresenter模块。

步骤214、更新Virtual View tree。

其中，ViewPresenter模块根据返回的View Hierarchy数据的变更列表，更新Virtual View tree界面和所选择View node的表单界面。

在上述实施方式中，可以查看以及修改预览运行在移动设备上的原生应用程序图形用户界面。如图3所示，在调试过程中，可以以Objective-C编译的源代码为输入，源代码编译构建出的程序在移动设备上运行时会在内存中维持一个中间状态的数据结构ViewHierarchy，View Hierarchy数据结构被浏览器渲染引擎或操作系统的图形服务器进行绘制处理，生成图像显示到屏幕上，为用户所看到的图形界面。通过网页可视化展示ViewHierarchy并提供修改界面，提供修改View Hierarchy的路径，并通过网页提供修改界面，能够提高原生应用程序开发人员调试界面问题的效率。

如图4所示，本发明实施例还提供一种应用程序调试系统，所述应用程序调试系统300包括第一电子设备301和第二电子设备302；

所述第一电子设备301用于接收第二电子设备302发送的原生应用程序的视图层级数据，并基于所述视图层级数据生成并显示虚拟视图树；

所述第一电子设备301还用于接收对目标视图节点的节点信息的修改输入，并基于所述修改输入生成所述目标视图节点的节点修改信息，以及，向所述第二电子设备302发送所述节点修改信息，所述目标视图节点为所述虚拟视图树中的节点；

所述第二电子设备302用于基于所述节点修改信息对所述视图层级数据进行修改，以更新所述原生应用程序的显示界面。

可选的，所述第一电子设备301还用于接收用户在所述虚拟视图树中选择所述目标视图节点的输入，并向所述第二电子设备302发送用于标识所述目标视图节点的标识信息；

所述第二电子设备302还用于基于所述标识信息获取所述目标视图节点的节点信息，以及，向所述第一电子设备301发送所述目标视图节点的节点信息；

所述第一电子设备301还用于显示所述目标视图节点的节点信息。

可选的，所述第二电子设备302还用于向所述第一电子设备301发送修改后的视图层级数据；

所述第一电子设备301还用于基于所述修改后的视图层级数据对所述虚拟视图树进行更新。

可选的，所述第二电子设备302还用于将所述原生应用程序的视图层级数据序列化处理为文本数据，并向所述第一电子设备301发送所述文本数据；

所述第一电子设备301还用于接收所述第二电子设备302发送的所述文本数据，将所述文本数据进行反序列化处理；

所述第一电子设备301还用于将反序列化处理后的文本数据以虚拟视图树的数据结构存储在内存中，并在网页上显示所述虚拟视图树。

可选的，所述第二电子设备302还用于采用图形服务器对所述原生应用程序的视图层级数据进行绘制处理，在屏幕上生成图像；

所述第二电子设备302还用于采用所述图形服务器对修改后的所述视图层级数据进行绘制处理，以更新所述屏幕上的图像。

需要说明的是，所述应用程序调试系统能够实现图1所述的应用程序调试方法实施例的各个过程，并能达到相同的技术效果，为避免重复，这里不再赘述。

本发明实施例还提供了一种电子设备，如图5所示，包括处理器401、通信接口402、存储器403和通信总线404，其中，处理器401，通信接口402，存储器403通过通信总线404完成相互间的通信，

存储器403，用于存放计算机程序；

处理器401，用于执行存储器403上所存放的程序时，实现上述方法实施例中第一电子设备执行的步骤；或者，处理器401，用于执行存储器403上所存放的程序时，实现上述方法实施例中第二电子设备执行的步骤。

上述电子设备提到的通信总线可以是外设部件互连标准(Peripheral ComponentInterconnect，简称PCI)总线或扩展工业标准结构(Extended Industry StandardArchitecture，简称EISA)总线等。该通信总线可以分为地址总线、数据总线、控制总线等。为便于表示，图中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。

通信接口用于上述电子设备与其他设备之间的通信。

存储器可以包括随机存取存储器(Random Access Memory，简称RAM)，也可以包括非易失性存储器(non-volatile memory)，例如至少一个磁盘存储器。可选的，存储器还可以是至少一个位于远离前述处理器的存储装置。

上述的处理器可以是通用处理器，包括中央处理器(Central Processing Unit，简称CPU)、网络处理器(Network Processor，简称NP)等；还可以是数字信号处理器(Digital Signal Processing，简称DSP)、专用集成电路(Application SpecificIntegrated Circuit，简称ASIC)、现场可编程门阵列(Field－Programmable Gate Array，简称FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。

在本发明提供的又一实施例中，还提供了一种计算机可读存储介质，该计算机可读存储介质中存储有指令，当其在计算机上运行时，使得计算机执行上述实施例中任一所述的应用程序调试方法。

在本发明提供的又一实施例中，还提供了一种包含指令的计算机程序产品，当其在计算机上运行时，使得计算机执行上述实施例中任一所述的应用程序调试方法。

在上述实施例中，可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时，可以全部或部分地以计算机程序产品的形式实现。所述计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行所述计算机程序指令时，全部或部分地产生按照本发明实施例所述的流程或功能。所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。所述计算机指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一个计算机可读存储介质传输，例如，所述计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线(DSL))或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。所述计算机可读存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。所述可用介质可以是磁性介质，(例如，软盘、硬盘、磁带)、光介质(例如，DVD)、或者半导体介质(例如固态硬盘Solid State Disk(SSD))等。

需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

本说明书中的各个实施例均采用相关的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

以上所述仅为本发明的较佳实施例而已，并非用于限定本发明的保护范围。凡在本发明的精神和原则之内所作的任何修改、等同替换、改进等，均包含在本发明的保护范围内。

Claims (12)

1.一种应用程序调试方法，其特征在于，所述方法包括：

第一电子设备接收第二电子设备发送的原生应用程序的视图层级数据，并基于所述视图层级数据生成并显示虚拟视图树；

所述第一电子设备接收对目标视图节点的节点信息的修改输入，并基于所述修改输入生成所述目标视图节点的节点修改信息，以及，向所述第二电子设备发送所述节点修改信息，所述目标视图节点为所述虚拟视图树中的节点；

所述第二电子设备基于所述节点修改信息对所述视图层级数据进行修改，以更新所述原生应用程序的显示界面。

2.根据权利要求1所述的方法，其特征在于，所述第一电子设备接收对目标视图节点的节点信息的修改输入之前，所述方法还包括：

所述第一电子设备接收用户在所述虚拟视图树中选择所述目标视图节点的输入，并向所述第二电子设备发送用于标识所述目标视图节点的标识信息；

所述第二电子设备基于所述标识信息获取所述目标视图节点的节点信息，以及，向所述第一电子设备发送所述目标视图节点的节点信息；

所述第一电子设备显示所述目标视图节点的节点信息。

3.根据权利要求1所述的方法，其特征在于，所述方法还包括：

所述第二电子设备向所述第一电子设备发送修改后的视图层级数据；

所述第一电子设备基于所述修改后的视图层级数据对所述虚拟视图树进行更新。

4.根据权利要求1所述的方法，其特征在于，所述第一电子设备接收第二电子设备发送的原生应用程序的视图层级数据之前，所述方法还包括：

所述第二电子设备将所述原生应用程序的视图层级数据序列化处理为文本数据，并向所述第一电子设备发送所述文本数据；

所述第一电子设备接收第二电子设备发送的原生应用程序的视图层级数据，并基于所述视图层级数据生成虚拟视图树，包括：

所述第一电子设备接收所述第二电子设备发送的所述文本数据，将所述文本数据进行反序列化处理；

所述第一电子设备将反序列化处理后的文本数据以虚拟视图树的数据结构存储在内存中，并在网页上显示所述虚拟视图树。

5.根据权利要求1所述的方法，其特征在于，所述第一电子设备接收第二电子设备发送的原生应用程序的视图层级数据之前，所述方法还包括：

所述第二电子设备采用图形服务器对所述原生应用程序的视图层级数据进行绘制处理，在屏幕上生成图像；

所述第二电子设备基于所述节点修改信息对所述视图层级数据进行修改之后，所述方法还包括：

所述第二电子设备采用所述图形服务器对修改后的所述视图层级数据进行绘制处理，以更新所述屏幕上的图像。

6.一种应用程序调试系统，其特征在于，所述应用程序调试系统包括第一电子设备和第二电子设备；

所述第一电子设备用于接收第二电子设备发送的原生应用程序的视图层级数据，并基于所述视图层级数据生成并显示虚拟视图树；

所述第一电子设备还用于接收对目标视图节点的节点信息的修改输入，并基于所述修改输入生成所述目标视图节点的节点修改信息，以及，向所述第二电子设备发送所述节点修改信息，所述目标视图节点为所述虚拟视图树中的节点；

所述第二电子设备用于基于所述节点修改信息对所述视图层级数据进行修改，以更新所述原生应用程序的显示界面。

7.根据权利要求6所述的应用程序调试系统，其特征在于，所述第一电子设备还用于接收用户在所述虚拟视图树中选择所述目标视图节点的输入，并向所述第二电子设备发送用于标识所述目标视图节点的标识信息；

所述第二电子设备还用于基于所述标识信息获取所述目标视图节点的节点信息，以及，向所述第一电子设备发送所述目标视图节点的节点信息；

所述第一电子设备还用于显示所述目标视图节点的节点信息。

8.根据权利要求6所述的应用程序调试系统，其特征在于，所述第二电子设备还用于向所述第一电子设备发送修改后的视图层级数据；

所述第一电子设备还用于基于所述修改后的视图层级数据对所述虚拟视图树进行更新。

9.根据权利要求6所述的应用程序调试系统，其特征在于，所述第二电子设备还用于将所述原生应用程序的视图层级数据序列化处理为文本数据，并向所述第一电子设备发送所述文本数据；

所述第一电子设备还用于接收所述第二电子设备发送的所述文本数据，将所述文本数据进行反序列化处理；

所述第一电子设备还用于将反序列化处理后的文本数据以虚拟视图树的数据结构存储在内存中，并在网页上显示所述虚拟视图树。

10.根据权利要求6所述的应用程序调试系统，其特征在于，所述第二电子设备还用于采用图形服务器对所述原生应用程序的视图层级数据进行绘制处理，在屏幕上生成图像；

所述第二电子设备还用于采用所述图形服务器对修改后的所述视图层级数据进行绘制处理，以更新所述屏幕上的图像。

11.一种电子设备，其特征在于，包括处理器、通信接口、存储器和通信总线，其中，处理器，通信接口，存储器通过通信总线完成相互间的通信；

存储器，用于存放计算机程序；

处理器，用于执行存储器上所存放的程序时，实现权利要求1-5任一所述的方法步骤。

12.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1-5中任一所述的方法。

Images