CN107688529B - 组件调试方法和装置 - Google Patents

Abstract

本发明公开了一种组件调试方法，应用于浏览器中，所述浏览器安装有调试插件，所述组件调试方法包括：在接收到组件调试指令时，确定所述调试指令对应的待调试组件；通过安装的所述调试插件，调用所述浏览器的应用程序接口API；基于调用的所述API，在所述浏览器的预设页面对所述待调试组件执行调试操作。本发明还公开了一种组件调试装置。本发明在浏览器中基于安装的调试插件调用API，即可在所述浏览器的预设页面中实现组件的调试，对组件的调试更加方便，并且调试过程可在所述预设页面中显示，以便于直观了解调试的情况，对组件的调试更加准确和智能。

Description

组件调试方法和装置

技术领域

本发明涉及计算机技术领域，尤其涉及一种组件调试方法和装置。

背景技术

传统的组件调试，一般是在安装IOS操作系统或Android操作系统的移动终端中实现调试，该调试过程需要连接移动终端，若是没有连接移动终端，则无法进行调试，组件调试的局限性较大；并且，在移动终端中进行组件的调试时，无法呈现可视化操作过程，用户无法直观了解调试的情况，导致组件的调试不够准确和智能。

发明内容

本发明的主要目的在于提供一种组件调试方法和装置，旨在解决现有的组件调试方式，组件调试的局限性较大，并且组件的调试不够准确和智能的技术问题。

为实现上述目的，本发明提供一种组件调试方法，应用于浏览器中，所述浏览器安装有调试插件，所述组件调试方法包括：

在接收到组件调试指令时，确定所述调试指令对应的待调试组件；

通过安装的所述调试插件，调用所述浏览器的应用程序接口API；

基于调用的所述API，在所述浏览器的预设页面对所述待调试组件执行调试操作。

优选地，所述在接收到组件调试指令时，确定所述调试指令对应的待调试组件的步骤包括：

在接收到组件调试指令时，判断预设的调试器中是否勾选有组件；

若所述调试器中勾选有组件，则将勾选的组件作为所述调试指令对应的待调试组件。

优选地，所述在接收到组件调试指令时，判断预设的调试器中是否勾选有组件的步骤之后，所述组件调试方法还包括：

若所述调试器中未勾选组件，则在所述调试插件的调试界面中显示组件选择窗口；

将外界基于所述组件选择窗口选择的组件，作为所述调试指令对应的待调试组件。

优选地，所述组件调试方法还包括：

在接收到组件的调试数据更新指令时，显示所述调试插件的调试界面，以供外界在所述调试界面中更新组件的调试数据；

获取基于所述调试界面更新的调试数据；

将更新的调试数据传输至所述浏览器的所述预设页面，以在所述预设页面中基于更新的调试数据，执行调试操作。

优选地，所述在接收到组件调试指令时，确定所述调试指令对应的待调试组件的步骤之前，所述组件调试方法还包括：

对所述浏览器的所述预设页面设置通信机制；

将所述浏览器的调试插件设置为通信对象。

此外，为实现上述目的，本发明还提供一种组件调试装置，应用于浏览器中，所述浏览器安装有调试插件，所述组件调试装置包括：

确定模块，用于在接收到组件调试指令时，确定所述调试指令对应的待调试组件；

调用模块，用于通过安装的所述调试插件，调用所述浏览器的应用程序接口API；

调试模块，用于基于调用的所述API，在所述浏览器的预设页面对所述待调试组件执行调试操作。

优选地，所述确定模块包括：

判断单元，用于在接收到组件调试指令时，判断预设的调试器中是否勾选有组件；

确定单元，用于若所述调试器中勾选有组件，则将勾选的组件作为所述调试指令对应的待调试组件。

优选地，所述确定模块还包括：

显示单元，用于若所述调试器中未勾选组件，则在所述调试插件的调试界面中显示组件选择窗口；

所述确定单元，还用于将外界基于所述组件选择窗口选择的组件，作为所述调试指令对应的待调试组件。

优选地，所述组件调试装置还包括：

显示模块，用于在接收到组件的调试数据更新指令时，显示所述调试插件的调试界面，以供外界在所述调试界面中更新组件的调试数据；

获取模块，用于获取基于所述调试界面更新的调试数据；

传输模块，用于将更新的调试数据传输至所述浏览器的所述预设页面，以在所述预设页面中基于更新的调试数据，执行调试操作。

优选地，所述组件调试装置还包括：

设置模块，用于对所述浏览器的所述预设页面设置通信机制；

所述设置模块，还用于将所述浏览器的调试插件设置为通信对象。

本发明提出的组件调试方法和装置，应用于浏览器中，在接收到组件调试指令时，先确定所述调试指令对应的待调试组件，然后通过安装的所述调试插件，调用所述浏览器的API，最终基于调用的所述API，在所述浏览器的预设页面对所述待调试组件执行调试操作。实现了在浏览器中基于安装的调试插件调用API，即可在所述浏览器的预设页面中实现组件的调试，即使不连接移动终端，也可进行组件的调试，对组件的调试更加方便，并且调试过程可在所述预设页面中显示，便于直观了解调试的情况，对组件的调试更加准确和智能。

附图说明

图1为本发明组件调试方法第一实施例的流程示意图；

图2为图1中步骤S10的第一细化流程示意图；

图3为图1中步骤S10的第二细化流程示意图；

图4为本发明组件调试方法第二实施例的流程示意图；

图5为本发明组件调试方法第三实施例的流程示意图

图6为本发明组件调试装置第一实施例的功能模块示意图；

图7为图6中确定模块10的第一细化功能模块示意图；

图8为图6中确定模块10的第二细化功能模块示意图；

图9为本发明组件调试装置第二实施例的功能模块示意图；

图10为本发明组件调试装置第三实施例的功能模块示意图。

本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。

具体实施方式

应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

本发明实施例的解决方案主要是：在接收到组件调试指令时，确定所述调试指令对应的待调试组件；通过安装的所述调试插件，调用所述浏览器的应用程序接口API(Application Programming Interface，应用程序编程接口)；基于调用的所述API，在所述浏览器的预设页面对所述待调试组件执行调试操作。以解决了现有的组件调试，对组件调试的局限性较大，且组件调试不够准确智能的问题。

应当注意的是，现有技术的组件调试，不仅要连接移动终端才能实现组件的调试，以及调试过程不可视；而且，在调试过程中，若是要修改调试数据，还需要对原始安装包的原始代码进行修改，以重新生成安装包，再对安装包进行编译和加载，花费的时间较长，导致组件的调试效率较低。

正是由于现有技术中，通过移动终端进行组件调试的方式，存在许多缺陷，因此，考虑将组件调试转移到浏览器中进行调试。

但是，现有的组件在浏览器中进行调试时，由于组件脱离Native环境(即Android和IOS操作系统环境)，在安全性和能力有限的情况下，只能在浏览器中输入脚本程序代码，执行简单的功能。但对于一些高级点的功能，如http(Hyper Text Transfer Protocol，超文本传输协议)跨域请求、修改当前非域名的cookies(一种让网站服务器把少量数据储存到客户端的硬盘或内存，或是从客户端的硬盘读取数据的一种技术，在计算机上以小文本文件存储信息)、跨域设置，或者是实现浏览器的弹窗功能等等，由于组件内部没有调试代码，无法调用到浏览器的API，导致无法实现，即如果使用的是模拟native环境的纯JS(JavaScript，直译式脚本语言)脚本，由于安全性问题和能力有限导致无法模拟。

基于现有技术存在的缺陷，本发明提供一种组件调试方法。

参照图1，图1为本发明组件调试方法第一实施例的流程示意图。

在本实施例中，所述组件调试方法应用于浏览器中，所述浏览器安装有调试插件，所述组件调试方法包括：

在接收到组件调试指令时，确定所述调试指令对应的待调试组件；通过安装的所述调试插件，调用所述浏览器的应用程序接口API；基于调用的所述API，在所述浏览器的预设页面对所述待调试组件执行调试操作。

在本实施例中，先在浏览器中安装调试插件，所述浏览器的类型不做限定，可以是使用传统IE内核的浏览器，如IE浏览器、TT浏览器，也可以是使用双核CPU的浏览器，如QQ高速浏览器、搜狗高速浏览器，还可以是使用Chromium(谷歌浏览器背后的引擎)内核的谷歌浏览器等等。由于谷歌浏览器对javascript，Html5等的支持都比较好，渲染页面速度快，因此，本实施例中，所述浏览器可优选为谷歌浏览器。在浏览器中安装调试插件，实际上就是在浏览器中添加一个调试插件程序，所述调试插件程序根据实际情况进行编写设置，此处不做限定，以便后续基于所述调试插件程序，调用所述浏览器的API。

在本实施例中，所述组件包括但不限于Hybird组件，Activity组件，Service组件，为更好理解本实施，下文需要进行举例的地方，优选以Hybird组件为例进行解释。值得注意的是，本实施例中的调试插件只有一个，但是组件包含多个。

以下是本实施例中逐步实现组件调试的具体步骤：

步骤S10，在接收到组件调试指令时，确定所述调试指令对应的待调试组件；

在本实施例中，所述组件调试指令的接收方式包括：先显示所述浏览器的预设页面，然后在所述预设页面中显示组件调试控件，接收到基于所述组件调试控件的点击操作或触摸操作时，确认接收到组件调试指令。本实施例中，所述预设页面优选为H5(即HTML5，Hyper Text Markup Language 5，第5代超级文本标记语言)页面，下文需要对预设页面进行举例的地方，均以H5页面为例进行解释。

在接收组件调试指令时，进一步确定所述调试指令对应的待调试组件，具体地，所述步骤S10的实施方式包括：

1)方式一、参照图2，所述步骤S10包括：

步骤S11，在接收到组件调试指令时，判断预设的调试器中是否勾选有组件；

步骤S12，若所述调试器中勾选有组件，则将勾选的组件作为所述调试指令对应的待调试组件。

在本实施方式中，在接收到组件调试指令时，先判断是否在所述浏览器关联的调试器中勾选有组件。可以理解，用户可以事先在所述调试器中勾选组件，具体地：调试器中显示各个组件选项，当用户基于所述调试器显示的各个组件选项选择相应的组件时，即可将选择的组件作为待续的待调试组件。若事先在所述调试器中勾选有组件，则可直接将勾选的组件作为所述调试指令对应的待调试组件。

在本实施方式中，若用户事先在调试器中勾选组件，相当于是针对勾选的所述组件进行调试，后续即可在接收到调试指令时，基于之前勾选的组件执行调试操作。具体在何时进行组件的勾选，可根据实际需要进行设置。

2)方式二、参照图3，所述步骤S12之后，所述步骤S10还包括：

步骤S13，若所述调试器中未勾选组件，则在所述调试插件的调试界面中显示组件选择窗口；

步骤S14，将外界基于所述组件选择窗口选择的组件，作为所述调试指令对应的待调试组件。

当然，若事先未在所述调试器中勾选组件，则可直接在调试插件的调试界面中显示组件选择窗口，以供用户基于所述组件选择窗口选择相应的组件，并将选择的组件作为待调试组件。

在本实施方式中，若事先未在调试器中勾选组件，则可在调试时，先在浏览器的调试插件所在调试界面中显示组件选择窗口，以供用户进行选择，并将选择的组件作为待调试组件，即使之前未勾选，也可在当前的情况下选择，提高了待调试组件选择的灵活性。

步骤S20，通过安装的所述调试插件，调用所述浏览器的应用程序接口API；

步骤S30，基于调用的所述API，在所述浏览器的预设页面对所述待调试组件执行调试操作。

在本实施例中，在确定待调试组件之后，即可通过安装的所述调试插件，调用所述浏览器的应用程序接口API，然后基于调用的所述API，在所述浏览器的预设页面中对所述待调试组件执行调试操作。其中，所述调试操作包括但不限于：http跨域请求、修改当前非域名的cookies、跨域设置，或者是浏览器的弹窗功能等等。

由于上述确定待调试组件的方式包括两种，一种是在调试器中勾选组件，另一种是在调试插件的调试界面中选择组件，因此，所述在所述浏览器的预设页面对所述待调试组件执行调试操作也同样包括两种：

一是从所述调试器中，捕捉勾选的组件所对应的功能，若事先在勾选的组件中选择相应的功能，则可直接在所述浏览器的预设页面对所述待调试组件执行已选择的功能所对应的调试操作，例如，事先选择的功能是http跨域请求，则在所述浏览器的预设页面对所述待调试组件执行http跨域请求的操作。

二是从所述调试插件的调试界面中，捕捉选择的组件所对应的功能，若事先在选择的组件中选择相应的功能，则可直接在所述浏览器的预设页面对所述待调试组件执行已选择的功能所对应的调试操作，例如，事先选择的功能是http跨域请求，则在所述浏览器的预设页面对所述待调试组件执行http跨域请求的操作。

应当理解，在勾选组件之后，后续才可对勾选的组件中的数据进行更改，最终反馈至H5页面进行调试的数据也有所不同，若是不勾选组件，后续就不对组件中的数据进行更改，就直接将组件的原始数据反馈至H5页面中进行调试。

在本实施例中，相应于是通过安装的调试插件，模拟Native环境，让Hybird组件成功在浏览器的H5页面上执行调试操作，以实现各种调试功能，利于开发调试，并且，通过调试插件进行可视化调试，使得组件调试更加准确，即使缺少移动终端时，也可以直接在浏览器上运行Hybird项目并开发调试。

本实施例提出的组件调试方法，应用于浏览器中，在接收到组件调试指令时，先确定所述调试指令对应的待调试组件，然后通过安装的所述调试插件，调用所述浏览器的API，最终基于调用的所述API，在所述浏览器的预设页面对所述待调试组件执行调试操作。实现了在浏览器中基于安装的调试插件调用API，即可在所述浏览器的预设页面中实现组件的调试，即使不连接移动终端，也可进行组件的调试，对组件的调试更加方便，并且调试过程可在所述预设页面中显示，便于直观了解调试的情况，对组件的调试更加准确和智能。

进一步地，为了提高组件调试的灵活性，基于第一实施例提出本发明组件调试方法的第二实施例，在本实施例中，参照图4，所述组件调试方法还包括：

步骤S40，在接收到组件的调试数据更新指令时，显示所述调试插件的调试界面，以供外界在所述调试界面中更新组件的调试数据；

步骤S50，获取基于所述调试界面更新的调试数据；

步骤S60，将更新的调试数据传输至所述浏览器的所述预设页面，以在所述预设页面中基于更新的调试数据，执行调试操作。

应当注意的是，本实施例中步骤S40至步骤S60可以是在步骤S30之后执行的操作，即执行调试操作之后，对组件的调试数据进行更新并重新调试；当然，也可以是在步骤S30的过程中所执行的操作，即在执行调试操作过程中，对组件的调试数据进行更新以实现调试操作，具体的方式根据实际情况而定，此处不做限定。

在本实施例中，若接收到组件的调试数据更新指令，先在所述浏览器中显示所述调试插件的调试界面。

本实施例中，所述调试插件的调试界面与所述浏览器的预设页面如H5页面是两个相互独立的页面，所述H5页面即浏览器的前端页面，所述调试插件的调试页面是显示在所述H5页面上层的页面，不会被所述H5页面所覆盖。并且，所述调试界面与上述的组件选择窗口也是不同的界面，组件选择窗口相当于是调试界面的一个子窗口。

应当理解，现有的组件调试过程中，由于调试数据在代码文件中写死了，相应于一个调试数据都是生成安装包，每次要更改调试数据，都需要对安装包中的原始代码进行修改，对代码修改之后，会生成新的安装包，再对新的安装包进行编译、加载运行，以重新进行调试，导致组件的调试过程所花费的时长，调试效率较低。

应当理解，第一实施例是采用系统已有的数据进行调试，因此无须显示界面。而在本实施例中，需要更新数据时，显示所述调试插件对应的调试界面，以便用户在所述调试界面中更新组件的调试数据，其中，所述调试数据指的是对组件进行调试过程所涉及到的数据，在检测到用户基于所述调试界面中输入更新的调试数据之后，获取用户基于所述调试界面更新的调试数据，并将更新的调试数据传输至所述浏览器的所述预设页面，以在所述预设页面中基于更新的调试数据，执行调试操作。本发明与现有技术一个较大的不同，就是在更新数据时，可以直接在调试界面中让用户输入数据进行更新，不用对安装包中的原始数据进行更新，使得数据的更新方式更加便捷。

本实施相当于是直接跳过Android和IOS操作系统编译生成安装包的步骤，直接看到页面效果，在调试插件的调试页面中动态修改数据，不改动原始代码，提高了调试的工作效率。

进一步地，为了提高组件调试的灵活性，基于第一或第二实施例提出本发明组件调试方法的第三实施例，在本实施例中，参照图5，所述步骤S10之前，所述组件调试方法还包括：

步骤S70，对所述浏览器的所述预设页面设置通信机制；

步骤S80，将所述浏览器的调试插件设置为通信对象。

在本实施例中，要实现在浏览器中进行组件的调试，则在进行组件的调试之前，先对所述浏览器的所述预设页面设置通信机制，具体包括：将所述浏览器的所述预设页面与调试插件进行绑定；当然，若是要根据移动终端的Android和IOS操作系统进行组件的调试，则需要将所述浏览器的所述预设页面与移动终端的操作系统进行绑定。

由于本实施例主要是针对浏览器，因此，在设置好通信机制之后，将所述浏览器的调试插件设置为通信对象。当然，若待通信对象是移动终端的操作系统，则建立所述预设页面与所述操作系统的Native接口的通信连接关系，即将移动终端的操作系统设置为通信对象。

在本实施例中，在进行组件的调试之前，先对所述浏览器的所述预设页面设置通信机制，后续即可基于设置好的通信机制，进行组件的调试，使得组件的调试非常便捷。

本发明进一步提供一种组件调试装置。

参照图6，图6为本发明组件调试装置100第一实施例的功能模块示意图。

需要强调的是，对本领域的技术人员来说，图6所示功能模块图仅仅是一个较佳实施例的示例图，本领域的技术人员围绕图6所示的组件调试装置100的功能模块，可轻易进行新的功能模块的补充；各功能模块的名称是自定义名称，仅用于辅助理解该组件调试装置100的各个程序功能块，不用于限定本发明的技术方案，本发明技术方案的核心是，各自定义名称的功能模块所要达成的功能。

在本实施例中，所述组件调试装置应用于浏览器中，所述浏览器安装有调试插件，所述组件调试装置包括：

确定模块10，用于在接收到组件调试指令时，确定所述调试指令对应的待调试组件；

调用模块20，用于通过安装的所述调试插件，调用所述浏览器的应用程序接口API；

调试模块30，用于基于调用的所述API，在所述浏览器的预设页面对所述待调试组件执行调试操作。

在本实施例中，先在浏览器中安装调试插件，所述浏览器的类型不做限定，可以是使用传统IE内核的浏览器，如IE浏览器、TT浏览器，也可以是使用双核CPU的浏览器，如QQ高速浏览器、搜狗高速浏览器，还可以是使用Chromium(谷歌浏览器背后的引擎)内核的谷歌浏览器等等。由于谷歌浏览器对javascript，Html5等的支持都比较好，渲染页面速度快，因此，本实施例中，所述浏览器可优选为谷歌浏览器。在浏览器中安装调试插件，实际上就是在浏览器中添加一个调试插件程序，所述调试插件程序根据实际情况进行编写设置，此处不做限定，以便后续基于所述调试插件程序，调用所述浏览器的API。

在本实施例中，所述组件包括但不限于Hybird组件，Activity组件，Service组件，为更好理解本实施，下文需要进行举例的地方，优选以Hybird组件为例进行解释。值得注意的是，本实施例中的调试插件只有一个，但是组件包含多个。

以下是本实施例中逐步实现组件调试的各个模块的具体描述：

其中，所述确定模块10，用于在接收到组件调试指令时，确定所述调试指令对应的待调试组件；

在本实施例中，所述组件调试指令的接收方式包括：先显示所述浏览器的预设页面，然后在所述预设页面中显示组件调试控件，接收到基于所述组件调试控件的点击操作或触摸操作时，所述确定模块10确认接收到组件调试指令。本实施例中，所述预设页面优选为H5(HTML5，Hyper Text Markup Language 5，即第5代超级文本标记语言)页面，下文需要对预设页面进行举例的地方，均以H5页面为例进行解释。

在接收组件调试指令时，所述确定模块10进一步确定所述调试指令对应的待调试组件，具体地，所述确定模块10的实施方式包括：

1)方式一、参照图7，所述确定模块10包括：

判断单元11，用于在接收到组件调试指令时，判断预设的调试器中是否勾选有组件；

确定单元12，用于若所述调试器中勾选有组件，则将勾选的组件作为所述调试指令对应的待调试组件。

在本实施方式中，在接收到组件调试指令时，判断单元11先判断是否在所述浏览器关联的调试器中勾选有组件。可以理解，用户可以事先在所述调试器中勾选组件，具体地：调试器中显示各个组件选项，当用户基于所述调试器显示的各个组件选项选择相应的组件时，即可将选择的组件作为待续的待调试组件。若事先在所述调试器中勾选有组件，则确定单元12可直接将勾选的组件作为所述调试指令对应的待调试组件。

在本实施方式中，若用户事先在调试器中勾选组件，相当于是针对勾选的所述组件进行调试，后续即可在接收到调试指令时，基于之前勾选的组件执行调试操作。具体在何时进行组件的勾选，可根据实际需要进行设置。

2)方式二、参照图8，所述确定模块10还包括：

显示单元13，用于若所述调试器中未勾选组件，则在所述调试插件的调试界面中显示组件选择窗口；

所述确定单元12，还用于将外界基于所述组件选择窗口选择的组件，作为所述调试指令对应的待调试组件。

当然，若事先未在所述调试器中勾选组件，则显示单元13可直接在调试插件的调试界面中显示组件选择窗口，以供用户基于所述组件选择窗口选择相应的组件，并且所述确定单元12将选择的组件作为待调试组件。

在本实施方式中，若事先未在调试器中勾选组件，则可在调试时，先在浏览器的调试插件所在调试界面中显示组件选择窗口，以供用户进行选择，并将选择的组件作为待调试组件，即使之前未勾选，也可在当前的情况下选择，提高了待调试组件选择的灵活性。

其中，所述调用模块20，用于通过安装的所述调试插件，调用所述浏览器的应用程序接口API；

所述调试模块30，用于基于调用的所述API，在所述浏览器的预设页面对所述待调试组件执行调试操作。

在本实施例中，在确定待调试组件之后，所述调用模块20即可通过安装的所述调试插件，调用所述浏览器的应用程序接口API，然后所述调试模块30基于调用的所述API，在所述浏览器的预设页面中对所述待调试组件执行调试操作。其中，所述调试操作包括但不限于：http跨域请求、修改当前非域名的cookies、跨域设置，或者是浏览器的弹窗功能等等。

由于上述确定待调试组件的方式包括两种，一种是在调试器中勾选组件，另一种是在调试插件的调试界面中选择组件，因此，所述调试模块30在所述浏览器的预设页面对所述待调试组件执行调试操作也同样包括两种：

一是从所述调试器中，捕捉勾选的组件所对应的功能，若事先在勾选的组件中选择相应的功能，则可直接在所述浏览器的预设页面对所述待调试组件执行已选择的功能所对应的调试操作，例如，事先选择的功能是http跨域请求，则在所述浏览器的预设页面对所述待调试组件执行http跨域请求的操作。当然，若事先未选择功能，则可按照预设顺序，依次执行待调试组件的各个功能。

二是从所述调试插件的调试界面中，捕捉选择的组件所对应的功能，若事先在选择的组件中选择相应的功能，则可直接在所述浏览器的预设页面对所述待调试组件执行已选择的功能所对应的调试操作，例如，事先选择的功能是http跨域请求，则在所述浏览器的预设页面对所述待调试组件执行http跨域请求的操作。同理，若事先未选择功能，可按照预设顺序，依次执行待调试组件的各个功能。

应当理解，在勾选组件之后，后续才可对勾选的组件中的数据进行更改，最终反馈至H5页面进行调试的数据也有所不同，若是不勾选组件，后续就不对组件中的数据进行更改，就直接将组件的原始数据反馈至H5页面中进行调试。

在本实施例中，相应于是通过安装的调试插件，模拟Native环境，让Hybird组件成功在浏览器的H5页面上执行调试操作，以实现各种调试功能，利于开发调试，并且，通过调试插件进行可视化调试，使得组件调试更加准确，即使缺少移动终端时，也可以直接在浏览器上运行Hybird项目并开发调试。

本实施例提出的组件调试装置100，应用于浏览器中，在接收到组件调试指令时，先确定所述调试指令对应的待调试组件，然后通过安装的所述调试插件，调用所述浏览器的API，最终基于调用的所述API，在所述浏览器的预设页面对所述待调试组件执行调试操作。实现了在浏览器中基于安装的调试插件调用API，即可在所述浏览器的预设页面中实现组件的调试，即使不连接移动终端，也可进行组件的调试，对组件的调试更加方便，并且调试过程可在所述预设页面中显示，便于直观了解调试的情况，对组件的调试更加准确和智能。

进一步地，为了提高组件调试的灵活性，基于第一实施例提出本发明组件调试装置的第二实施例，在本实施例中，参照图9，所述组件调试装置还包括：

显示模块40，用于在接收到组件的调试数据更新指令时，显示所述调试插件的调试界面，以供外界在所述调试界面中更新组件的调试数据；

获取模块50，用于获取基于所述调试界面更新的调试数据；

传输模块60，用于将更新的调试数据传输至所述浏览器的所述预设页面，以在所述预设页面中基于更新的调试数据，执行调试操作。

应当注意的是，本实施例中显示模块40至传输模块60所执行的操作可以是在调试模块30之后执行的操作，即执行调试操作之后，对组件的调试数据进行更新并重新调试；当然，也可以是在调试模块30执行调试操作的过程中所执行的操作，即在执行调试操作过程中，对组件的调试数据进行更新以实现调试操作，具体的方式根据实际情况而定，此处不做限定。

在本实施例中，若接收到组件的调试数据更新指令，显示模块40先在所述浏览器中显示所述调试插件的调试界面。

本实施例中，所述调试插件的调试界面与所述浏览器的预设页面如H5页面是两个相互独立的页面，所述H5页面即浏览器的前端页面，所述调试插件的调试页面是显示在所述H5页面上层的页面，不会被所述H5页面所覆盖。并且，所述调试界面与上述的组件选择窗口也是不同的界面，组件选择窗口相当于是调试界面的一个子窗口。

应当理解，现有的组件调试过程中，由于调试数据在代码文件中写死了，相应于一个调试数据都是生成安装包，每次要更改调试数据，都需要对安装包中的原始代码进行修改，对代码修改之后，会生成新的安装包，再对新的安装包进行编译、加载运行，以重新进行调试，导致组件的调试过程所花费的时长，调试效率较低。

应当理解，第一实施例是采用系统已有的数据进行调试，因此无须显示界面。而在本实施例中，需要更新数据时，显示模块40显示所述调试插件对应的调试界面之后，以便用户在所述调试界面中更新组件的调试数据，其中，所述调试数据指的是对组件进行调试过程所涉及到的数据，在检测到用户基于所述调试界面中输入更新的调试数据之后，传输模块60获取用户基于所述调试界面更新的调试数据，并将更新的调试数据传输至所述浏览器的所述预设页面，以在所述预设页面中基于更新的调试数据，执行调试操作。本发明与现有技术一个较大的不同，就是在更新数据时，可以直接在调试界面中让用户输入数据进行更新，不用对安装包中的原始数据进行更新，使得数据的更新方式更加便捷。

本实施相当于是直接跳过Android和IOS操作系统编译生成安装包的步骤，直接看到页面效果，在调试插件的调试页面中动态修改数据，不改动原始代码，提高了调试的工作效率。

进一步地，为了提高组件调试的灵活性，基于第一或第二实施例提出本发明组件调试装置的第三实施例，在本实施例中，参照图10，所述组件调试装置还包括：

设置模块70，用于对所述浏览器的所述预设页面设置通信机制；

所述设置模块70，还用于将所述浏览器的调试插件设置为通信对象。

在本实施例中，要实现在浏览器中进行组件的调试，则在进行组件的调试之前，先由设置模块70对所述浏览器的所述预设页面设置通信机制，具体包括：将所述浏览器的所述预设页面与调试插件进行绑定；当然，若是要根据移动终端的Android和IOS操作系统进行组件的调试，则需要将所述浏览器的所述预设页面与移动终端的操作系统进行绑定。

由于本实施例主要是针对浏览器，因此，在设置好通信机制之后，所述设置模块70将所述浏览器的调试插件设置为通信对象。当然，若待通信对象是移动终端的操作系统，则建立所述预设页面与所述操作系统的Native接口的通信连接关系，即将移动终端的操作系统设置为通信对象。

在本实施例中，在进行组件的调试之前，先对所述浏览器的所述预设页面设置通信机制，后续即可基于设置好的通信机制，进行组件的调试，使得组件的调试非常便捷。

需要说明的是，在本文中，术语“包括”、“包含”或者其任何其它变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其它要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本发明各个实施例所述的方法。

以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其它相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (8)

1.一种组件调试方法，其特征在于，应用于浏览器中，所述浏览器安装有调试插件，所述组件调试方法包括：

在接收到组件调试指令时，确定所述调试指令对应的待调试组件；

通过安装的所述调试插件，调用所述浏览器的应用程序接口API；

基于调用的所述API，在所述浏览器的预设页面对所述待调试组件执行调试操作；

其中，所述在接收到组件调试指令时，确定所述调试指令对应的待调试组件的步骤包括：

在接收到组件调试指令时，判断预设的调试器中是否勾选有组件；

若所述调试器中勾选有组件，则将勾选的组件作为所述调试指令对应的待调试组件。

2.如权利要求1所述的组件调试方法，其特征在于，所述在接收到组件调试指令时，判断预设的调试器中是否勾选有组件的步骤之后，所述组件调试方法还包括：

若所述调试器中未勾选组件，则在所述调试插件的调试界面中显示组件选择窗口；

将外界基于所述组件选择窗口选择的组件，作为所述调试指令对应的待调试组件。

3.如权利要求1所述的组件调试方法，其特征在于，所述组件调试方法还包括：

在接收到组件的调试数据更新指令时，显示所述调试插件的调试界面，以供外界在所述调试界面中更新组件的调试数据；

获取基于所述调试界面更新的调试数据；

将更新的调试数据传输至所述浏览器的所述预设页面，以在所述预设页面中基于更新的调试数据，执行调试操作。

4.如权利要求1-3任一项所述的组件调试方法，其特征在于，所述在接收到组件调试指令时，确定所述调试指令对应的待调试组件的步骤之前，所述组件调试方法还包括：

对所述浏览器的所述预设页面设置通信机制；

将所述浏览器的调试插件设置为通信对象。

5.一种组件调试装置，其特征在于，应用于浏览器中，所述浏览器安装有调试插件，所述组件调试装置包括：

确定模块，用于在接收到组件调试指令时，确定所述调试指令对应的待调试组件；

调用模块，用于通过安装的所述调试插件，调用所述浏览器的应用程序接口API；

调试模块，用于基于调用的所述API，在所述浏览器的预设页面对所述待调试组件执行调试操作；

其中，所述确定模块包括：

判断单元，用于在接收到组件调试指令时，判断预设的调试器中是否勾选有组件；

确定单元，用于若所述调试器中勾选有组件，则将勾选的组件作为所述调试指令对应的待调试组件。

6.如权利要求5所述的组件调试装置，其特征在于，所述确定模块还包括：

显示单元，用于若所述调试器中未勾选组件，则在所述调试插件的调试界面中显示组件选择窗口；

所述确定单元，还用于将外界基于所述组件选择窗口选择的组件，作为所述调试指令对应的待调试组件。

7.如权利要求5所述的组件调试装置，其特征在于，所述组件调试装置还包括：

显示模块，用于在接收到组件的调试数据更新指令时，显示所述调试插件的调试界面，以供外界在所述调试界面中更新组件的调试数据；

获取模块，用于获取基于所述调试界面更新的调试数据；

传输模块，用于将更新的调试数据传输至所述浏览器的所述预设页面，以在所述预设页面中基于更新的调试数据，执行调试操作。

8.如权利要求5-7任一项所述的组件调试装置，其特征在于，所述组件调试装置还包括：

设置模块，用于对所述浏览器的所述预设页面设置通信机制；

所述设置模块，还用于将所述浏览器的调试插件设置为通信对象。

Images