[发明专利]混合开发中前端代码的远程调试方法、设备及存储介质

说明书

本申请实施例提供一种混合开发中前端代码的远程调试方法、设备及存储介质。在本申请实施例中，预先在浏览器中植入插件安装包，在需要调试前端代码时，运行前端代码渲染出前端页面，并运行插件安装包生成前端页面对应的插件，由插件拦截浏览器因前端页面上的业务控件被触发而产生的协议请求，并借助本地服务在插件与原生客户端之间建立远程通信连接，将协议请求发送给第二电子设备上的原生客户端，以使原生客户端调用原生能力进行响应第一协议请求，以及将原生客户端返回的回调函数和回调数据返回浏览器做进一步处理，得到反映前端代码的调试结果的处理结果。整个调试过程形成闭环，简化了混合开发中前端代码的远程调试步骤，提高了调试效率。

技术领域

本申请涉及互联网技术领域，尤其涉及一种混合开发中前端代码的远程调试方法、设备及存储介质。

背景技术

移动应用可分为三种：原生应用(native app)，网页应用(web app)，以及混合移动应用(hybrid app)。hybrid app是采用hybrid混合开发模式开发的应用，其实际上是native的框架与web内容的结合。目前，市场上主流的移动应用在开发迭代过程中，为了达到项目快速上线、规避客户端审核周期等目的，大多会使用hybrid混合开发模式。

在hybrid app开发过程中，web前端开发人员基于web环境开发业务逻辑对应的web页面，native开发人员基于原生环境开发客户端app的框架，两端开发人员频繁交互实现功能对接，与此同时，使用第三方代理工具将本地web页面的静态资源代理到客户端app内部，在客户端app的原生环境中对web页面的代码逻辑进行调试。现有调试方式依赖第三方代理工具，调试过程复杂，成本较高。

发明内容

本申请的多个方面提供一种混合开发中前端代码的远程调试方法、设备及存储介质，用以简化混合开发中前端代码的远程调试步骤，提高调试效率。

本申请实施例提供一种混合开发中前端代码的远程调试方法，前端代码位于第一电子设备上，第一电子设备上安装有浏览器和本地服务，该方法包括：浏览器运行前端代码，以渲染出前端页面，前端页面上至少包括第一类业务控件；生成用于对前端页面进行远程调试所需的插件，并借助于本地服务在插件与原生客户端之间建立远程通信连接，原生客户端位于第二电子设备上，包含与前端代码混编生成混合应用所需的原生代码；响应对任一第一类业务控件的触发操作，生成与被触发的第一类业务控件对应的第一协议请求和回调函数，第一协议请求需要原生客户端调用原生能力进行响应；调用插件将第一协议请求和回调函数封装成第一远程请求，通过远程通信连接发送给原生客户端并接收原生客户端返回的回调函数和其调用与第一协议请求适配的原生能力产生的回调数据；调用插件执行回调函数以对回调数据进行业务处理，得到第一处理结果，第一处理结果反映前端代码的调试结果。

本申请实施例还提供一种远程调试装置，包括：渲染模块，用于运行前端代码，以渲染出前端页面，前端页面上至少包括第一类业务控件；处理模块，用于生成用于对前端页面进行远程调试所需的插件，并借助于本地服务在插件与原生客户端之间建立远程通信连接，原生客户端位于第二电子设备上，包含与前端代码混编生成混合应用所需的原生代码；处理模块，还用于响应对任一第一类业务控件的触发操作，生成与被触发的第一类业务控件对应的第一协议请求和回调函数，第一协议请求需要原生客户端调用原生能力进行响应；调用模块，用于调用插件将第一协议请求和回调函数封装成第一远程请求，通过远程通信连接发送给原生客户端并接收原生客户端返回的回调函数和其调用与第一协议请求适配的原生能力产生的回调数据；调用模块，还用于调用插件执行回调函数以对回调数据进行业务处理，得到第一处理结果，第一处理结果反映前端代码的调试结果。

本申请实施例还提供一种电子设备，电子设备上安装有浏览器和本地服务，电子设备还包括存储器和处理器，存储器中存储有前端代码和用于实现远程调试功能的程序代码；

处理器与存储器耦合，用于执行用于实现远程调试功能的程序代码，以实现混合开发中前端代码的远程调试方法。