CN109800173A - 程序调试方法、装置及存储介质 - Google Patents

Abstract

本申请实施例提供了一种程序调试方法，所述程序包含第一程序组件和待调试的第二程序组件；所述方法包括：在第一终端的浏览器调试工具提供的调试入口页面中，加载所述待调试的第二程序组件；接收并解析第二终端发送的调试消息，所述调试消息中包含运行在所述第二终端中的所述第一程序组件对所述待调试的第二程序组件中的接口函数的调用指令；执行所述第二程序组件中的接口函数，并在执行所述接口函数的过程中，通过所述第一终端的所述浏览器调试工具，对所述第二程序组件进行调试。本申请实施例还提供了对应的程序调试装置和存储介质。

Description

程序调试方法、装置及存储介质

技术领域

本申请涉及信息技术领域，尤其涉及一种程序调试方法、装置及存储介质。

背景技术

随着智能手机的不断发展，各种应用程序(简称APP)的功能也在不断丰富，但在完成APP的新功能开发后，都需要重新打包APP并发布到各个应用市场进行审核，再最终由用户自行下载安装更新。整个过程非常复杂，且及时性不高，无法满足一些紧急的需求。因此，Android和iOS上都出现了许多混合模式移动应用(Hybrid APP)，将整个终端功能及界面都交由脚本语言(例如JavaScript)来编写，编写完成后将其打包成一个脚本文件(例如，jsbundle文件)并上传到内容分发网络(CDN：Content Delivery Network)服务器，线上已发布APP可以直接下载更新该jsbundle，从而实现APP内部自己功能升级，不需要再通过应用市场发布审核。

开发这类由JavaScript编写的Hybrid APP时，免不了需要对代码进行调试。对运行于浏览器中的JavaScript，可以直接借助浏览器调试工具，比如inspector进行调试。但Hybrid APP对应的JavaScript代码是运行在非浏览器环境下的JavaScript引擎中，由于JavaScript引擎没有提供通用的调试方式，因此，开发者无法通过JavaScript引擎对JavaScript代码进行调试，对开发者造成了很大的麻烦。

发明内容

本请实施例提供了一种程序调试方法、装置及存储介质，可以调试运行在非浏览器环境下的脚本引擎的应用程序的待调试的程序组件。

本申请实施例提供了一种程序调试方法，所述程序包含第一程序组件和待调试的第二程序组件；所述方法包括：

在第一终端的浏览器调试工具提供的调试入口页面中，加载所述待调试的第二程序组件；

接收并解析第二终端发送的调试消息，所述调试消息中包含运行在所述第二终端中的所述第一程序组件对所述待调试的第二程序组件中的接口函数的调用指令；

执行所述第二程序组件中的接口函数，并在执行所述接口函数的过程中，通过所述第一终端的所述浏览器调试工具，对所述第二程序组件进行调试。

本申请实施例还提供了一种装置，所述程序包含第一程序组件和第二程序组件；所述装置位于第一终端，包括：本地调试服务组件和浏览器调试工具；

所述本地调试服务组件，用于保存待调试的第二程序组件；

所述浏览器调试工具，用于在调试入口页面中加载保存在所述本地调试服务组件中的所述待调试的第二程序组件；接收并解析第二终端发送的调试消息，所述调试消息中包含运行在所述第二终端中的第一程序组件对所述待调试的第二程序组件中的接口函数的调用指令；执行所述第二程序组件中的接口函数，并在执行所述接口函数的过程中，通过所述第一终端的所述浏览器调试工具，对所述第二程序组件进行调试。

本申请实施例还提供了一种非易失性机器可读存储介质，存储有可读指令，可以使至少一个处理器执行上述程序调试方法。

在本申请的一些实施例提供的程序调试方法中，待调试的第二程序组件的执行过程可以在第一终端变得可视化，同时，可以使用浏览器调试工具对待调试的第二程序组件进行可视化的调试，解决了第二终端的非浏览器环境下脚本引擎不支持调试功能的问题，大大提高了开发和调试效率。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。其中：

图1A为本申请一些实施例提供的Hybrid应用程序的内部运行结构示意图；

图1B为本申请一些实施例提供的一种应用场景的示意图；

图1C为本申请一些实施例中第一终端的结构示意图；

图1D为本申请一些实施例提供的普通模式下第二终端的内部运行结构示意图；

图1E为本申请一些实施例提供的远程调试模式下第二终端的内部运行结构示意图；

图2为本申请一些实施例提供的程序调试方法的流程图；

图3为本申请一些实施例提供的程序调试方法的流程图；

图4为本申请一些实施例中的用户界面示意图；

图5为本申请一些实施例中远程调试模式下第一终端和第二终端的交互示意图；

图6A和6B为本申请一些实施例中调试界面的示意图；

图7为本申请一些实施例中实时加载模式的示意图；

图8为本申请一些实施例提供的程序调试装置的结构示意图；以及

图9为本申请一些实施例提供的计算设备的硬件结构示意图。

具体实施方式

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

为了描述上的简洁和直观，下文通过描述若干代表性的实施例来对本申请的方案进行阐述。实施例中大量的细节仅用于帮助理解本申请的方案。但是很明显，本申请的技术方案实现时可以不局限于这些细节。为了避免不必要地模糊了本申请的方案，一些实施方式没有进行细致地描述，而是仅给出了框架。下文中，“包括”是指“包括但不限于”，“根据……”是指“至少根据……，但不限于仅根据……”。下文中没有特别指出一个成分的数量时，意味着该成分可以是一个也可以是多个，或可理解为至少一个。

混合模式移动应用程序，又叫Hybrid应用程序，是指介于网页应用(Web APP)和原生应用(Native APP)这两者之间的应用，兼具有原生应用良好用户交互体验的优势和网页应用跨平台开发的优势。

Hybrid应用程序内部的交互是通过原生代码调用前端页面的JavaScript方法，或者前端页面通过JavaScript调用原生代码提供的接口实现的。

图1A为本申请一些实施例提供的Hybrid应用程序的内部运行结构示意图。如图1所示，Hybrid应用程序包含第一程序组件1202和第二程序组件1201，其中第一程序组件1202包括的业务逻辑模块是由第一脚本语言(例如Java语言)编写，而实现Hybrid应用程序的功能界面的第二程序组件1201由第二脚本语言(例如JavaScript语言)编写。在完成或更新功能界面的JavaScript脚本后，开发人员可以将其打包生成一个脚本文件(即第二程序组件1201)，比如jsbundle文件，并将该脚本文件上传至内容分发服务器，以使Hybrid应用程序的用户直接下载更新。

在一些实施例中，Hybrid应用程序所在的终端设备从上述内容分发服务器下载上述第二程序组件1201，并加载到脚本引擎124比如JavaScript引擎中运行；当上述终端设备的第一程序组件1202调用上述第二程序组件1201中的接口函数时，将被调用的接口函数及其参数发送至引擎逻辑层123接收，并由其转发给脚本引擎124，从而最终调用到上述第二程序组件1201中对应的接口函数，上述脚本引擎124将被调用的接口函数的执行结果返回给上述第一程序组件1202，以使其展示执行结果。

如图1A所示，Hybrid应用程序的第二程序组件1201(例如，JavaScript脚本)是运行在非浏览器环境下的脚本引擎124(比如JavaScript引擎)中，由于该脚本引擎124没有提供通用的调试方式，因此，开发者无法通过脚本引擎124对JavaScript脚本进行调试。

在一些实施例中，可以通过浏览器调试工具，来实现在第一终端(比如个人电脑)上对运行于远程的第二终端(比如手机)上的页面进行远程调试。其中，所述的浏览器调试工具，也称为浏览器开发者工具，具有脚本调试、查看网页加载过程、获取网页请求等功能。

在一些实施例中，为了进行远程调试，可以将第一终端与第二终端通过USB线进行连接，在第一终端上的浏览器的设置中打开远程调试开关，建立第一终端与第二终端之间的连接；在第一终端上打开待调试的页面，比如对于Chrome浏览器，可以在地址栏输入“chrome://respect”来打开需要调试的页面。其中，第二终端相当于于一个服务器，提供了所有的页面资源文件，由第一终端作为客户终端来下载和访问。第二终端通过HTTP协议将待调试的页面的资源文件发送到第一终端。当开始调试时，第一终端的浏览器调试工具使用全双工通信协议比如Web Socket协议建立第二终端(前端)和第一终端(后端)之间传输消息的通道，并通过该通道传输调试命令。

但是，这种远程调试方法无法在调试界面上展示第二程序组件(例如，JavaScript脚本文件)和第一程序组件(例如，应用程序的原生业务逻辑)之间调用的过程和返回结果的过程，即无法应用于非浏览器环境下的脚本引擎比如JavaScript引擎，或者应用非浏览器环境下的脚本引擎比如JavaScript引擎需要做大量的改造工作，实现过程比较复杂。

本申请实施例提出了一种程序调试方法，可将原本在第二终端内运行的待调试的第二程序组件放到第一终端的调试环境中运行，第二终端将第二程序组件和第一程序组件之间的调用指令转发给第一终端，并接收第一终端返回的执行结果。这样，就可以在第一终端的调试界面中展示第二程序组件和第一程序组件之间的调用过程和返回结果的过程，也即可以看到待测试的第二程序组件的执行过程，从而可以调试运行在非浏览器环境下的脚本引擎比如JavaScript引擎中的应用程序的待测试的第二程序组件。

需要说明的是，通常情况下，浏览器内核包括渲染引擎和脚本引擎比如JavaScript引擎，非浏览器环境下的脚本引擎是指，缺少渲染引擎而只包括浏览器内核中的脚本引擎的运行环境。

图1B显示了本申请一些实施例提供的一种应用场景100的示意图。如图1B所示，应用场景100中包括第一终端11和第二终端12；其中，第一终端11和第二终端12之间通过链路13进行通信连接。

在一些实施例中，所述第一终端11包括浏览器调试工具111和本地调试服务组件112。

所述第二终端12中安装有应用程序14。在一些实施例中，所述应用程序14可以为Hybrid应用程序。该应用程序14包含第一程序组件1202和第二程序组件1201。在一些实施例中，所述第一程序组件1202可以是Hybrid应用程序的原生组件，例如业务逻辑模块；第二程序组件1201可以是Hybrid应用程序的非原生组件，例如JavaScript脚本文件。

当开发人员生成了新的第二程序组件1201时，需要对新的第二程序组件1201进行调试。此时，可以将该第二程序组件1201保存到第一终端11的本地调试服务组件112中。

当进行调试时，所述第一终端11的浏览器调试工具111在调试入口页面中加载保存在所述本地调试服务组件112中的所述待调试的第二程序组件1201。

在一些实施例中，所述第二终端12的应用程序14中进一步包含引擎调试代理146，用于将第一程序组件1202对第二终端12中的第二程序组件1201的调用转发到第一终端11。在一些实施例中，第二终端12向第一终端11发出调试消息，所述调试消息中包含运行在所述第二终端12中的所述第一程序组件1202对所述待调试的第二程序组件1201中的接口函数的调用指令。

所述第一终端11的浏览器调试工具111接收并解析第二终端12发送的调试消息；执行所述第二程序组件1201中的接口函数，并在执行所述接口函数的过程中，对所述第二程序组件1201进行调试。

在一些实施例中，所述第一终端11可以进一步包括开发工具113，用于生成所述待调试的第二程序组件1201，并将所述待调试的第二程序组件1201保存在所述本地调试服务组件112中。

在本申请实施例提供的调试方法中，通过将原本运行在第二终端12中的待调试的第二程序组件1201放到第一终端11的调试环境中，使得所述第二程序组件1201在第二终端12的运行过程变得可见了，从而可以在第一终端11利用浏览器调试工具111对第二程序组件1201进行可视化的调试。

在一些实施例中，上述第一终端11可以是个人计算机(PC)、笔记本电脑等终端设备。所述第二终端12可以是指具有数据计算处理功能的终端设备，包括但不限于(安装有通信模块的)智能手机、掌上电脑、平板电脑、智能电视(Smart TV)等。这些通信终端上都安装有操作系统，包括但不限于：Android操作系统、Symbian操作系统、Windows mobile操作系统、以及苹果iPhone OS操作系统等等。

在一些实施例中，第一终端11和第二终端12之间的链路13可以是通用串行总线(USB：Universal Serial Bus)连接或者是局域网连接，第一终端11和第二终端12遵守全双工通信协议来传输调用指令和执行结果，比如遵守WebSocket通信协议来传输调用指令和执行结果。

下面结合图1C对本申请实施例提供的第一终端的结构进行说明。图1C为本申请一些实施例提供的第一终端的结构示意图。如图1C所示，第一终端11内部包括两个功能组件：浏览器调试工具111以及本地调试服务组件112。在一些实施例中，所述第一终端11还可以进一步包括开发工具113。

其中，上述开发工具113为应用程序的开发工具，当开发人员对应用程序进行了更新，可以通过开发工具113将更新的代码和资源进行打包，得到待调试的第二程序组件1201，并将其保存在本地调试服务组件112中。例如，可以在上述应用程序的脚本发生修改时，自动将修改后的应用程序的脚本打包为待调试脚本文件，比如jsbundle文件。

在一些实施例中，上述浏览器调试工具111为浏览器提供的开发者工具，比如Chrome浏览器提供的调试工具DevTool，可以实现对网页页面文件以及脚本文件进行调试，比如可以对网页的html文件和JavaScript脚本进行调试；

上述本地调试服务组件112，用于向浏览器调试工具111提供待调试的第二程序组件1201、模拟脚本引擎提供的运行环境、以及实现与第二终端12和浏览器调试工具111之间的通信。

在一些实施例中，所述本地调试服务组件112可以进一步包括网页服务组件120和通信服务组件130。

其中，所述网页服务组件120用于，保存开发工具113生成的所述待调试的第二程序组件1201，将所述待调试的第二程序组件1201提供给浏览器调试工具111、以及模拟所述第二程序组件1201运行的网络环境。

所述通信服务组件130用于实现与上述第二终端12以及所述浏览器调试工具111之间的通信，例如，将第二终端12发出的调试消息转发给所述浏览器调试工具111，将所述浏览器调试工具111得到的执行结果返回给第二终端12等等。

在一些实施例中，上述网页服务组件120中还进一步保存了初始化脚本文件1208以及调试入口页面1203。在一些实施例中，所述初始化脚本文件1208为一个脚本文件比如debugworker.js，其中记录了待调试的第二程序组件1201的保存路径，运行该初始化脚本文件1208可以通过保存路径加载上述待调试的第二程序组件1201；所述初始化脚本文件1208还可以在容器1204中创建消息处理模块1205，所述消息处理模块1205用于将第二终端12发送来的调试消息转换为一次函数调用，最终调用到第二程序组件1201中的方法；所述调试入口页面1203，可以是一个网页页面比如debugger.html，提供了开始调试的入口，通过加载上述调试入口页面1203可以进入调试界面。

在一些实施例中，所述通信服务组件130，包含用于实现消息中转的通信接口组件1301和协议中转组件1302。通信服务组件130中的通信接口组件1301、协议中转组件1302与上述第二终端的通信接口组件形成了通信通道，可以将调试消息从第二终端12传递至第一终端11的通信接口组件1206，再由调度组件1207转发至容器1204中的消息处理模块1205，还可以将调用结果从第一终端11返回至第二终端12进行展示。

在一些实施例中，第一终端11的调试入口页面1203可能创建了多个容器1204，当通信接口组件1206从通信服务组件130接收到调试消息之后，由调度组件1207将调试消息分发给不同的容器1204。

在本申请实施例中，通过在第一终端11中的本地调试服务组件112，可以模拟待调试的第二程序组件1201的运行环境，并且搭建起了从第二终端的第一程序组件与第一终端11的浏览器调试工具之间的桥梁，从而使得原本在第二终端内运行的第二程序组件能够在第一终端运行，这样，可以在第一终端11利用浏览器调试工具111对第二程序组件1201进行可视化的调试。

下面结合图1D和图1E对本申请实施例提供的第二终端12进行说明。其中，图1D为本申请实施例提供的普通模式下第二终端12的内部运行结构示意图，图1E为本申请实施例提供的远程调试模式下第二终端12的内部运行结构示意图。

如图1D和1E所示，为了能够将原本运行在第二终端12内的第二程序组件1201放到第一终端11的调试环境中运行，在第二终端12中增加了一个引擎调试代理146，用于将第一程序组件1202对第二程序组件1201中接口函数的调用转发给第一终端11，从而使得第二程序组件1201能够在第一终端11的调试环境下运行。

在一些实施例中，所述引擎调试代理146包括：控制模块1461，调试协议处理模块1462和通信接口组件1463。

在没有进行远程调试的情况下(即，普通模式)，如图1D所示，引擎调试代理146将第一程序组件1202对第二程序组件1201中接口函数的调用转发给脚本引擎124，并接收脚本引擎124返回的执行结果。

在开启了远程调试的情况下(即，远程调试模式)，如图1E所示，引擎调试代理146中的控制模块1461将第一程序组件1202对第二程序组件1201中接口函数的调用通过调试协议处理模块1462和通信接口组件1463转发给第一终端11。

下面结合图2对本申请实施例提供的程序调试方法进行说明。图2为本申请的一些实施例提供的程序调试方法的流程图，该方法可以由图1B和图1C所示的第一终端11执行。在本申请实施例中，所述程序包含第一程序组件和待调试的第二程序组件。如图2所示，该方法包括以下步骤：

步骤S201：在第一终端的浏览器调试工具提供的调试入口页面中，加载所述待调试的第二程序组件。

在一些实施例中，当开发人员生成了新的第二程序组件之后，可以将所述待调试的第二程序组件保存在所述第一终端的指定路径下，并将该指定路径记录在初始化脚本文件中。这样，在进行调试时，第一终端的浏览器调试工具可以在所述调试入口页面中加载初始化脚本文件，通过运行所述初始化脚本文件，可以根据所述指定路径，在调试入口页面中加载所述待调试的第二程序组件。

在一些实施例中，第一终端可以在接收第二终端发送的远程调试指令之后，打开浏览器，在所述第一终端的浏览器调试工具中加载所述调试入口页面，并在所述调试入口页面中创建一个容器，在所述容器中加载所述初始化脚本文件。

其中，所述远程调试指令除了可以指示第一终端打开浏览器、加载调试入口页面之外，进一步用于指示第二终端将所述第一程序组件对所述待调试的第二程序组件中的接口函数的调用指令转发给所述第一终端。

在一些实施例中，在加载所述调试入口页面之后，第一终端可以展示所述浏览器调试工具的调试界面；在所述调试界面上展示所述待调试的第二程序组件包含的代码；然后在所述第二程序组件包含的代码中设置断点，以便后续对所述第二程序组件进行调试。

步骤S202：接收并解析第二终端发送的调试消息，所述调试消息中包含运行在所述第二终端中的所述第一程序组件对所述待调试的第二程序组件中的接口函数的调用指令。

在一些实施例中，第一终端在接收到第二终端发送的调试消息之后，可以从所述调试消息中获取所述调试消息的类型标识，如果所述类型标识指示所述调试消息为函数调用，则从所述调试消息中获取被调用的接口函数的名称以及被调用的接口函数的参数；将所述获取被调用的接口函数的名称以及被调用的接口函数的参数提供给所述浏览器调试工具，由所述浏览器调试工具执行所述待调试的第二程序组件中的所述被调用的接口函数。

如果所述类型标识指示所述调试消息为重新加载所述第二程序组件，例如所述第二程序组件进行了更新，需要重新加载，则第一终端在收到该调试消息之后，通过所述浏览器调试工具重新加载所述第二程序组件。

步骤S203：执行所述第二程序组件中的接口函数，并在执行所述接口函数的过程中，通过所述第一终端的所述浏览器调试工具，对所述第二程序组件进行调试。

在本申请的一些实施例提供的程序调试方法中，待调试的第二程序组件的执行过程可以在第二终端变得可视化，同时，可以使用浏览器的调试工具对待调试的第二程序组件进行可视化的调试，解决了第二终端的非浏览器环境下脚本引擎不支持调试功能的问题，大大提高了开发和调试效率。

在上述的调试方法中，将原本运行在第二终端中的待调试的第二程序组件放到第一终端中运行，这种调试模式可以称为远程调试模式。在本申请实施例中，除了远程调试模式，还进一步提供了一种实时加载模式。第二终端开启了实时加载模式之后，会向第二终端发送实时加载指令。第一终端在收到实时加载指令之后，确定所述第二终端开启了实时加载模式。在实时加载模式下，如果第一终端中保存的第二程序组件有更新，则第一终端可以向所述第二终端发送通知消息，以使所述第二终端从所述第一终端获取所述第二程序组件。之后，第二终端可以通过运行所述第二程序组件来展示运行结果，从而使得调试人员根据展示的运行结果进行用户界面的调试。

下面结合图3对本申请实施例提供的程序调试方法进行说明。图3示出了本申请一些实施例提供的程序调试方法的流程图。该方法可以由图1B所示的第一终端和第二终端执行。

在该实施例中，以开发工具位于所述第一终端内部为例进行说明，需要说明的是，所述开发工具也可以位于独立于所述第一终端的其他设备上，此时，第一终端的本地调试服务组件可以从其他设备获取所述开发工具生成的待调试脚本文件。

此外，在本实施例中，以待调试的第二程序组件为待调试脚本文件为例进行说明。

如图3所示，该程序调试方法包括以下步骤：

步骤S301：第一终端的开发工具生成一个待调试脚本文件。

在一些实施例中，当开发人员在开发工具中完成应用程序的编写或完成应用程序的更新时，第一终端的开发工具将更新的代码和资源打包生成一个对应的待调试脚本文件，比如Jsbundle文件。

步骤S302：第一终端的开发工具将生成的待调试脚本文件保存至本地调试服务组件的指定路径下。

在一些实施例中，上述指定路径为调试人员预先指定的一个路径，用于保存上述待调试脚本文件，该指定路径可以记录在第一终端的网页服务组件保存的初始化脚本文件中。这样，当浏览器调试工具需要加载该待调试脚本文件时，浏览器调试工具可以通过运行上述初始化脚本文件，从而从初始化脚本文件记录的指定路径加载到上述待调试脚本文件。

步骤S303：响应于调试人员输入的启动命令，第一终端启动本地调试服务组件。

在一些实施例中，调试人员可以在上述第一终端中待调试脚本文件的根目录下输入启动命令，例如npm run start命令，以启动第一终端的本地调试服务组件。

其中，NPM(node package manager)是上述待调试脚本文件的包管理工具，通过npm命令可以启动本地调试服务组件，以允许调试人员从本地调试服务组件加载上述待调试脚本文件。

步骤S304：第二终端向上述第一终端发出调试指令。

在一些实施例中，所述调试指令可以是远程调试指令，或者是实时加载指令。

如果所述调试指令为远程调试指令，则转到步骤S305，第一终端打开浏览器调试工具，加载调试入口页面，以便进行远程调试。

在一些实施例中，在启动第一终端的本地调试服务组件之后，就可以开始进行调试了。由于在普通模式下，第二终端中运行的第一程序组件对待调试脚本文件中接口函数的调用，是由第二终端中的脚本引擎来执行，即待调试脚本文件运行在第二终端中。所以，在开始进行远程调试时，需要通知第二终端的引擎调试代理将第一程序组件对待调试脚本文件中接口函数的调用转发给第一终端。

因此，一方面，该远程调试指令可以指示第一终端打开浏览器并通过浏览器调试工具加载调试入口页面，另一方面，也可以指示第二终端的引擎调试代理切换到远程调试模式。

或者，所述远程调试指令也可以仅用于通知第二终端的引擎调试代理切换到远程调试模式。对于第一终端，可以手动打开浏览器并加载调试入口页面。

如果所述调试指令为实时加载指令，则转到步骤S321，进入实时加载模式。在实时加载模式下，一旦第一终端中的待调试脚本文件有更新，则通知第二终端，第二终端从第一终端获取更新后的待调试脚本文件之后，运行该脚本文件，以便调试人员进行用户界面的调试。

图4为本申请一些实施例提供的用户界面示意图。如图4所示，第二终端的应用程序进入调试模式后，第二终端的应用程序的界面上会出现一个调试按钮402，点击该调试按钮402，第二终端显示3个调试控件：重新加载控件403，远程调试控件404和实时加载控件405。其中，加载控件403和远程调试控件404用于远程调试模式，具体的，远程调试控件404用于开启远程调试模式；重新加载控件403用于在开启了远程调试模式之后，加载待调试脚本文件。实时加载控件405用于开启实时加载模式。

在一些实施例中，在点击了远程调试控件404之后，第二终端向第一终端发出远程调试指令；在点击了实时加载控件405之后，第二终端向第一终端发出实时加载指令。

在一些实施例中，在远程调试模式已经开启的情况下，如果再次点击第二终端的远程调试控件404，则可以关闭所述远程调试模式。此时，第一终端可以关闭浏览器。类似的，如果实时加载模式已经开启，用户再次点击了第二终端的实时加载控件405，则可以关闭所述实时加载模式。此时，第一终端不再向第二终端发送通知消息。

步骤S305：第一终端响应于接收到的远程调试指令，打开浏览器并加载调试入口页面。

在一些实施例中，第一终端接收到上述第二终端发送的远程调试指令后，打开浏览器，并加载上述调试入口页面，例如debugger.html。

图5是本申请实施例中远程调试模式下第一终端和第二终端之间的交互示意图。如图5所示，当调试人员点击了第二终端的远程调试控件404之后，第二终端12将所述远程调试指令通过通信接口组件1463发送到第一终端11的通信服务组件130的通信接口组件1301，由第一终端11的协议中转组件1302转发给浏览器调试工具111的通信接口组件1206，从而完成调试入口页面的加载操作。

在一些实施例中，如果上述调试人员关闭了所述远程调试模式或者关闭了所述调试入口页面，还可以手动打开浏览器，并在浏览器中输入的预设地址，加载上述调试入口页面。

例如，根据调试人员在浏览器调试工具中输入的预设地址http://127.0.0.1/ debuuger.html，将所述调试入口页面作为网页页面加载到上述浏览器调试工具中。

步骤S306：在加载上述调试入口页面的过程中，第一终端运行所述调试入口页面中的脚本，创建一个容器并加载初始化脚本文件。

在一些实施例中，所述调试入口页面中内置有脚本，在加载所述调试入口页面的过程中，当解析至所述调试入口页面中内置的上述脚本时，运行上述脚本，上述脚本用于实现调度组件的功能，也即用于创建容器和销毁容器，并在所述容器中加载初始化脚本文件以创建消息处理模块。其中，该容器可以随时销毁和重建，该容器可以是一个Webworker容器。

具体的，在第一终端的浏览器调试工具加载所述调试入口页面的主线程运行的过程中，该浏览器调试工具在该主线程下创建一个新的子线程用于创建所述容器，由于该子线程与上述主线程可以同时独立存在，并且该子线程可以随时销毁，并建立其他子线程，因此该容器可以随时销毁和重建，该容器提供的上下文环境与第二终端上的脚本引擎提供的环境非常类似，也即该容器可以作为一个模拟第二终端上的脚本引擎的模拟器。例如，当用户点击重新加载控件403(reload)时，不需要重新加载所述调试入口页面，而是将所述容器以及在所述容器中加载的数据销毁，并重新开辟一个子线程来创建一个新的容器。这样可以提高调试的效率，简化调试人员的操作。

在一些实施例中，在创建上述容器后，并在该容器中加载初始化脚本文件，例如debugworker.js脚本文件，以在该容器中创建消息处理模块，所述消息处理模块用于处理第二终端发送的调试消息，可以将调试消息转换为函数调用以执行被调用的接口函数。

步骤S307：当上述调试入口页面加载完成后，第一终端的浏览器调试工具打开调试界面，展示待调试脚本文件中包含的代码并在所述代码中设置断点。

在一些实施例中，当上述调试入口页面加载完成后，调试人员在上述调试入口页面上点击右键，选择“检查”选项，浏览器调试工具打开调试界面。这样，调试人员可以在该调试界面上选择上述待调试脚本文件，以在调试界面上展示上述待调试脚本文件中的代码，以便调试人员在待调试脚本文件的代码中设置调试断点。

图6A为本申请一些实施例提供的调试界面示意图。如图6A所示，调试界面包括用于显示调试入口页面的面板601、源文件选项卡所在的面板602、用于显示待调试脚本的面板603以及控制台面板604。当上述调试入口页面加载完成后，调试人员在上述调试入口页面上点击右键，选择“检查”选项，浏览器中的调试工具打开图6A所示的调试界面。这样，调试人员可以在图6A所示的调试界面的源文件选项卡所在的面板602上选择上述待调试脚本文件605，以在用于显示待调试脚本的面板603展示上述待调试脚本文件605中的待调试脚本，这样上述调试人员在待调试脚本中设置调试断点。

步骤S308：第二终端向第一终端发送重新加载指令。

在一些实施例中，当调试人员点击如图4所示重新加载控件403时，第二终端通过通信接口组件比如WebSocket通信接口组件发送至上述第一终端的通信服务组件的通信接口组件比如WebSocket通信接口组件上，再经过协议中转组件的转发，发送至上述调试入口页面的通信接口组件比如WebSocket通信接口组件，并由上述调试入口页面的通信接口组件比如WebSocket通信接口组件转发给上述调试入口页面的上述容器。

如图5所示，当上述调试人员点击图4中所示的重新加载控件403时，第二终端将上述重新加载指令通过通信接口组件1463比如WebSocket通信接口组件发送至上述第一终端的通信服务组件130的通信接口组件1301比如WebSocket通信接口组件上，再经过协议中转组件1302的转发，发送至上述调试入口页面1203的通信接口组件1301比如WebSocket通信接口组件，并由上述调试入口页面1203的通信接口组件1301转发给上述调试入口页面1203的上述容器1204。

步骤S309：响应于上述重新加载指令，第一终端运行所述容器中的初始化脚本文件以加载所述待调试脚本文件，所述初始化脚本文件中包含所述待调试脚本文件对应的所述指定路径。

在一些实施例中，上述第一终端接收到上述第二终端发送的重新加载指令后，在所述容器中运行所述初始化脚本文件，并根据所述初始化脚本文件中记录的所述待调试脚本文件的指定路径，加载所述待调试脚本文件。

具体的，上述第一终端的上述容器在接收到上述调试入口页面的通信接口组件比如WebSocket通信接口组件转发的重新加载指令后，通过网页标准对应的接口函数加载所述待调试脚本文件。例如，上述第一终端的Webworker容器通过网页标准的importScript接口将所述待调试脚本文件加载进来。

仍以图5为例，第一终端的容器1204在接收到上述调试入口页面的通信接口组件1206比如WebSocket通信接口组件转发的重新加载指令后，在容器1204中运行所述初始化脚本文件1208通过网页标准对应的接口函数加载所述待调试脚本文件1210。

在加载所述待调试脚本文件1210之后，调试界面可以如图6B所示。此时，调试界面上最左侧的显示调试入口页面的面板601变为显示待调试脚本文件对应的页面606。步骤S310：当上述第二终端接收到上述调试人员触发的调用指令后，将该调用指令封装为调试消息并通过上述通信通道发送至上述第一终端。

在一些实施例中，响应于调试人员在上述第二终端的界面控件的点击，触发上述第二终端的业务逻辑模块生成对上述待调试脚本文件中的接口函数的调用指令，并将该调用指令发给上述第一终端。

具体的，响应于调试人员在上述第二终端的界面控件的点击，上述第二终端的业务逻辑模块生成上述调用指令，将该调用指令转发给上述第二终端的引擎逻辑层中的引擎调试代理，由引擎调试代理将该调用指令封装为一个调试消息，并通过第二终端的通信接口组件比如WebSocket组件发送至上述第一终端的通信服务组件，其中所述调试消息中包括类型标识、被调用的函数名称及其参数。例如，上述调试消息的格式可以为{协议类型:”callFunction”,参数:{函数名称:AAA,函数参数:[参数1,参数2,…,参数N]}}。

仍以图5为例，响应于调试人员在上述第二终端的界面控件的点击，上述第二终端12的应用程序的第一程序组件1202生成上述调用指令，将该调用指令转发给上述第二终端12的引擎逻辑层123中的引擎调试代理146，由引擎调试代理146将该调用指令封装为一个调试消息，经过调试协议处理模块1462的转发，由第二终端的通信接口组件1463比如webSocket组件发送至上述第一终端11的通信服务组件1301，其中所述调试消息中包括类型标识、被调用的函数名称及其参数。例如，上述调试消息的格式可以为{协议类型:”callFunction”,参数:{函数名称:AAA,函数参数:[参数1,参数2,…,参数N]}}。

在一些实施例中，所述类型标识可以指示所述调试消息为函数调用或者为重新加载所述待调试的脚本文件。

步骤S311：第一终端的浏览器调试工具解析所述调试消息，当所述调试消息为函数调用时，根据解析结果执行对应的被调用的函数。

在一些实施例中，第一终端的通信服务组件将所述调试消息发送至浏览器调试工具中调试入口页面对应的通信接口组件，该通信接口组件将所述调试消息发送至浏览器调试工具中的调度组件以使其进行解析得到所述调试消息的类型标识。如果所述类型标识指示所述调试消息为函数调用，则从所述调试消息中获取被调用的函数的名称以及被调用的函数的参数，并将解析结果传递至容器中消息处理模块，以执行解析得到所述被调用的函数。

仍以图5为例，第一终端11的通信服务组件130将所述调试消息发送至调试入口页面1203对应的通信接口组件1206，该通信接口组件1206将所述调试消息发送至调度组件1207以使其进行解析得到所述调试消息的类型标识。如果所述类型标识指示所述调试消息为函数调用，则从所述调试消息中获取被调用的函数的名称以及被调用的函数的参数，并将解析结果传递至消息处理模块1205，以执行解析得到所述被调用的函数。

如图5所示，当所述类型标识为预设字符比如callfunction时，确定所述调试消息为函数调用，将解析结果传递至容器1204中的消息处理模块1205，并执行所述待调试脚本文件5101210的所述被调用的接口函数。

步骤S312：第一终端将被调用的函数的执行结果通过通信通道反馈至第二终端。

该步骤中的执行结果的传递方法，同上述调试消息的传递方法为逆向过程。

通过步骤S301至步骤S312，所述待调试脚本文件的执行过程可以在第二终端变得可视化，同时，可以使用浏览器的调试工具对所述待调试脚本文件进行可视化的调试，解决了第二终端的非浏览器环境下脚本引擎不支持调试功能的问题。同时，当开发人员更新了上述应用程序的脚本并重新打包生成新的待调试脚本文件时，选择图4中所示的重新加载控件，第一终端调试工具会通过调度组件将之前的容器销毁，并重新创建一个新的容器来加载新的待调试脚本文件，以调试新的待调试脚本文件，无需重新开启浏览器以及重新加载上述调试入口页面，这样大大提高了调试效率。

在一些实施例中，当调试人员选择实时加载控件时，比如选择图4中的实时加载控件405，可以开启实时加载模式，这样只要开发人员通过上述第一终端中的开发工具修改上述应用程序的脚本时，第二终端会展示修改后的脚本的运行结果，以便进行用户界面的调试。具体包括以下步骤：

步骤S321：第一终端根据接收到的实时加载指令，当待调试脚本文件有更新时，向第二终端发送通知消息，该通知消息用于通知第二终端获取所述新的待调试脚本文件。

在一些实施例中，当上述开发人员通过开发工具修改应用程序的脚本，比如修改功能界面的JavaScript脚本后，将待调试脚本打包生成一个新的待调试脚本文件，将该新的待调试脚本文件保存至网页服务组件，并向上述第二终端发送通知消息以使第二终端从上述网页服务组件中下载上述新的待调试脚本文件，

步骤S322：第二终端响应于上述通知消息，从上述第一终端获取上述新的待调试脚本文件。

步骤S323：当上述第二终端接收到上述调试人员在业务逻辑模块触发的调用指令，引擎逻辑层将该调用指令发送给脚本引擎。

在一些实施例中，响应于调试人员在上述第二终端的界面控件的点击，上述第二终端的业务逻辑模块生成上述调用指令，将该调用指令转发给上述第二终端的引擎逻辑层中的引擎调试代理，由引擎调试代理中的控制模块将调用指令转发给脚本引擎，其中，所述调用指令中包括被调用的接口函数名称及其参数。

步骤S324：上述第二终端的脚本引擎根据调用指令，执行被调用的接口函数，并将执行结果返回给上述引擎调试代理，以使其转发给上述业务逻辑模块进行显示上述执行结果。

图7为本申请一些实施例中实时加载模式下的运行结构示意图。如图7所示，在实时加载模式下，不会启动浏览器调试工具。当上述开发人员通过开发工具113修改应用程序的脚本，比如修改功能界面的JavaScript脚本后，将待调试脚本打包生成一个新的待调试脚本文件710，并将该待调试脚本文件710保存至网页服务组件120以使第二终端从上述网页服务组件120中下载上述待调试脚本文件710。当上述调试人员在第一程序组件1202触发调用指令时，第一程序组件1202将该调用指令发送给引擎逻辑层123，引擎逻辑层123将该调用指令发送给脚本引擎124比如JavaScript引擎，脚本引擎124比如JavaScript引擎执行被调用的接口函数并将执行结果返回给应用程序的第一程序组件1202以使其展示执行结果。

这样，只要上述开发人员在上述第一终端的开发工具中修改了上述应用程序的脚本，上述第二终端就会立即展示出对应的运行结果，这样对于界面调试非常方便，提高了界面调试的效率。

在本申请的一些实施例中，除了远程调试模式和实时加载模式之外，本申请的一些实施例还提供了普通模式，在普通模式下，由应用程序所在的第二终端下载待调试脚本文件，当业务逻辑模块对上述待调试脚本文件的接口函数进行调用时，脚本引擎将执行上述待调试脚本文件中的被调用的接口函数，并将执行结果返回至业务逻辑模块以使其进行展示执行结果。

本申请的一些实施例提供的程序调试方法，所述待调试脚本文件的执行过程可以在第二终端变得可视化，可以使用浏览器的调试工具对所述待调试脚本文件进行可视化的调试，解决了第二终端的非浏览器环境下脚本引擎不支持调试功能的问题，同时三种运行模式也极大的提高了开发和性能调优的灵活性和效率。

在上述程序调试方法的基础上，本申请的一些实施例还提供了相应的程序调试装置。图8为本申请一些实施例提供的程序调试装置800的结构示意图，如图8所示，上述程序调试装置800可以位于第一终端，包括本地调试服务组件802和浏览器调试工具803。

其中，所述本地调试服务组件802用于保存待调试的第二程序组件；

所述浏览器调试工具803用于在调试入口页面中加载保存在所述本地调试服务组件中的所述待调试的第二程序组件；接收并解析第二终端发送的调试消息，所述调试消息中包含运行在所述第二终端中的第一程序组件对所述待调试的第二程序组件中的接口函数的调用指令；执行所述第二程序组件中的接口函数，并在执行所述接口函数的过程中，通过所述第一终端的所述浏览器调试工具，对所述第二程序组件进行调试。

在一些实施例中，所述程序调试装置800进一步包括开发工具801，用于生成所述待调试的第二程序组件，并将所述待调试的第二程序组件保存在所述本地调试服务组件802中的指定路径下；

所述本地调试服务组件802中进一步保存初始化脚本文件；

所述浏览器调试工具803，进一步在所述调试入口页面中加载所述本地调试服务组件802保存的所述初始化脚本文件；运行所述初始化脚本文件，以根据所述指定路径，在所述调试入口页面中加载所述待调试的第二程序组件。

在一些实施例中，所述本地调试服务组件802进一步包括：网页服务组件8021和通信服务组件8022。

其中，所述网页服务组件8021用于保存所述待调试的第二程序、所述初始化脚本文件和所述调试入口页面；

所述通信服务组件8022用于接收所述第二终端发送的所述调试消息，将所述调试消息转发给所述浏览器调试工具803。

所述程序调试装置的各个组件和模块的功能是实现方式可以参见本申请上述的各个实施例，在此不再赘述。

图9示出了用于实现本申请实施例提供的程序调试装置所在的计算设备的组成结构图。如图9所示，该计算设备包括一个或者多个处理器(CPU)902、通信模块904、存储器906、用户接口910，以及用于互联这些组件的通信总线908。

处理器902可通过通信模块904接收和发送数据以实现网络通信和/或本地通信。

用户接口910包括一个或多个输出设备912，其包括一个或多个扬声器和/或一个或多个可视化显示器。用户接口910也包括一个或多个输入设备914，其包括诸如，键盘，鼠标，声音命令输入单元或扩音器，触屏显示器，触敏输入板，姿势捕获摄像机或其他输入按钮或控件等。

存储器906可以是高速随机存取存储器，诸如DRAM、SRAM、DDR RAM、或其他随机存取固态存储设备；或者非易失性存储器，诸如一个或多个磁盘存储设备、光盘存储设备、闪存设备，或其他非易失性固态存储设备。

存储器906存储处理器902可执行的指令集，包括：

操作系统916，包括用于处理各种基本系统服务和用于执行硬件相关任务的程序；

应用918，包括用于实现上述程序调试方法各种应用程序，这种应用程序能够实现上述各实施例中的处理流程，比如可以包括图8所示的装置800中的部分或全部单元。各单元或模块801-803中的至少一个模块可以存储有机器可执行指令。处理器902通过执行存储器906中各模块801-803中至少一个模块中的机器可执行指令，进而能够实现上述各模块801-803中的至少一个模块的功能。

需要说明的是，上述各流程和各结构图中不是所有的步骤和模块都是必须的，可以根据实际的需要忽略某些步骤或模块。各步骤的执行顺序不是固定的，可以根据需要进行调整。各模块的划分仅仅是为了便于描述采用的功能上的划分，实际实现时，一个模块可以分由多个模块实现，多个模块的功能也可以由同一个模块实现，这些模块可以位于同一个设备中，也可以位于不同的设备中。

各实施例中的硬件模块可以以硬件方式或硬件平台加软件的方式实现。上述软件包括机器可读指令，存储在非易失性存储介质中。因此，各实施例也可以体现为软件产品。

因此，本申请的一些实施例还提供了一种计算机可读存储介质，其上存储有计算机指令，其中，所述计算机指令被处理器执行时实现上述图2-8中所述方法的步骤。

各例中，硬件可以由专门的硬件或执行机器可读指令的硬件实现。例如，硬件可以为专门设计的永久性电路或逻辑器件(如专用处理器，如FPGA或ASIC)用于完成特定的操作。硬件也可以包括由软件临时配置的可编程逻辑器件或电路(如包括通用处理器或其它可编程处理器)用于执行特定操作。

另外，本申请的每个实施例可以通过由数据处理设备如计算机执行的数据处理程序来实现。显然，数据处理程序构成了本申请。此外，通常存储在一个存储介质中的数据处理程序通过直接将程序读取出存储介质或者通过将程序安装或复制到数据处理设备的存储设备(如硬盘和或内存)中执行。因此，这样的存储介质也构成了本申请，本申请还提供了一种非易失性存储介质，其中存储有数据处理程序，这种数据处理程序可用于执行本申请上述方法实施例中的任何一种实施例。

图8中的模块对应的机器可读指令可以使计算机上操作的操作系统等来完成这里描述的部分或者全部操作。非易失性计算机可读存储介质可以是插入计算机内的扩展板中所设置的存储器中或者写到与计算机相连接的扩展单元中设置的存储器。安装在扩展板或者扩展单元上的CPU等可以根据指令执行部分和全部实际操作。

另外，在本申请各个实施例中的装置及各模块可以集成在一个处理单元中，也可以是各个模块单独物理存在，也可以两个或两个以上装置或模块集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

以上所述仅为本申请的较佳实施例而已，并不用以限制本申请，凡在本申请的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本申请保护的范围之内。

Claims (10)

1.一种程序调试方法，其特征在于，所述程序包含第一程序组件和待调试的第二程序组件；所述方法包括：

在第一终端的浏览器调试工具提供的调试入口页面中，加载所述待调试的第二程序组件；

接收并解析第二终端发送的调试消息，所述调试消息中包含运行在所述第二终端中的所述第一程序组件对所述待调试的第二程序组件中的接口函数的调用指令；

执行所述第二程序组件中的接口函数，并在执行所述接口函数的过程中，通过所述第一终端的所述浏览器调试工具，对所述第二程序组件进行调试。

2.根据权利要求1所述的方法，其特征在于，所述待调试的第二程序组件保存在所述第一终端的指定路径下；

所述在所述第一终端的浏览器调试工具提供的调试入口页面中加载所述待调试的第二程序组件包括：

在所述第一终端的浏览器调试工具提供的所述调试入口页面中加载初始化脚本文件；

运行所述初始化脚本文件，以根据所述指定路径，在所述第一终端的浏览器调试工具提供的调试入口页面中加载所述待调试的第二程序组件。

3.根据权利要求2所述的方法，其特征在于，所述在第一终端的浏览器调试工具提供的所述调试入口页面中加载初始化脚本文件之前，所述方法进一步包括：

响应于第二终端的远程调试指令，在所述第一终端的浏览器调试工具中加载所述调试入口页面并在所述调试入口页面中创建一个容器；其中，所述远程调试指令进一步用于指示所述第二终端：将所述第一程序组件对所述待调试的第二程序组件中的接口函数的调用指令转发给所述第一终端；

所述在第一终端的浏览器调试工具提供的所述调试入口页面中加载初始化脚本文件包括：在所述调试入口页面的所述容器中加载所述初始化脚本文件。

4.根据权利要求3所述的方法，其特征在于，在加载所述调试入口页面之后，所述方法进一步包括：

展示所述浏览器调试工具的调试界面；

在所述调试界面上展示所述待调试的第二程序组件包含的代码；

在所述第二程序组件包含的代码中设置断点。

5.根据权利要求1所述的方法，其特征在于，所述解析第二终端发送的调试消息包括：

从所述调试消息中获取所述调试消息的类型标识；

如果所述类型标识指示所述调试消息为函数调用，则从所述调试消息中获取被调用的接口函数的名称以及被调用的接口函数的参数；

将所述获取的被调用的接口函数的名称以及被调用的接口函数的参数提供给所述浏览器调试工具；

所述执行所述第二程序组件中的接口函数包括：

所述浏览器调试工具执行所述待调试的第二程序组件中的所述被调用的接口函数。

6.根据权利要求5所述的方法，其特征在于，进一步包括：

如果所述类型标识指示所述调试消息为重新加载所述第二程序组件，则通过所述浏览器调试工具重新加载所述第二程序组件。

7.根据权利要求1所述的方法，其特征在于，进一步包括：

接收所述第二终端的实时加载指令；

当所述第二程序组件有更新时，将所述更新的第二程序组件提供给所述第二终端；其中，所述第二终端执行所述更新的第二程序组件，并展示执行结果，以实现对用户界面的调试。

8.一种程序调试装置，其特征在于，所述程序包含第一程序组件和第二程序组件；所述装置位于第一终端，包括：本地调试服务组件和浏览器调试工具；

所述本地调试服务组件，用于保存待调试的第二程序组件；

所述浏览器调试工具，用于在调试入口页面中加载保存在所述本地调试服务组件中的所述待调试的第二程序组件；接收并解析第二终端发送的调试消息，所述调试消息中包含运行在所述第二终端中的第一程序组件对所述待调试的第二程序组件中的接口函数的调用指令；执行所述第二程序组件中的接口函数，并在执行所述接口函数的过程中，通过所述第一终端的所述浏览器调试工具，对所述第二程序组件进行调试。

9.根据权利要求8所述的装置，其特征在于，进一步包括：

开发工具，用于生成所述待调试的第二程序组件，并将所述待调试的第二程序组件保存在所述本地调试服务组件中的指定路径下；

所述本地调试服务组件中进一步保存初始化脚本文件；

所述浏览器调试工具，进一步在所述调试入口页面中加载所述本地调试服务组件保存的所述初始化脚本文件；运行所述初始化脚本文件，以根据所述指定路径，在所述调试入口页面中加载所述待调试的第二程序组件。

10.一种非易失性机器可读存储介质，其特征在于，存储有机器可读指令，可以使至少一个处理器执行如权利要求1-7任一项所述的方法。