一种快速同步开发端和移动端的调试方法、装置及应用与流程

1.本技术涉及调试领域，特别涉及一种快速同步开发端和移动端的调试方法、装置及应用。


背景技术：

2.随着移动设备的大量普及，基于移动端的web开发也越来越多，目前针对移动端的web开发依旧是需要在开发端根据功能需求进行开发后，再部署到对应的移动端上进行调试，部署的方式主要有在对应服务端的测试服务器上进行部署或者在移动端上手动查询本地ip以及手动输入开发端的调试链接。然而开发调试是一个不断往复的过程，这就导致每次重新进行调试时就需要重新部署或者重新输入新的调试链接，需要耗费大量开发调试人员的不必要的工作精力。
3.换言之，目前针对移动端的web开发过程的调试没有稳定易用的方案，存在编译慢、部署久、调试难等诸多问题，进而影响了移动端web的开发效率。


技术实现要素：

4.本技术方案提供一种快速同步开发端和移动端的调试方法、装置及应用，可在移动端和开发端之间实现快速的同步调试，不受同一片局域网的限制的同时可以解决调试效率低下的问题。
5.为实现以上目的，本技术方案提供一种快速同步开发端和移动端的调试方法，包括以下步骤：获取开发端的本地ip并将所述本地ip注入到所述开发端所在的开发环境中；基于所述本地ip以及当前开发页面的页面信息组装所述开发页面的页面地址，其中所述开发页面地址至少包括本地协议、本地ip、本地端口以及当前url路径，若所述开发页面为调试页面则在所述开发页面地址后添加调试标识；根据所述开发页面地址动态生成唯一识别信息，基于所述唯一识别信息构建悬浮于所述开发页面的可视化组件；当所述可视化组件检测到所述调试标识，且路由对应的环境是开发环境时显示所述唯一识别信息。
6.第二方面，本方案提供了一种快速同步开发端和移动端的调试装置，包括：ip获取单元，用于获取开发端的本地ip并将所述本地ip注入到所述开发端所在的开发环境中；地址封装单元，用于基于所述本地ip以及当前开发页面的页面信息组装所述开发页面的页面地址，其中所述开发页面地址至少包括本地协议、本地ip、本地端口以及当前url路径，若所述开发页面为调试页面则在所述开发页面地址后添加调试标识；可视化组件挂载单元，用于根据所述开发页面地址动态生成唯一识别信息，基于所述唯一识别信息构建悬浮于所述开发页面的可视化组件；当所述可视化组件检测到所述
调试标识，且路由对应的环境是开发环境时显示所述唯一识别信息。
7.第三方面，本方案提供了一种电子装置，包括存储器和处理器，所述存储器中存储有计算机程序，所述处理器被设置为运行所述计算机程序以执行所述的快速同步开发端和移动端的调试方法。
8.第四方面，本方案提供了一种可读存储介质，所述可读存储介质中存储有计算机程序，所述计算机程序包括用于控制过程以执行过程的程序代码，所述过程包括所述的快速同步开发端和移动端的调试方法。
9.相较现有技术，本技术方案具有以下特点和有益效果：本方案获取开发端的本地ip并将其全局注入到开发环境中，基于本地ip、开发页面的页面信息包装页面地址，将页面地址包装成可挂载在页面上的组件，若需要对某个开发页面进行调试则在当前开发页面的页面路径后添加调试标识，当组件识别到调试标识则在页面上展示所述组件，移动端可通过扫码或者复制获取所述组件的方式获取开发页面的地址，进而实现开发端和移动端的快速同步调试。不需要移动端的调试人员人为地往复输入页面地址，极大程度地提高了调试效率。
附图说明
10.此处所说明的附图用来提供对本技术的进一步理解，构成本技术的一部分，本技术的示意性实施例及其说明用于解释本技术，并不构成对本技术的不当限定。在附图中：图1是根据本方案的实施例的快速同步开发端和移动端的调试方法的流程示意图；图2是根据本方案的实施例的调试界面效果示意图；图3是根据本方案的实施例的快速同步开发端和移动端的调试装置的框架示意图；图4是本方案的电子设备的示意图。
具体实施方式
11.这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本说明书一个或多个实施例相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本说明书一个或多个实施例的一些方面相一致的装置和方法的例子。
12.需要说明的是：在其他实施例中并不一定按照本说明书示出和描述的顺序来执行相应方法的步骤。在一些其他实施例中，其方法所包括的步骤可以比本说明书所描述的更多或更少。此外，本说明书中所描述的单个步骤，在其他实施例中可能被分解为多个步骤进行描述；而本说明书中所描述的多个步骤，在其他实施例中也可能被合并为单个步骤进行描述。
13.实施例一如图1所示，本技术方案提供了一种快速同步开发端和移动端的调试方法，包括以下步骤：
获取开发端的本地ip并将所述本地ip注入到所述开发端所在的开发环境中；基于所述本地ip以及当前开发页面的页面信息组装所述开发页面的页面地址，其中所述开发页面地址至少包括本地协议、本地ip、本地端口以及当前url路径，若所述开发页面为调试页面则在所述开发页面地址后添加调试标识；根据所述开发页面地址动态生成唯一识别信息，基于所述唯一识别信息构建悬浮于所述开发页面的可视化组件；当所述可视化组件检测到所述调试标识，且路由对应的环境是开发环境时显示所述唯一识别信息。值得一提的是，本方案通过将开发端的开发ip和调试页面的页面信息包装成唯一识别信息，移动端的调试人员通过识别所述唯一识别信息即可快速同步调试页面，且可以同时同步多个移动端以及开发端的任何修改，极大提高调试效率。另外，本方案的调试方法涉及的实现方法包装成调试组件的形式，用户只需要安装组件插件后即可实现开发端和移动端的快速同步调试。
14.在本方案的一实施例中，在“获取开发端的本地ip”步骤中，在开发端的开发环境中安装nodejs环境，通过nodejs内置的os库遍历开发环境的路由表，获取开发端的本地ip。
15.在“所述本地ip注入到所述开发端所在的开发环境中”步骤中，通过ip注入工具将所述本地ip注入到所述开发环境中，以在所述开发环境的全局对象中获取到所述本地ip。
16.在本方案的实施例中，ip注入工具包括但不限于webpack或者vite。当ip注入工具为webpack时，webpack将本地ip作为process.env的内容，通过defineplugin插件全局注入到所述开发环境中。示例如下：new webpack.defineplugin({
ꢀꢀꢀꢀꢀꢀ
'process.env': {ip: ip}
ꢀꢀ
})。
17.当ip注入工具为vite时，vite将本地ip通过define的方式全局注入到所述开发环境中。示例如下：define: {
ꢀꢀꢀꢀ
vite_dev_ip: json.stringify(ip)
ꢀꢀ
}。
18.值得一提的是，本方案可基于hmr框架开发出快速同步开发端和移动端的调试功能，故可采用hmr框架（比如webpack或vite）实现本地ip在开发环境中的全局注入。
19.在“基于所述本地ip以及当前开发页面的页面信息组装所述开发页面的页面地址”步骤中，开发人员在开发端上进行页面的开发，所述开发页面的页面信息包括本地协议、本地端口以及当前url路径。并不是所有的开发页面都需要被调试，若所述开发页面为调试页面的话，则在所述页面地址上添加所述调试标识。所述调试标识为需调试的开发页面的url的query参数，可根据开发人员的需求进行自定义。本方案通过调试标识来判断当前开发页面是否需要调试，若需要调试的页面就添加调试标识。
20.在一具体实施例中，所述调试标识添加在所述当前url路径后。若当前开发页面为调试页面，则开发人员在当前开发页面的页面路径后添加调试路径。
21.在“根据所述开发页面地址动态生成唯一识别信息，基于所述唯一识别信息构建悬浮于所述调试页面的可视化组件”步骤中，所述唯一识别信息包括但不限于唯一识别二
维码以及唯一识别地址，所述唯一识别二维码和/或所述唯一识别地址均包括所述开发页面地址。
22.当所述唯一识别信息为唯一识别二维码时，所述可视化组件显示的内容为所述唯一识别二维码，移动端扫码所述唯一识别二维码即可获取对应的页面地址进而获取需要调试的开发页面；当所述唯一识别信息为唯一识别地址时，所述可视化组件显示的内容为对应所述唯一识别地址的可复制的链接，移动端通过复制所述链接获取对应的页面地址进而获取调需要调试的开发页面。本方案的可视化组件设计为可关闭组件，其仅在检测到路由中配置由调试标识时才显示所述可视化组件。这样设计的好处在于:仅在开发人员共享的调试页面上显示唯一识别信息，而其他不需要调试的开发页面上无需也不必展示所述唯一识别信息，也在可控范围内控制了开发端的信息安全性。
23.具体的，在“当所述可视化组件检测到路由含有所述调试标识，且路由对应的环境是开发环境时显示所述唯一识别信息”步骤中，所述可视化组件检测所述当前url路径中是否含有所述调试标识，若有的话且路由对应的环境是开发环境的话，则在当前开发页面上挂载可视化组件。
24.具体的，本方案通过开发环境的全局变量判断是否为开发环境。若是开发环境的话，webpack会注入 process.env.node_env=development；vite 会注入import.meta.env.mode=development。
25.如图2所示，图2中的debug=1为调试标记，所述可视化组件同时包括唯一识别二维码和唯一识别地址，此时当前开发页面上挂载有唯一识别二维码和唯一识别地址。
26.在当前开发页面上显示所述可视化组件之后包括步骤：移动端扫描所述唯一识别二维码以直接打开需要调试的开发页面，或者点击复制所述唯一识别地址以将所述需要调试的开发页面的地址利用移动端打开。
27.值得一提的是，本方案提供的唯一识别地址为可复制的链接，本方案通过vue-clipboard2组件实现上述功能。具体的有两种实现方式：第一、直接复制唯一识别地址；第二，支持开发端采用密令的方式加载所述唯一识别地址至移动端的webview中。
28.另外，值得一提的是，本方案的移动端和开发端需要在同一个局域网内，这样可以保证开发端和移动端均可访问本地ip。
29.另外，如前所述，本方案是以组件的形式封装得到，对应的组件内内置了移动调试组件vconsole，当移动端根据所述唯一识别二维码或者所述唯一识别地址打开需要调试的开发页面后，可通过移动调试组件vconsole进行页面的调试。
30.实施例二如图3所示，本方案提供了一种快速同步开发端和移动端的调试装置，包括：ip获取单元，用于获取开发端的本地ip并将所述本地ip注入到所述开发端所在的开发环境中；地址封装单元，用于基于所述本地ip以及当前开发页面的页面信息组装所述开发页面的页面地址，其中所述开发页面地址至少包括本地协议、本地ip、本地端口以及当前url路径，若所述开发页面为调试页面则在所述开发页面地址后添加调试标识；可视化组件挂载单元，用于根据所述开发页面地址动态生成唯一识别信息，基于所述唯一识别信息构建悬浮于所述开发页面的可视化组件；当所述可视化组件检测到所述
调试标识，且路由对应的环境是开发环境时显示所述唯一识别信息。
31.关于该实施例二中同于实施例一的技术特征同于实施例一的描述，本实施例在此不进行累赘说明。
32.实施例三本实施例还提供了一种电子装置，参考图4，包括存储器404和处理器402，该存储器404中存储有计算机程序，该处理器402被设置为运行计算机程序以执行上述任一项快速开发开发端和移动端的开发方法的实施例中的步骤。
33.具体地，上述处理器402可以包括中央处理器（cpu），或者特定集成电路（applicationspecificintegratedcircuit，简称为asic），或者可以被配置成实施本技术实施例的一个或多个集成电路。
34.其中，存储器404可以包括用于数据或指令的大容量存储器404。举例来说而非限制，存储器404可包括硬盘驱动器（harddiskdrive，简称为hdd）、软盘驱动器、固态驱动器（solidstatedrive，简称为ssd）、闪存、光盘、磁光盘、磁带或通用串行总线（universalserialbus，简称为usb）驱动器或者两个或更多个以上这些的组合。在合适的情况下，存储器404可包括可移除或不可移除（或固定）的介质。在合适的情况下，存储器404可在数据处理装置的内部或外部。在特定实施例中，存储器404是非易失性（non-volatile）存储器。在特定实施例中，存储器404包括只读存储器（read-onlymemory，简称为rom）和随机存取存储器（randomaccessmemory，简称为ram）。在合适的情况下，该rom可以是掩模编程的rom、可编程rom（programmableread-onlymemory，简称为prom）、可擦除prom（erasableprogrammableread-onlymemory，简称为eprom）、电可擦除prom（electricallyerasableprogrammableread-onlymemory，简称为eeprom）、电可改写rom（electricallyalterableread-onlymemory，简称为earom）或闪存（flash）或者两个或更多个以上这些的组合。在合适的情况下，该ram可以是静态随机存取存储器（staticrandom-accessmemory，简称为sram）或动态随机存取存储器（dynamicrandomaccessmemory，简称为dram），其中，dram可以是快速页模式动态随机存取存储器404（fastpagemodedynamicrandomaccessmemory，简称为fpmdram）、扩展数据输出动态随机存取存储器（extendeddateoutdynamicrandomaccessmemory，简称为edodram）、同步动态随机存取内存（synchronousdynamicrandom-accessmemory，简称sdram）等。
35.存储器404可以用来存储或者缓存需要处理和/或通信使用的各种数据文件，以及处理器402所执行的可能的计算机程序指令。
36.处理器402通过读取并执行存储器404中存储的计算机程序指令，以实现上述实施例中的任意一种快速开发开发端和移动端的开发方法的实施过程。
37.可选地，上述电子装置还可以包括传输设备406以及输入输出设备408，其中，该传输设备406和上述处理器402连接，该输入输出设备408和上述处理器402连接。
38.传输设备406可以用来经由一个网络接收或者发送数据。上述的网络具体实例可包括电子装置的通信供应商提供的有线或无线网络。在一个实例中，传输设备包括一个网络适配器（network interface controller，简称为nic），其可通过基站与其他网络设备相连从而可与互联网进行通讯。在一个实例中，传输设备406可以为射频（radio frequency，简称为rf）模块，其用于通过无线方式与互联网进行通讯。
39.输入输出设备408用于输入或输出信息。在本实施例中，输出的信息可以是唯一识别信息。
40.可选地，在本实施例中，上述处理器402可以被设置为通过计算机程序执行以下步骤：获取开发端的本地ip并将所述本地ip注入到所述开发端所在的开发环境中；基于所述本地ip以及当前开发页面的页面信息组装所述开发页面的页面地址，其中所述开发页面地址至少包括本地协议、本地ip、本地端口以及当前url路径，若所述开发页面为调试页面则在所述开发页面地址后添加调试标识；根据所述开发页面地址动态生成唯一识别信息，基于所述唯一识别信息构建悬浮于所述开发页面的可视化组件；当所述可视化组件检测到所述调试标识，且路由对应的环境是开发环境时显示所述唯一识别信息。
41.需要说明的是，本实施例中的具体示例可以参考上述实施例及可选实施方式中所描述的示例，本实施例在此不再赘述。
42.通常，各种实施例可以以硬件或专用电路、软件、逻辑或其任何组合来实现。本发明的一些方面可以以硬件来实现，而其他方面可以以可以由控制器、微处理器或其他计算设备执行的固件或软件来实现，但是本发明不限于此。尽管本发明的各个方面可以被示出和描述为框图、流程图或使用一些其他图形表示，但是应当理解，作为非限制性示例，本文中描述的这些框、装置、系统、技术或方法可以以硬件、软件、固件、专用电路或逻辑、通用硬件或控制器或其他计算设备或其某种组合来实现。
43.本发明的实施例可以由计算机软件来实现，该计算机软件由移动设备的数据处理器诸如在处理器实体中可执行，或者由硬件来实现，或者由软件和硬件的组合来实现。包括软件例程、小程序和/或宏的计算机软件或程序(也称为程序产品)可以存储在任何装置可读数据存储介质中，并且它们包括用于执行特定任务的程序指令。计算机程序产品可以包括当程序运行时被配置为执行实施例的一个或多个计算机可执行组件。一个或多个计算机可执行组件可以是至少一个软件代码或其一部分。另外，在这一点上，应当注意，如图中的逻辑流程的任何框可以表示程序步骤、或者互连的逻辑电路、框和功能、或者程序步骤和逻辑电路、框和功能的组合。软件可以存储在诸如存储器芯片或在处理器内实现的存储块等物理介质、诸如硬盘或软盘等磁性介质、以及诸如例如dvd及其数据变体、cd等光学介质上。物理介质是非瞬态介质。
44.本领域的技术人员应该明白，以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。
45.以上实施例仅表达了本技术的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本技术范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本技术构思的前提下，还可以做出若干变形和改进，这些都属于本技术的保护范围。因此，本技术的保护范围应以所附权利要求为准。