CN113641581B - 混合模式移动应用调试方法及系统 - Google Patents

Abstract

本申请实施例提供了一种混合模式移动应用调试系统，包括：Electron桌面客户端，用于创建WebSocket客户端及本地项目调试服务，并通过WebSocket客户端与节点服务器建立WebSocket长连接，通过本地项目调试服务对页面代码进行打包生成文件，并在文件中添加用于加载Service Worker的脚本的代码段，并将文件与Service Worker的脚本进行打包得到打包文件，及用于打包文件上传至节点服务器；节点服务器，用于将打包文件进行解压并部署至静态资源服务中，并将静态资源服务的网络地址返回给所述Electron桌面客户端；所述Hybrid应用，用于根据网络地址从静态资源服务中获取页面代码并加载所述页面代码，及在加载页面代码时，加载所述Service Worker脚本，以通过Service Worker拦截待调试页面的网络请求。本申请可以降低配置复杂度。

Description

混合模式移动应用调试方法及系统

技术领域

本申请实施例涉及计算机技术领域，尤其涉及一种混合模式移动应用调试方法及系统。

背景技术

源于计算机应用技术的更新和市场的需要，Hybrid应用应运而生。Hybrid应用是介于原生应用(Native App)和网络应用(Web App)之间的混合模式移动应用。在开发好Hybrid应用之后，为了发现开发过程中存在的问题，需要对Hybrid应用进行远程调试。然而，发明人发现，在Android真机上进行前后端联调时，对于未修改过App环境、DNS解析规则的App应用来说，其内部的Hybrid页面请求访问的是当前手机网络环境对应的服务端服务器地址，无法像PC上一样切换Hosts访问其他环境。现有技术中，为了解决上述问题，通过使用类似Charles等代理工具，并通过配置与PC在同一局域网环境下的Android真机的代理，将Android真机的所有网络请求都代理到本地PC，然后在本地PC修改Hosts，从而让Android真机上的所有请求都从本地经过DNS解析访问切换后的其他环境，然而，该方式的成本较高，配置复杂。

发明内容

本申请实施例的目的是提供一种混合模式移动应用调试系统，以解决采用Charles等代理工具的方式来对Hybrid应用进行前后端联调时，成本较高，配置复杂的问题。

本申请实施例的一个方面提供了一种混合模式移动应用调试系统，所述调试系统包括调试设备、服务端服务器、节点服务器及安装有待调试的混合模式移动应用的待调试设备，所述调试设备中安装有桌面客户端以及本地项目调试服务，其中：

所述本地项目调试服务，用于将将待调试的混合模式移动应用的页面代码进行打包生成页面代码文件目录；

所述本地项目调试服务，还用于在所述页面代码文件目录中的预设文件中添加用于加载Service Worker的脚本的代码段；

所述桌面客户端，用于将包含有所述Service Worker的脚本的页面代码文件目录进行打包生成页面代码文件包，并将所述页面代码文件包上传至所述节点服务器；

所述节点服务器，用于对所述页面代码文件包进行解压生成第一代码文件，并将生成的第一代码文件部署至所述静态资源服务中；

所述混合模式移动应用，用于从所述静态资源服务中获取并加载所述第一代码文件，以打开所述待调试页面；

所述混合模式移动应用，还用于根据所述第一代码文件中的所述代码段加载所述Service Worker的脚本，以及通过所述Service Worker的脚本拦截所述待调试页面的网络请求，并将拦截到的网络请求的请求地址修改为所述节点服务器的API接口服务地址；

所述节点服务器，用于在接收到所述网络请求后，将所述网络请求转发给所述桌面客户端；

所述桌面客户端，用于对所述网络请求进行域名解析，并根据解析后得到的地址将所述网络请求发给所述服务端服务器；

所述服务端服务器，用于对所述网络请求进行响应。

可选地，所述桌面客户端为Electron桌面客户端，其中：

所述Electron桌面客户端，用于创建本地项目打包服务及WebSocket客户端；

所述Electron桌面客户端，还用于通过所述WebSocket客户端与所述节点服务器建立WebSocket长连接，以及通过所述本地项目打包服务开启所述本地项目调试服务；

所述节点服务器，还用于通过所述WebSocket长连接将所述网络请求发送给所述WebSocket客户端。

可选地，所述页面代码文件目录包括html文件、css文件及js文件，所述本地项目调试服务，还用于在所述html文件中添加用于加载Service Worker的脚本的代码段。

可选地，所述服务端服务器，还用于将对所述网络请求进行响应的响应结果返回给所述Electron桌面客户端；

所述Electron桌面客户端，还用于对接收到的响应结果进行封装，并将封装后的第一响应结果通过所述WebSocket客户端发送给所述节点服务器；

所述节点服务器，还用于对接收到的所述第一响应结果进行解析，并将解析后得到的第二响应结果返回给所述Service Worker，以使所述Service Worker将所述第二响应结果作为所述待调试页面的网络请求的响应结果。

可选地，所述Electron桌面客户端，还用于向所述节点服务器请求获取会话凭证信息；

所述节点服务器，用于在接收到所述Electron桌面客户端发送的会话凭证信息获取请求时，生成会话凭证信息，并将所述会话凭证信息发送给所述Electron桌面客户端，以使所述WebSocket客户端根据所述会话凭证信息与所述节点服务器建立WebSocket长连接。

可选地，所述节点服务器，还用于在生成所述会话凭证信息后，在所述静态资源服务中创建以所述会话凭证信息为名的目录。

可选地，所述节点服务器，还用于将接收到的页面代码文件包进行解压并部署至所述目录下。

可选地，所述节点服务器，还用于在通过所述API接口服务地址接收到所述网络请求后，对所述网络请求进行解析，并将解析后得到的第一网络请求进行封装成包含请求序号、请求地址、请求方式、请求头及请求体的第二网络请求。

可选地，所述Electron桌面客户端，还用于对接收到的第一响应结果进行封装成包含响应序号、响应状态码、响应状态信息、响应头及响应体的第二响应结果。

本申请还提供一种混合模式移动应用调试方法，应用于包括调试设备、服务端服务器、节点服务器及安装有待调试的混合模式移动应用的待调试设备的混合模式移动应用调试系统中，所述调试设备中安装有桌面客户端以及本地项目调试服务，所述方法包括：

通过所述本地项目调试服务将将待调试的混合模式移动应用的页面代码进行打包生成页面代码文件目录；

通过所述本地项目调试服务在所述页面代码文件目录中的预设文件中添加用于加载Service Worker的脚本的代码段；

通过所述桌面客户端将包含有所述Service Worker的脚本的页面代码文件目录进行打包生成页面代码文件包，并将所述页面代码文件包上传至所述节点服务器；

通过所述节点服务器对所述页面代码文件包进行解压生成第一代码文件，并将生成的第一代码文件部署至所述静态资源服务中；

通过所述混合模式移动应用从所述静态资源服务中获取并加载所述第一代码文件，以打开所述待调试页面；

通过所述混合模式移动应用根据所述第一代码文件中的所述代码段加载所述Service Worker的脚本，以及通过所述Service Worker的脚本拦截所述待调试页面的网络请求，并将拦截到的网络请求的请求地址修改为所述节点服务器的API接口服务地址；

通过所述节点服务器在接收到所述网络请求后，将所述网络请求转发给所述桌面客户端；

通过所述桌面客户端对所述网络请求进行域名解析，并根据解析后得到的地址将所述网络请求发给所述服务端服务器；

通过所述服务端服务器对所述网络请求进行响应。

本申请实施例提供的混合模式移动应用调试系统，通过使用Electron桌面客户端将本地项目打包上传后，Android真机加载项目静态资源，Hybrid页面内的所有HTTP/HTTPS网络请求都经由Service Worker等层层转发到本地PC，经过本地DNS解析，请求被发送到测试、PRE等非线上环境的服务端服务器，获得测试环境前后端联调的效果。本申请中的调试系统使得前端开发人员无需关心如何转发，且不再需要借助代理等工具进行网络请求劫持，从而可以降低配置复杂度，实现Hybrid页面内所有网络请求经由本地DNS解析、请求转发，直接访问测试、PRE环境下的服务端接口服务，实现本地Host化。

附图说明

图1示意性示出了实现本申请实施例的混合模式移动应用调试系统的环境示意图；

图2示意性示出了根据本申请一实施例的混合模式移动应用调试系统的框图；

图3示意性示出了根据本申请一实施例的混合模式移动应用调试方法的流程示意图。

具体实施方式

以下结合附图与具体实施例进一步阐述本申请的优点。

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。

在本公开使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本公开。在本公开和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其它含义。还应当理解，本文中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。

应当理解，尽管在本公开可能采用术语第一、第二、第三等来描述各种信息，但这些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开。例如，在不脱离本公开范围的情况下，第一信息也可以被称为第二信息，类似地，第二信息也可以被称为第一信息。取决于语境，如在此所使用的词语“如果”可以被解释成为“在……时”或“当……时”或“响应于确定”。

在本申请的描述中，需要理解的是，步骤前的数字标号并不标识执行步骤的前后顺序，仅用于方便描述本申请及区别每一步骤，因此不能理解为对本申请的限制。

图1示意性示出了根据本申请实施例的混合模式移动应用调试系统的应用环境示意图。在示例性的实施例中，该应用环境的系统可包括终端设备10、安装有待调试的混合模式移动应用的设备20及服务器30。其中，终端设备10、安装有待调试的混合模式移动应用的设备20及服务器30之间形成无线或有线连接。终端设备10可以为平板电脑、电脑等，具体此处不作限定。安装有待调试的混合模式移动应用的设备20可以为安卓手机、安卓平板或者iOS模拟器等。服务器30可以为一台服务器或多台服务器组成的服务器集群或云计算中心等。服务器30用于存储待调试的混合模式移动应用的页面代码。

参阅图2，其为本申请一实施例的混合模式移动应用调试系统的框图。从图中可以看出，本实施例中所提供的混合模式移动应用调试系统包括调试设备200、安装有待调试的混合移动应用的待调试设备201、节点服务器202及服务端服务器203，所述调试设备200中安装有本地项目调试服务和桌面客户端，其中：

所述桌面客户端，用于将待调试的混合模式移动应用的页面代码上传至所述节点服务器202中。

具体地，所述调试设备200指的是在混合模式移动应用调试系统中用于对调试设备201进行调试的设备。在本实施例中，在对混合模式移动应用(Hybrid应用)进行调试之前，需要先通过所述调试设备200中的桌面客户端将该混合模式移动应用的页面代码上传至节点服务器202中。

在一示例性的实施方式中，桌面客户端为Electron桌面客户端，所述调试设备200还包括安装在所述调试设备200中的本地项目调试服务。

其中，所述Electron桌面客户端，是基于Electron开源框架的MacOS、Windows的桌面客户端，其是可以实现PC(电脑)、节点服务器202、真机(Android手机)或模拟器(iOS模拟器)之间的调试耦合中间层，是桌面客户端使用者的UI接入层，聚合了PC底层系统、WebSocket通信、Chromium内核控制等多种功能。具体而言，所述Electron桌面客户端可以实现AppleScript自动化服务与node-simctl iOS模拟器自动化服务，实现页面HMR(hotmodule replacement，模块热替换)所有相关环节的自动化流程，包括注入配置、桥接中间层等。

在本实施例中，当Electron桌面客户端200启动后，其会在PC本地创建一个WebSocket客户端与WebSocket服务端。

其中，WebSocket客户端会主动向节点服务器202发起连接请求，以在其两者之间建立第一WebSocket长连接，并通过该第一WebSocket长连接可以将从节点服务器202获取到的数据转发给WebSocket客户端。WebSocket客户端还会从WebSocket服务端获取到的数据(该数据通过WebSocket服务端与WebSocket客户端之间的内部数据通道获取得到)通过该第一WebSocket长连接转发给节点服务器202。

在一示例性实施方式中，为了避免没有权限的设备也连上该节点服务器202，所述Electron桌面客户端，还用于向所述节点服务器202请求获取会话凭证信息；所述节点服务器202，用于在接收到所述Electron桌面客户端发送的会话凭证信息获取请求时，生成会话凭证信息，并将所述会话凭证信息发送给所述Electron桌面客户端，以使所述WebSocket客户端根据所述会话凭证信息与所述节点服务器202建立第一WebSocket长连接。

具体地，节点服务器202在接收到会话凭证信息获取请求后，可以随机生成会话凭证信息，所述会话凭据信息为与节点服务器202建立连接的凭证，只有具有该会话凭证的设备才能与节点服务器202建立连接。

其中，WebSocket服务端作为待调试页面的调试数据、待调试页面的HMR热更新数据、Service Worker劫持请求转发相关数据的数据中转站。该WebSocket服务端可以供调试工具(比如，Chrome Devtools Frontend调试工具)连接，实现节点服务器202与ChromeDevtools Frontend调试工具、Webpack服务、Hybrid应用(混合模式移动应用)、待调试页面及Service Worker之间的通信。

在本实施例中，在启动Electron桌面客户端后，其还会在PC本地创建第一模块热替换客户端。

具体地，第一模块热替换客户端是由Electron桌面客户端创建的本地WebSocket客户端，用于与模块热替换服务端通信，实现HMR热更新JSON数据的交换。

在本实施方式中，为了可以及时通过所述本地项目调试服务对页面代码进行处理，在启动Electron桌面客户端后，其还会在PC本地创建一个本地项目打包服务，以通过该本地项目打包服务开启所述本地项目调试服务。

具体地，本地项目打包服务是Electron客户端的子进程创建的Webpack开发服务器，用于执行开启所述本地项目调试服务，以本地项目调试服务对页面代码进行处理。

在本实施方式中，所述Electron桌面客户端还用于通过所述本地项目打包服务在所述页面代码中添加用于创建第二模块热替换客户端的第一脚本及添加用于创建模块热替换服务端的第二脚本。

具体地，模块热替换服务端，是在Webpack开启DevServer模式时，由Webpack在本地创建的WebSocket服务端，供第一模块热替换客户端连接并提供HMR热更新JSON数据。

其中，所述第一脚本是JavaScript脚本，用于替换Webpack内置的模块热替换客户端，通过将该第一脚本添加至页面代码中，在加载页面代码时会与Webpack内置的模块热替换服务端建立WebSocket长连接，用于交换HMR热更新的JSON数据。在本实施例中，通过该第一脚本创建的第二模块热替换客户端可以改变待调试页面的HMR热更新默认的WebSocket长连接的目标地址为节点服务器202地址，用于转发HMR热更新的JSON数据至节点服务器202。

其中，Webpack是一个模块打包器，主要目的是打包在浏览器上运行的JavaScript代码文件。

需要说明的是，HMR热更新，即模块热替换，该功能是一种会在应用程序运行过程中，替换、添加或删除模块时，而无需重新加载整个页面。其具有如下几个特点：

1、保留页面状态(页面状态包括表单、路由等状态)。

2、只更新变更内容，打包、页面加载、页面呈现速度更快，以节省宝贵的开发时间。

3、在源代码中CSS/JS产生修改时，会立刻在浏览器中进行更新，这几乎相当于在浏览器devtools中直接更改样式。

其中，所述第二脚本也是JavaScript脚本，其可以用于替换Webpack内置的模块热替换服务端，具体而言，该JavaScript脚本核心是通过改变内置的模块热替换服务端的serverPath路径为自定义路径，以便可以和创建的模块热替换客户端建立WebSocket长连接。

在一示例性的实施方式中，在通过所述本地项目打包服务在所述页面代码中添加所述第一脚本和所述第二脚本时，可以对所述页面代码中包含的配置文件代码进行解析得到gitignore、git filemode配置，并在解析后得到的配置文件中添加所述第一脚本和所述第二脚本，在完成所述第一脚本和第二脚本添加后，可以根据现有的config配置文件，以生成新的项目配置文件。

在本实施例中，当本地项目打包服务完成在页面代码中添加第一脚本和第二脚本后，本地项目调试服务即可以根据所述第二脚本创建模块热替换服务端。

本地项目调试服务还可以将包含有所述第一脚本的页面代码进行打包生成页面代码文件目录。

其中，所述本地项目调试服务是一个基于Webpack的本地前端项目的Dev运行服务。

所述页面代码文件目录指的是dist文件，其包括多个文件，比如该dist文件包含项目静态资源html、css、js文件等。

在本实施例中，所述本地项目调试服务，还用于在所述页面代码文件目录中的预设文件中添加用于加载Service Worker的第三脚本的代码段，以及用于将所述第三脚本添加至所述页面代码文件目录下。

其中，Service Worker是一个注册在指定源和路径下的事件驱动Worker，它采用JavaScript控制关联的页面或者网站，拦截并修改访问和请求资源，细粒度的缓存资源。本质上充当Web应用程序、浏览器和网络之间的代理服务器。它运行在Worker上下文，即在其他线程中，而非浏览器主线程，因此无法访问页面DOM，且不会造成阻塞，只能由HTTPS承载，是与浏览器主线程完全异步的线程。

在本实施例中，为了在加载待调试页面时，可以通过Service Worker拦截当前待调试页面中的所有的HTTP/HTTPS网络请求，实现对网络请求与响应结果的修改，再返回给当前待调试页面，作为当前待调试页面的网络请求结果。在本实施例中，可以现在所述页面代码文件目录中预先添加加载Service Worker脚本的代码段，这样在加载页面代码时，就可以通过该代码段来开启另一个线程来运行Service Worker的第三脚本，以实现对当前待调试页面的接管。

在本实施方式中，所述预设文件为预先设定的用于添加代码段的文件，其具体为页面代码文件目标中的html文件。

在本实施例中，在添加好代码段之后，可以将Service Worker的JavaScript的第三脚本放入所述页面代码文件目录下，以便可以通过所述Electron桌面客户端将ServiceWorker的脚本随页面代码文件目录中的其他静态资源文件一起打包生成页面代码文件包，并将所述页面代码文件包上传至所述节点服务器202。

在一示例性的施方式中，可以通过所述Electron桌面客户端将包含有所述第三脚本的页面代码文件目录打包成tar包，这样，Electron桌面客户端，可以通过HTTP请求的方式将该tar包上传至节点服务器202，具体而言，Electron桌面客户端可以将tar包放入HTTP请求的请求体Body内。

所述节点服务器202，用于将接收到的页面代码部署至静态资源服务中，并将所述静态资源服务的网络地址返回给所述调试设备201。

具体地，节点服务器202可以部署在公网环境下的，用于承载API接口服务，管理WebSocket长连接数据交互，负责接收、解压缩、管理不同客户端的会话凭证(Session Id)与项目静态资源，提供静态资源服务等。静态资源服务为节点服务器202中用于存储页面代码的容器。

在本实施例中，节点服务器202在接收到调试设备201上传的页面代码后，会将接收到的页面代码部署至静态资源服务中，并将所述静态资源服务的网络地址返回给调试设备201。

在一示例性的实施方式中，当节点服务器202接收到的页面代码为通过Electron桌面客户端打包生成的页面代码文件包时，所述节点服务器202还用于对所述页面代码文件包进行解压生成第一代码文件，并将生成的第一代码文件部署至所述静态资源服务中，以及将所述静态资源服务的网络地址返回给所述Electron桌面客户端。

可以理解的是，当节点服务器202接收到的页面代码是以文件包的形式存在的时，需要先对页面代码文件包进行解压，之后才会将解压得到的第一代码文件部署至静态资源服务中，以便待调试设备可以从该静态资源服务中获取所述第一代码文件。

在一示例性的实施方式中，为了可以快速查找到存储在静态资源服务中的页面代码(或者第一代码文件)，节点服务器202可以在生成所述会话凭证信息后，在所述静态资源服务中创建以所述会话凭证信息为名的目录，这样，后续在对页面代码文件(或者第一代码文件)进行部署时，即可以将接收到的页面代码文件包进行解压，并将解压后得到的页面代码部署至以所述会话凭证信息为名的目录下。

所述待调试设备203，用于从所述调试设备201中获取所述网络地址，并根据所述网络地址从所述静态资源服务中获取并加载所述页面代码，以打开待调试页面。

具体地，所述待调试设备203为需要通过调试设备201进行调试的设备。在本实施例中，当对待调试设备进行调试时，待调试设备会先从调试设备201中获取所述网络地址，以便可以根据该网络地址从静态资源服务器中获取并加载页面代码，从而打开待调试页面。

所述调试设备202，还用于通过安装在所述调试设备202中的调试工具对所述待调试页面进行调试。

具体地，所述调试工具为在对待调试设备203进行远程调试的过程中所需要使用的工具。在本实施例中，在进行调试时，在打开待调试页面后，即可以通过该调试工具直接对待调试页面进行远程的页面调试。其中，页面调试可以包括审查元素、Console打印、查看Network、内存管理等页面调试操作。

在一示例性的实施方式中，所述待调试设备203可以包括安装有所述混合模式移动应用的安卓设备。所述安卓设备指的是使用Android系统的设备。

所述调试工具包括Chrome Devtools Frontend调试工具，Chrome DevtoolsFrontend调试工具是基于Chrome Devtools Protocol跨端调试协议来进行页面调试的，该协议基于JSON格式的数据进行页面调试数据交互，无设备限制，市场上大多数基于Chromium、Blink内核的主流浏览器、Webview都可以用于实现跨端调试。

所述混合模式移动应用，用于从所述静态资源服务中获取并加载所述第一代码文件，以打开所述待调试页面。

具体地，为了使得混合模式移动应用可以方便地从静态资源服务中获取并加载所述第一代码文件，Electron桌面客户端在接收到节点服务器202返回的网络地址后，可以根据所述网络地址生成对应的标识码，其中，所述标识码可以为二维码、条形码等。这样，混合模式移动应用在需要获取所述第一代码文件时，即可以对该条形码进行扫描，以从该条形码中获取所述网络地址，之后，根据网络地址从静态资源服务中获取并加载所述第一代码文件，以打开所述待调试页面。

在一实施方式中，为了便于后续混合模式移动应用可以与节点服务器202建立WebSocket长连接，所述Electron桌面客户端还可以将会话凭证信息与所述网络地址进行拼接，并根据拼接后得到的字符信息生成对应的标识码；所述混合模式移动应用，还用于根据从所述标识码中识别出的会话凭证信息与所述节点服务器202建立所述第四WebSocket长连接。

所述混合模式移动应用，还用于根据所述第一代码文件中的所述代码段加载所述第三脚本，并通过所述第三脚本拦截所述待调试页面的网络请求，以及根据所述第一代码文件中的第一脚本创建所述第二模块热替换客户端。

具体地，由于获取到的第一页面代码中中包含有加载所述第三脚本(ServiceWorker的脚本)的代码段，因此，在加载该获第一页面代码文件的过程中，可以同时加载Service Worker的脚本，并通过所述Service Worker拦截所述待调试页面的网络请求，以便可以将拦截到的网络请求的请求地址修改为所述节点服务器202的API接口服务地址。

在一示例性的实施方式中，在Service Worker将拦截到的网络请求的请求地址修改为所述节点服务器202的API接口服务地址时，节点服务器202会将所述网络请求通过所述第一WebSocket长连接发给WebSocket客户端。所述WebSocket客户端在接收到所述网络请求后，通过所述Electron桌面客户端对所述网络请求进行域名解析，并根据解析后得到的地址将所述网络请求发给服务端服务器。所述服务端服务器在接收到所述网络请求后，可以对所述网络请求进行响应。

其中，服务端服务器为部署API接口服务的服务器，通常会部署在多种环境，如测试、PRE、正式环境，用于不同阶段的前后端联调。

在一示例性的实施方式中，当节点服务器202通过所述API接口服务地址接收到所述网络请求后，会对所述网络请求进行解析，并将解析后得到的第一网络请求进行封装成包含请求序号、请求地址、请求方式、请求头及请求体的第二网络请求。

在一示例性的实施方式中，服务端服务器在接收到所述网络请求后，会对所述网络请求进行响应，以生成响应结果，并将响应结果返回给所述Electron桌面客户端。在本实施例中，当所述Electron桌面客户端接收到服务端服务器返回的的响应结果后，可以对该响应结果进行封装，并将封装后的第一响应结果通过所述WebSocket客户端发送给所述节点服务器202；接着，节点服务器202会对接收到的所述第一响应结果进行解析，并将解析后得到的第二响应结果返回给所述Service Worker，以使所述Service Worker将所述第二响应结果作为所述待调试页面中包含的网络请求的响应结果。

在一实施方式中，为了便于对响应结果进行分析，当Electron桌面客户端接收到所述第一响应结果后，会对接收到的第一响应结果进行封装成包含响应序号、响应状态码、响应状态信息、响应头及响应体的第二响应结果。

所述第二模块热替换客户端，用于与所述节点服务器建立第二WebSocket长连接。

具体地，所述第二模块热替换客户端为在加载第一页面代码文件时创建的WebSocket客户端，用于与模块热替换服务端建立WebSocket长连接，交换HMR热更新JSON数据。本实施例中，所述第二模块热替换客户端在收到HMR热更新的JSON数据后，会主动加载打包后的热模块文件来替换待调试页面中的本地模块，达到热更新的效果。

所述混合模式移动应用，还用于开启Webview调试模式，以使所述安卓设备根据所述Webview调试模式调用Chromium内核创建Unix Domain Socket服务端。

具体地，Webview调试模式为用于对应用进行远程调试的模式。Unix DomainSocket服务端是一个用于提供给外界连接、通信、交换Hybrid页面调试的JSON数据的服务，其进程ID格式为@webview_devtools_remote_${pid}，pid为Webview进程id。该UnixDomain Socket服务端在与Hybrid应用进行通信时，是采用基于文件系统、不需要经过网络传输的IPC(Inter-Process-Communication，进程间通信)通信方式，这种通信方式不需要经过网络打包、校验、拆包等过程，更可靠且效率更高。

所述混合模式移动应用，还用于与所述Unix Domain Socket服务端建立第三WebSocket长连接，以及用于与所述节点服务器202建立第四WebSocket长连接。

具体地，混合模式移动应用，在与所述节点服务器202建立第四WebSocket长连接时，可以先从标识码中识别出会话凭证信息，之后，即可以凭借该会话凭证信息与所述节点服务器202建立第四WebSocket长连接，以便可以通过该第四WebSocket长连接预节点服务器202交换待调试页面的调试JSON数据。

在一示例性的实施方式中，所述Unix Domain Socket服务端具有对应的进程标识信息，所述混合模式移动应用，还用于获取所述安卓设备中当前开启的多个进程的进程标识信息，并根据各个进程标识信息查找所述Unix Domain Socket服务端；所述混合模式移动应用，还用于向所述Unix Domain Socket服务端发起握手请求，并在握手成功后向所述Unix Domain Socket服务端发送协议升级指令，以将当前通信协议升级为WebSocket协议。

具体地，所述进程标识信息为用于区别不同进程的信息，所述混合模式移动应用可以使用LocalSocket库根据当前打开的各个进程的进程标识信息找到对应的UnixDomain Socket服务端对应的进程，然后向找到的进程发起握手请求，握手成功后向该Socket套接字发送HTTP报文升级当前通信协议为WebSocket协议。升级成功后混合模式移动应用就可以与Unix Domain Socket Server服务端基于WebSocket协议进行对应的报文通信。

所述桌面客户端，还用于开启所述桌面调式窗口；

所述桌面调式窗口，用于加载安装在所述调试设备中的调试工具对所述待调试页面进行调试。

具体地，桌面客户端可以通过所述WebSocket客户端，开启桌面调试窗口，并在所述桌面调试窗口加载安装在所述调试设备中的调试工具(比如所述Chrome DevtoolsFrontend调试工具)对所述待调试页面进行调试。

具体地，所述Chrome Devtools Frontend调试工具用于调试页面的前端UI，其可以从Chromium内核中分离出来作为前端项目独立运行，通过WebSocket协议与Chromium内核通信，交换JSON格式的调试数据，实现Chrome内置Devtools的开发效果。

所述Chrome Devtools Frontend调试工具，用于与所述WebSocket服务端建立第五WebSocket长连接，以通过所述第五WebSocket长连接与所述Chromium内核交换调试数据实现对所述待调试页面进行调试。

具体地，Chrome Devtools Frontend调试工具在与WebSocket服务端建立第五WebSocket长连接时，可以先通过所述WebSocket客户端获取所述WebSocket服务端的地址信息，之后，即可以根据获取到的WebSocket服务端的地址信息与所述WebSocket服务端建立WebSocket长连接。

在一实施方式中，所述Chrome Devtools Frontend调试工具在通过所述第五WebSocket长连接实现对所述待调试页面进行调试时，可以通过所述第五WebSocket长连接发送调试请求给所述WebSocket服务端，以使所述WebSocket服务端可以依次通过所述WebSocket客户端、所述第一WebSocket长连接的通道、所述第四WebSocket长连接的通道及所述第三WebSocket长连接的通道将所述调试请求发送给所述Unix Domain Socket服务端，实现对所述待调试页面进行调试。

在另一实施方式中，所述调试工具在通过所述第五WebSocket长连接实现对所述待调试页面进行调试时，还可以通过所述第五WebSocket长连接向所述WebSocket服务端发送所述待调试的Hybrid页面的调试信息获取请求给所述WebSocket服务端，以使所述WebSocket服务端可以依次通过所述WebSocket客户端、所述第一WebSocket长连接的通道、所述第四WebSocket长连接的通道及所述第三WebSocket长连接的通道将将所述调试信息获取请求发送给所述Unix Domain Socket服务端，从而实现从所述Unix Domain Socket服务端获取所述待调试页面的调试信息，并根据获取到的调试信息进行调试操作。

在一示例性的实施方式中，为了及时对待调试页面进行调试，所述混合模式移动应用，还用于在与所述节点服务器202建立第四WebSocket长连接后，通过所述第四WebSocket长连接向所述节点服务器202发送所述待调试页面的调试通道已开启的信号；所述节点服务器202，还用于在接收到所述信号后，通过所述第一WebSocket长连接将所述信号发送给所述WebSocket客户端，以使所述WebSocket客户端在接收到所述信号后开启所述桌面调试窗口。

本实施例中，还有在接收到调试通道已开启的信号时，才会开启所述桌面调试窗口，以便正式开始对待调试页面进行页面调试。

所述节点服务器202，还用于在所述第二WebSocket长连接建立后，通过所述第一WebSocket长连接通知所述Electron桌面客户端在所述第一模块热替换客户端与所述模块热替换服务端之间建立第六WebSocket长连接，以通过所述第六WebSocket长连接实现对页面的热更新。

具体地，节点服务器202在所述第二WebSocket长连接建立后，会通过第一WebSocket长连接通知所述Electron桌面客户端在所述第一模块热替换客户端与所述模块热替换服务端之间建立第六WebSocket长连接，这样，所述第二模块热替换客户端可以依次通过所述第二WebSocket长连接的通道、所述第一WebSocket长连接的通道以及所述第六WebSocket长连接的通道将页面热更新的数据请求发送给所述模块热替换服务端，实现对所述页面热更新的数据的获取。

在一示例性的实施方式中，当页面代码发生修改后，所述Electron桌面客户端还可以通过所述模块热替换服务端依次经过所述第六WebSocket长连接的通道、所述第一WebSocket长连接的通道及所述第二WebSocket长连接的通道将修改后的页面代码发送给所述第二模块热替换客户端，以通过所述第二模块热替换客户端根据修改后的页面代码实现对页面的热更新。

在一示例性的实施方式中，所述待调试设备201还包括iOS模拟器，所述调试工具还包括Safari浏览器，其中：

所述Electron桌面客户，还用于创建AppleScript自动化服务及iOS模拟器自动化服务。

具体地，AppleScript是苹果公司创建的一种脚本语言，适用于MacOS 7.1及更高版本，允许用户直接控制可编写脚本的MacOS应用程序及MacOS本身的部分内置功能与应用，可以帮助使用者在MacOS中使用AppleScript脚本控制应用程序，如系统事件、Safari浏览器、iOS Simulator模拟器等，通过该AppleScript编写的AppleScript自动化服务可以用于打开Safari浏览器的Safari开发者工具。

iOS模拟器自动化服务为使用node-simctl三方库执行xcrun simctl命令对iOS模拟器进行控制，包括启动、关闭模拟器，安装App，打开URL等的服务。

其中，xcrun是MacOS下Xcode应用提供的命令行工具，用于对Xcode开发相关的功能进行控制。

simctl是xcrun工具的一个子命令，用于控制模拟器，提供了模拟器的启动、关闭、安装应用、打开URL等功能。

node-simctl是由Appium提供的simctl工具的Node版本三方库，用于在Node程序中对iOS Simulator模拟器进行控制。

所述Electron桌面客户端，还用于通过所述iOS模拟器自动化服务开启所述iOS模拟器，并在所述iOS模拟器开启后，通过所述iOS模拟器自动化服务安装所述混合模式移动应用，以及在所述混合模式移动应用安装完成后，通过所述iOS模拟器自动化服务在所述iOS模拟器中打开所述网络地址，以使得所述混合模式移动应用调用WKWebview内核加载所述待调试页面。

具体地，iOS模拟器是一种用于模拟真实的iOS设备的软件，本实施例中，为了节省调试过程中需要花费的时间，通过iOS模拟器自动化服务自动启动iOS模拟器，并在开启iOS模拟器后，通过iOS模拟器自动化服务安装所述混合模式移动应用，以及在所述混合模式移动应用安装完成后，通过所述iOS模拟器自动化服务在所述iOS模拟器中打开所述网络地址，从而实现全自动化的在iOS模拟器中安装所述混合模式移动应用，并通过所述混合模式移动应用打开所述待调试页面。

WKWebView内核是现代WebKit API在iOS 8和OS X Yosemite应用中的核心部分。它代替了UIKit中的UIWebView和AppKit中的WebView，提供了统一的跨双平台API(iOS和OS)。

在一示例性的实施方式中，为了避免在同一时刻有多个iOS模拟器开启，在本实施例中，在通过所述iOS模拟器自动化服务开启所述iOS模拟器时，所述Electron桌面客户端，可以先通过所述iOS模拟器自动化服务关闭当前所有已开启的iOS模拟器，并在所有的iOS模拟器关闭后，重新开启默认或用户选中的iOS模拟器。之后，可以通过所述iOS模拟器自动化服务安装所述混合模式移动应用。

在一示例性的实施方式中，在完成混合模式移动应用的安装后，所述Electron桌面客户端，还可以通过所述iOS模拟器自动化服务安装测试环境证书(比如，SSL证书)，以便所述混合模式移动应用可以访问测试环境的HTTPS服务。

在一示例性的实施方式中，所述Electron桌面客户端通过所述iOS模拟器自动化服务在所述iOS模拟器中打开所述网络地址后，可以通过URL Schema开启所述混合模式移动应用，以使得所述混合模式移动应用可以调用WKWebview内核加载所述待调试页面。

其中，URL Schema是当前大多数App都支持的，其具有在真机中的浏览器打开URL时可以唤起APP并打开相应的页面的功能。

自iOS 8开始，WKWebview逐步替代UIWebview，成为iOS App主要使用的Webview，WKWebview基于Webkit内核。

在一示例性的实施方式中，所述混合模式移动应用调用WKWebview内核加载所述待调试页面包括：所述混合模式移动应用调用所述WKWebview内核开启WKWebview内核调试服务，以及调用所述WKWebview内核采用Webkit引擎渲染所述待调试页面。

具体地，WKWebview内核调试服务就是WKWebview内核在本地开启的Webview调试服务，类似Android的Chromium内核调试服务。但由于iOS的限制，常规情况下，第三方应用无法控制WKWebview的渲染与内部调试，也无法接触该WKWebview内核调试服务，只有Safari开发者工具可以与该服务通信并调试，调试协议基于类Webkit内核调试协议。在开启内核调试服务后，所述WKWebview内核就会采用Webkit引擎渲染所述待调试页面。

所述Electron桌面客户端，还用于通过AppleScript自动化服务从所述Safari浏览器中打开Safari开发者工具。

具体地，所述Electron桌面客户端可以通过所述AppleScript自动化服务模拟点击所述Safari浏览器中的所述Safari开发者工具，以打开所述Safari开发者工具。

其中，所述Safari开发者工具是由Safari浏览器提供的用于调试iOS真机或模拟器的工具，其类似Chrome Devtools工具，可以进行元素审查、Console打印、管理Network网络请求等调试功能。

所述Safari开发者工具，用于通过Safari调试协议与所述WKWebview内核建立连接通道，并通过所述连接通道实现对待调试页面进行调试。

具体地，Safari开发者工具与iOS模拟器的WKWebview内核调试服务在建立连接通道后，可以基于类Webkit调试协议通信，交换页面调试数据，进行完整功能性的页面调试。

本申请中的混合模式移动应用调试系统，可以让前端开发人员在由Electron桌面客户端开启的桌面调试窗口中使用Chrome Devtools Frontend调试工具直接对Android4.4及以上各类Android真机上的Hybrid页面进行远程调试，获得类似Chrome内置开发者工具调试PC页面那样的调试效果，而无需借助Charles代理、USB硬件设备连接等，从而可以降低成本和复杂度。

参照图3，其为本申请一实施例的混合模式移动应用调试方法。该方法应用于包括调试设备、服务端服务器、节点服务器及安装有待调试的混合模式移动应用的待调试设备的混合模式移动应用调试系统中，所述调试设备中安装有桌面客户端以及本地项目调试服务，其中，所述混合模式移动应用调试系统为上述实施例中的混合模式移动应用调试系统，在本实施例中不再赘述。

在本实施例中，所述方法包括：

步骤S30，通过所述本地项目调试服务将将待调试的混合模式移动应用的页面代码进行打包生成页面代码文件目录；

步骤S31，通过所述本地项目调试服务在所述页面代码文件目录中的预设文件中添加用于加载Service Worker的脚本的代码段；

步骤S32，通过所述桌面客户端将包含有所述Service Worker的脚本的页面代码文件目录进行打包生成页面代码文件包，并将所述页面代码文件包上传至所述节点服务器；

步骤S33，通过所述节点服务器对所述页面代码文件包进行解压生成第一代码文件，并将生成的第一代码文件部署至所述静态资源服务中；

步骤S34，通过所述混合模式移动应用从所述静态资源服务中获取并加载所述第一代码文件，以打开所述待调试页面；

步骤S35，通过所述混合模式移动应用根据所述第一代码文件中的所述代码段加载所述Service Worker的脚本，以及通过所述Service Worker的脚本拦截所述待调试页面的网络请求，并将拦截到的网络请求的请求地址修改为所述节点服务器的API接口服务地址；

步骤S36，通过所述节点服务器在接收到所述网络请求后，将所述网络请求转发给所述桌面客户端；

步骤S37，通过所述桌面客户端对所述网络请求进行域名解析，并根据解析后得到的地址将所述网络请求发给所述服务端服务器；

步骤S38，通过所述服务端服务器对所述网络请求进行响应。

本申请中的混合模式移动应用调试方法，可以让前端开发人员在由Electron桌面客户端开启的桌面调试窗口中使用Chrome Devtools Frontend调试工具直接对Android4.4及以上各类Android真机上的Hybrid页面进行远程调试，获得类似Chrome内置开发者工具调试PC页面那样的调试效果，而无需借助Charles代理、USB硬件设备连接等，从而可以降低成本和复杂度。

以上所描述的装置实施例仅仅是示意性的，其中作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到至少两个网络单元上。可以根据实际的需要筛选出其中的部分或者全部模块来实现本申请实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。

通过以上的实施方式的描述，本领域普通技术人员可以清楚地了解到各实施方式可借助软件加通用硬件平台的方式来实现，当然也可以通过硬件。本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储记忆体(Read-OnlyMemory，ROM)或随机存储记忆体(RandomAccessMemory，RAM)等。

最后应说明的是：以上各实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述各实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的范围。

Claims (10)

1.一种混合模式移动应用调试系统，特征在于，所述调试系统包括调试设备、服务端服务器、节点服务器及安装有待调试的混合模式移动应用的待调试设备，所述调试设备中安装有桌面客户端以及本地项目调试服务，其中：

所述本地项目调试服务，用于将将待调试的混合模式移动应用的页面代码进行打包生成页面代码文件目录；

所述本地项目调试服务，还用于在所述页面代码文件目录中的预设文件中添加用于加载Service Worker的脚本的代码段；

所述桌面客户端，用于将包含有所述Service Worker的脚本的页面代码文件目录进行打包生成页面代码文件包，并将所述页面代码文件包上传至所述节点服务器；

所述节点服务器，用于对所述页面代码文件包进行解压生成第一代码文件，并将生成的第一代码文件部署至静态资源服务中；

所述混合模式移动应用，用于从所述静态资源服务中获取并加载所述第一代码文件，以打开待调试页面；

所述混合模式移动应用，还用于根据所述第一代码文件中的所述代码段加载所述Service Worker的脚本，以及通过所述Service Worker的脚本拦截所述待调试页面的网络请求，并将拦截到的网络请求的请求地址修改为所述节点服务器的API 接口服务地址；

所述节点服务器，用于在接收到所述网络请求后，将所述网络请求转发给所述桌面客户端；

所述桌面客户端，用于对所述网络请求进行域名解析，并根据解析后得到的地址将所述网络请求发给所述服务端服务器；

所述服务端服务器，用于对所述网络请求进行响应。

2.根据权利要求1所述的混合模式移动应用调试系统，其特征在于，所述桌面客户端为Electron桌面客户端，其中：

所述Electron桌面客户端，用于创建本地项目打包服务及WebSocket客户端；

所述Electron桌面客户端，还用于通过所述WebSocket客户端与所述节点服务器建立WebSocket长连接，以及通过所述本地项目打包服务开启所述本地项目调试服务；

所述节点服务器，还用于通过所述WebSocket长连接将所述网络请求发送给所述WebSocket客户端。

3.根据权利要求2所述的混合模式移动应用调试系统，其特征在于，所述页面代码文件目录包括html文件、css文件及js 文件，所述本地项目调试服务，还用于在所述html文件中添加用于加载Service Worker的脚本的代码段。

4.根据权利要求2所述的混合模式移动应用调试系统，其特征在于，所述服务端服务器，还用于将对所述网络请求进行响应的响应结果返回给所述Electron桌面客户端；

所述Electron桌面客户端，还用于对接收到的响应结果进行封装，并将封装后的第一响应结果通过所述WebSocket 客户端发送给所述节点服务器；

所述节点服务器，还用于对接收到的所述第一响应结果进行解析，并将解析后得到的第二响应结果返回给所述Service Worker，以使所述Service Worker将所述第二响应结果作为所述待调试页面的网络请求的响应结果。

5.根据权利要求2所述的混合模式移动应用调试系统，其特征在于，所述Electron桌面客户端，还用于向所述节点服务器请求获取会话凭证信息；

所述节点服务器，用于在接收到所述Electron桌面客户端发送的会话凭证信息获取请求时，生成会话凭证信息，并将所述会话凭证信息发送给所述Electron桌面客户端，以使所述WebSocket客户端根据所述会话凭证信息与所述节点服务器建立WebSocket长连接。

6.根据权利要求5所述的混合模式移动应用调试系统，其特征在于，所述节点服务器，还用于在生成所述会话凭证信息后，在所述静态资源服务中创建以所述会话凭证信息为名的目录。

7.根据权利要求6所述的混合模式移动应用调试系统，其特征在于，所述节点服务器，还用于将接收到的页面代码文件包进行解压并部署至所述以所述会话凭证信息为名的目录下。

8.根据权利要求2所述的混合模式移动应用调试系统，其特征在于，所述节点服务器，还用于在通过所述API 接口服务地址接收到所述网络请求后，对所述网络请求进行解析，并将解析后得到的第一网络请求进行封装成包含请求序号、请求地址、请求方式、请求头及请求体的第二网络请求。

9.根据权利要求4所述的混合模式移动应用调试系统，其特征在于，所述Electron桌面客户端，还用于对接收到的第一响应结果进行封装成包含响应序号、响应状态码、响应状态信息、响应头及响应体的第二响应结果。

10.一种混合模式移动应用调试方法，应用于包括调试设备、服务端服务器、节点服务器及安装有待调试的混合模式移动应用的待调试设备的混合模式移动应用调试系统中，所述调试设备中安装有桌面客户端以及本地项目调试服务，其特征在于，所述方法包括：

通过所述本地项目调试服务将将待调试的混合模式移动应用的页面代码进行打包生成页面代码文件目录；

通过所述本地项目调试服务在所述页面代码文件目录中的预设文件中添加用于加载Service Worker的脚本的代码段；

通过所述桌面客户端将包含有所述Service Worker的脚本的页面代码文件目录进行打包生成页面代码文件包，并将所述页面代码文件包上传至所述节点服务器；

通过所述节点服务器对所述页面代码文件包进行解压生成第一代码文件，并将生成的第一代码文件部署至静态资源服务中；

通过所述混合模式移动应用从所述静态资源服务中获取并加载所述第一代码文件，以打开待调试页面；

通过所述混合模式移动应用根据所述第一代码文件中的所述代码段加载所述ServiceWorker的脚本，以及通过所述Service Worker的脚本拦截所述待调试页面的网络请求，并将拦截到的网络请求的请求地址修改为所述节点服务器的API 接口服务地址；

通过所述节点服务器在接收到所述网络请求后，将所述网络请求转发给所述桌面客户端；

通过所述桌面客户端对所述网络请求进行域名解析，并根据解析后得到的地址将所述网络请求发给所述服务端服务器；

通过所述服务端服务器对所述网络请求进行响应。