混合开发中前端代码的远程调试方法、设备及存储介质.pdf

(19)中华人民共和国国家知识产权局(12)发明专利申请(10)申请公布号CN114168460A(43)申请公布日2022.03.11(21)申请号202111433534.X(22)申请日2021.11.29(71)申请人北京五八信息技术有限公司地址100080北京市海淀区学清路甲18号中关村东升科技园学院园三层301室(72)发明人吴高飞(74)专利代理机构北京太合九思知识产权代理有限公司11610代理人刘戈张爱(51)Int.Cl.G06F11/36(2006.01)G06F9/54(2006.01)权利要求书3页说明书15页附图7页(54)发明名称混合开发中前端代码的远程调试方法、设备及存储介质(57)摘要本申请实施例提供一种混合开发中前端代码的远程调试方法、设备及存储介质。在本申请实施例中，预先在浏览器中植入插件安装包，在需要调试前端代码时，运行前端代码渲染出前端页面，并运行插件安装包生成前端页面对应的插件，由插件拦截浏览器因前端页面上的业务控件被触发而产生的协议请求，并借助本地服务在插件与原生客户端之间建立远程通信连接，将协议请求发送给第二电子设备上的原生客户端，以使原生客户端调用原生能力进行响应第一协议请求，以及将原生客户端返回的回调函数和回调数据返回浏览器做进一步处理，得到反映前端代码的调试结果的处理结果。整个调试过程形成闭环，简化了混合开发中前端代码的远程调试步骤，提高了调试效率。CN114168460ACN114168460A权利要求书1/3页1.一种混合开发中前端代码的远程调试方法，其特征在于，所述前端代码位于第一电子设备上，所述第一电子设备上安装有浏览器和本地服务，所述方法包括：所述浏览器运行所述前端代码，以渲染出前端页面，所述前端页面上至少包括第一类业务控件；生成用于对所述前端页面进行远程调试所需的插件，并借助于本地服务在所述插件与原生客户端之间建立远程通信连接，所述原生客户端位于第二电子设备上，包含与所述前端代码混编生成混合应用所需的原生代码；响应对任一第一类业务控件的触发操作，生成与被触发的第一类业务控件对应的第一协议请求和回调函数，所述第一协议请求需要所述原生客户端调用原生能力进行响应；调用所述插件将所述第一协议请求和所述回调函数封装成第一远程请求，通过所述远程通信连接发送给所述原生客户端并接收所述原生客户端返回的所述回调函数和其调用与所述第一协议请求适配的原生能力产生的回调数据；调用所述插件执行所述回调函数以对所述回调数据进行业务处理，得到第一处理结果，所述第一处理结果反映所述前端代码的调试结果。2.根据权利要求1所述的方法，其特征在于，所述前端页面上还包括第二类业务控件，所述方法还包括：响应对任一第二类业务控件的触发操作，生成与被触发的第二类业务控件对应的第二协议请求，所述第二协议请求需要所述原生客户端调用原生能力进行响应；调用所述插件将所述第二协议请求封装成第二远程请求，并通过所述远程通信连接发送给所述原生客户端，以供所述原生客户端调用与所述第二协议请求适配的原生能力执行对应的业务处理，以得到第二处理结果；所述第二处理结果反映所述前端代码的调试结果。3.根据权利要求2所述的方法，其特征在于，还包括：接收所述原生客户端通过所述远程通信连接返回的第二处理结果；根据所述第一处理结果和所述第二处理结果生成所述前端代码的调试结果，并输出所述调试结果。4.根据权利要求1所述的方法，其特征在于，借助于本地服务在所述前端页面与原生客户端之间建立远程通信连接，包括：显示所述插件对应的调试页面，所述调试页面上包括可扫描的编码图形，所述编码图形指向由本地服务提供的消息页面；响应所述原生客户端对所述编码图形的扫描操作，展示所述消息页面，并将所述前端页面的标识和所述原生客户端的标识发送给本地服务，以供本地服务分别与所述前端页面和所述原生客户端建立套接字连接。5.根据权利要求4所述的方法，其特征在于，通过所述远程通信连接发送给所述原生客户端并接收所述原生客户端返回的所述回调函数和其调用与所述第一协议请求适配的原生能力产生的回调数据，包括：将所述第一远程请求发送给本地服务，以供本地服务将基于其与所述原生客户端之间的套接字连接发送给所述原生客户端并接收所述原生客户端返回的所述回调函数和所述回调数据；接收本地服务基于其与所述前端页面之间的套接字连接发送的所述回调函数和所述2CN114168460A权利要求书2/3页回调数据，并将所述回调函数和所述回调数据添加至所述消息页面上的消息列表中，以供所述插件进行处理。6.根据权利要求1所述的方法，其特征在于，调用所述插件执行所述回调函数以对所述回调数据进行业务处理，得到第一处理结果，包括：调用所述插件执行所述回调函数，以将所述回调数据渲染至所述前端页面对应的结果页面上，得到第一处