一种快速同步开发端和移动端的调试方法、装置及应用制造方法及图纸

本方案提供一种快速同步开发端和移动端的调试方法、装置及应用，获取开发端的本地IP并将本地IP注入到所述开发端所在的开发环境中；基于本地IP以及当前开发页面的页面信息组装开发页面的页面地址，若开发页面为调试页面则在开发页面地址后添加调试标识；根据开发页面地址动态生成唯一识别信息，基于唯一识别信息构建悬浮于开发页面的可视化组件；当可视化组件检测到所述调试标识，且路由对应的环境是开发环境时显示所述唯一识别信息，以此方式实现了开发端和移动端的快速同步调试。不需要移动端的调试人员人为地往复输入页面地址，极大程度地提高了调试效率。程度地提高了调试效率。程度地提高了调试效率。

【技术实现步骤摘要】
一种快速同步开发端和移动端的调试方法、装置及应用


[0001]本申请涉及调试领域，特别涉及一种快速同步开发端和移动端的调试方法、装置及应用。

技术介绍

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

技术实现思路

[0004]本申请方案提供一种快速同步开发端和移动端的调试方法、装置及应用，可在移动端和开发端之间实现快速的同步调试，不受同一片局域网的限制的同时可以解决调试效率低下的问题。
[0005]为实现以上目的，本技术方案提供一种快速同步开发端和移动端的调试方法，包括以下步骤：获取开发端的本地IP并将所述本地IP注入到所述开发端所在的开发环境中；基于所述本地IP以及当前开发页面的页面信息组装所述开发页面的页面地址，其中所述开发页面地址至少包括本地协议、本地IP、本地端口以及当前url路径，若所述开发页面为调试页面则在所述开发页面地址后添加调试标识；根据所述开发页面地址动态生成唯一识别信息，基于所述唯一识别信息构建悬浮于所述开发页面的可视化组件；当所述可视化组件检测到所述调试标识，且路由对应的环境是开发环境时显示所述唯一识别信息。
[0006]第二方面，本方案提供了一种快速同步开发端和移动端的调试装置，包括：IP获取单元，用于获取开发端的本地IP并将所述本地IP注入到所述开发端所在的开发环境中；地址封装单元，用于基于所述本地IP以及当前开发页面的页面信息组装所述开发页面的页面地址，其中所述开发页面地址至少包括本地协议、本地IP、本地端口以及当前url路径，若所述开发页面为调试页面则在所述开发页面地址后添加调试标识；可视化组件挂载单元，用于根据所述开发页面地址动态生成唯一识别信息，基于所述唯一识别信息构建悬浮于所述开发页面的可视化组件；当所述可视化组件检测到所述
调试标识，且路由对应的环境是开发环境时显示所述唯一识别信息。
[0007]第三方面，本方案提供了一种电子装置，包括存储器和处理器，所述存储器中存储有计算机程序，所述处理器被设置为运行所述计算机程序以执行所述的快速同步开发端和移动端的调试方法。
[0008]第四方面，本方案提供了一种可读存储介质，所述可读存储介质中存储有计算机程序，所述计算机程序包括用于控制过程以执行过程的程序代码，所述过程包括所述的快速同步开发端和移动端的调试方法。
[0009]相较现有技术，本技术方案具有以下特点和有益效果：本方案获取开发端的本地IP并将其全局注入到开发环境中，基于本地IP、开发页面的页面信息包装页面地址，将页面地址包装成可挂载在页面上的组件，若需要对某个开发页面进行调试则在当前开发页面的页面路径后添加调试标识，当组件识别到调试标识则在页面上展示所述组件，移动端可通过扫码或者复制获取所述组件的方式获取开发页面的地址，进而实现开发端和移动端的快速同步调试。不需要移动端的调试人员人为地往复输入页面地址，极大程度地提高了调试效率。
附图说明
[0010]此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：图1是根据本方案的实施例的快速同步开发端和移动端的调试方法的流程示意图；图2是根据本方案的实施例的调试界面效果示意图；图3是根据本方案的实施例的快速同步开发端和移动端的调试装置的框架示意图；图4是本方案的电子设备的示意图。
具体实施方式
[0011]这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本说明书一个或多个实施例相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本说明书一个或多个实施例的一些方面相一致的装置和方法的例子。
[0012]需要说明的是：在其他实施例中并不一定按照本说明书示出和描述的顺序来执行相应方法的步骤。在一些其他实施例中，其方法所包括的步骤可以比本说明书所描述的更多或更少。此外，本说明书中所描述的单个步骤，在其他实施例中可能被分解为多个步骤进行描述；而本说明书中所描述的多个步骤，在其他实施例中也可能被合并为单个步骤进行描述。
[0013]实施例一如图1所示，本申请方案提供了一种快速同步开发端和移动端的调试方法，包括以下步骤：
获取开发端的本地IP并将所述本地IP注入到所述开发端所在的开发环境中；基于所述本地IP以及当前开发页面的页面信息组装所述开发页面的页面地址，其中所述开发页面地址至少包括本地协议、本地IP、本地端口以及当前url路径，若所述开发页面为调试页面则在所述开发页面地址后添加调试标识；根据所述开发页面地址动态生成唯一识别信息，基于所述唯一识别信息构建悬浮于所述开发页面的可视化组件；当所述可视化组件检测到所述调试标识，且路由对应的环境是开发环境时显示所述唯一识别信息。值得一提的是，本方案通过将开发端的开发IP和调试页面的页面信息包装成唯一识别信息，移动端的调试人员通过识别所述唯一识别信息即可快速同步调试页面，且可以同时同步多个移动端以及开发端的任何修改，极大提高调试效率。另外，本方案的调试方法涉及的实现方法包装成调试组件的形式，用户只需要安装组件插件后即可实现开发端和移动端的快速同步调试。
[0014]在本方案的一实施例中，在“获取开发端的本地IP”步骤中，在开发端的开发环境中安装nodejs环境，通过nodejs内置的os库遍历开发环境的路由表，获取开发端的本地IP。
[0015]在“所述本地IP注入到所述开发端所在的开发环境中”步骤中，通过IP注入工具将所述本地IP注入到所述开发环境中，以在所述开发环境的全局对象中获取到所述本地IP。
[0016]在本方案的实施例中，IP注入工具包括但不限于webpack或者vite。当IP注入工具为webpack时，webpack将本地IP作为process.env的内容，通过DefinePlugin插件全局注入到所述开发环境中。示例如下：new webpack.DefinePlugin({
ꢀꢀꢀꢀꢀꢀ
'process.env': {IP: ip}
ꢀꢀ
})。
[0017]当IP注入工具为vite时，vite将本地IP通过define的方式全局注入到所述开发环境中。示例如下：define: 本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种快速同步开发端和移动端的调试方法，其特征在于，包括以下步骤：获取开发端的本地IP并将所述本地IP注入到所述开发端所在的开发环境中；基于所述本地IP以及当前开发页面的页面信息组装所述开发页面的页面地址，其中所述开发页面地址至少包括本地协议、本地IP、本地端口以及当前url路径，若所述开发页面为调试页面则在所述开发页面地址后添加调试标识；根据所述开发页面地址动态生成唯一识别信息，基于所述唯一识别信息构建悬浮于所述开发页面的可视化组件；当所述可视化组件检测到所述调试标识，且路由对应的环境是开发环境时显示所述唯一识别信息。2.根据权利要求1所述的快速同步开发端和移动端的调试方法，其特征在于，通过IP注入工具将所述本地IP注入到所述开发环境中，IP注入工具包括但不限于webpack或者vite。3.根据权利要求1所述的快速同步开发端和移动端的调试方法，其特征在于，所述调试标识为需要调试的开发页面的url的query参数。4.根据权利要求1所述的快速同步开发端和移动端的调试方法，其特征在于，所述唯一识别信息包括但不限于唯一二维码以及唯一识别地址，所述唯一二维码和/或所述唯一识别地址均包括所述开发页面地址。5.根据权利要求4所述的快速同步开发端和移动端的调试方法，其特征在于，当所述唯一识别信息为唯一识别二维码时，所述可视化组件显示的内容为所述唯一识别二维码，移动端扫码所述唯一识别二维码获取对应的开发页面地址进而获取需要调试的开发页面。6.根据权利要求4所述的快速同步开发端和移动端的调...

【专利技术属性】
技术研发人员：马技超，谭美红，
申请(专利权)人：杭州菲助科技有限公司，
类型：发明
国别省市：