一种基于浏览器插件的前后端调试系统及其使用方法与流程

本发明涉及计算机，具体为一种基于浏览器插件的前后端调试系统及其使用方法。

背景技术：

1、浏览器插件是程序的运行有其自己运行的进程、方式等，其插件只是对其进行起一个补充作用的程序，为保证插件与浏览器的适配，在正式应用前需要对不同的插件进行调试处理。

2、如中国专利公开号cn114356433b提供的“一种代码注入式浏览器插件自动运行方法及系统”，方法包括如下步骤：步骤s10、创建一携带自动化代码的rpa以及一插件；步骤s20、在浏览器中载入插件，获取浏览器的调试权限以及插件与rpa的通信权限；步骤s30、rpa基于调试权限打开插件以及开发者工具，通过开发者工具将自动化代码注入插件，得到自动化插件；步骤s40、自动化插件基于通信权限接收rpa发送的操作指令，进而执行自动化操作。

3、上述专利中，虽然通过创建自动化代码和插件解决了浏览器插件适用范围和功能性不理想的问题，但是插件在进行前后端调试后，缺少对调试结果的反馈阶段，从而无法根据反馈结果快速判断程序实体中是否包含缺陷，若程序实体中包含缺陷时，未保证插件的使用需要对缺陷优化处理，此时定位缺陷位置时，需要对程序逐个查找，增加了检索的复杂程度。

4、鉴于此，本技术拟提出一种基于浏览器插件的前后端调试系统及其使用方法。

技术实现思路

1、本发明的目的在于提供一种基于浏览器插件的前后端调试系统及其使用方法，以解决上述问题。

2、为实现上述目的，本发明提供如下技术方案：

3、一种基于浏览器插件的前后端调试系统，包括基础框架构建单元、数据架构应用单元、浏览器插件开发单元和调试与优化单元；

4、所述基础框架构建单元用于基于b/s架构，搭建信息处理平台，将各项业务需求与数据类型进行抽象处理，建立关系模型，根据关系模型设计数据结构和业务逻辑，通过该平台提供数据存储、处理和业务逻辑功能，同时对外提供web服务；

5、所述数据架构应用单元用于将基础框架构建单元中构建后的框架进行仿真实验，若实验结果可满足架构预设功能，则将架构加载到系统中应用；

6、所述浏览器插件开发单元用于开发适配当前浏览器的插件，对插件进行测试和使用；

7、所述调试与优化单元用于对插件进行前后端调试，根据反馈结果对前后端以及数据库的性能进行优化处理。

8、进一步的，所述基础框架构建单元包括前端构建模块、后端构建模块、前后端分离模块和分离优化模块；

9、所述前端构建模块利用基于react的ant design框架搭接前端，通过浏览器对html、java文件快速解析处理并进行渲染，呈现视觉内容；

10、所述后端构建模块使用asp.net core搭建webapi应用实现后端构建，提供数据处理和业务逻辑功能，建立后端数据库，并通过webapi向前端提供调用接口；

11、所述前后端分离模块用于后端提供restful api，前端发送api请求，获取数据渲染页面，对前端进行模拟测试，后端采用junit进行api单元测试，测试完成后进行对接，利用nginx反向代理，完成前后端分离；

12、所述分离优化模块用于对前后端分离模块输出的分离结果进行查询和比较，经过比较后对分离结果优化处理。

13、进一步的，所述分离优化模块对前后端分离进行优化时，采用随机搜索法。

14、进一步的，所述浏览器插件开发单元包括用户需求获取模块、插件自动生成模块、插件运行测试模块和测试结果输出模块；

15、所述用户需求获取模块用于通过交互层显示和接收用户点击事件，输出事件响应结果，完成对用户请求事件的处理，获取用户需求数据；

16、所述插件自动生成模块用于接收用户需求获取模块中的用户数据，进行可行性分析，然后自动生成满足用户需求的浏览器插件，插件功能包括图像信息上传、信息识别和信息导出；

17、所述插件运行测试模块用于对插件自动生成模块中生成的插件快速激活，然后对插件进行图像信息识别和文字导出测试，测试结果输入到测试结果输出模块中；

18、所述测试结果输出模块用于将插件运行测试模块中的测试结果生成测试报告。

19、进一步的，所述调试与优化单元包括前端调试模块、后端调试模块、调试反馈模块和性能优化模块；

20、所述前端调试模块用于借助于浏览器的调试能力对插件进行前端调试，调试结果发送到调试反馈模块中；

21、所述后端调试模块利用cloudide本身对插件进行后端调试，将调试结果发送到调试反馈模块中；

22、所述调试反馈模块用于比对前后端调试前后的数据，利用缺陷定位矩阵判断插件的程序实体是否包含缺陷，若存在缺陷则对缺陷进行定位并向性能优化模块发送信号；

23、所述性能优化模块用于接收调试反馈模块发送的信号，对当前插件优化处理。

24、进一步的，所述前端调试模块在对前端优化时，具体步骤为：

25、a1、明确需要调试的代码所在函数位置，切换到调试实例，调出开发者工具；

26、a2、在页面列表中查找插件首页位置，逐级向下展开，输入搜索命令，在搜索框中输入需要调试的函数名称，找到函数并在函数体内需要调试的位置打断点；

27、a3、点击浏览器的刷新键，重新加载页面命中上述步骤中打断的点，完成前端调试。

28、进一步的，所述性能优化模块在对插件优化处理时还包括：

29、b1、前端优化：通过合并和压缩文件，使用图片精灵和内联图像减少http请求，使用cdn加速，启用缓存，延迟加载非视口内容，对首屏加载提速；

30、b2、后端优化：使用缓存、异步处理对代码优化，调整服务器参数，使用负载均衡、垂直和水平扩展，启用缓存系统，减少对数据库的访问次数，利用压缩软件在数据输出时压缩处理；

31、b3、数据库优化：依次对索引和查询进行优化，使用分页查询功能减少查询后的返回数据量，对数据插入、更新和删除时进行批量处理。

32、进一步的，在对索引优化时，使用lucene检索引擎对当前文件内容进行分词处理，处理后基于分词结果建立索引。

33、进一步的，在所述调试反馈模块判断程序是否包含缺陷时，利用矩阵数据计算每个程序实体的可疑度，根据可疑度的降序依次对程序实体进行判断，缺陷定位矩阵的表达式如下：

34、

35、式中，左侧矩阵表示包含l个程序实体的程序经过k个测试用例运行的覆盖情况，右侧的矩阵记录了k个测试用例的执行结果，即执行成功或失败。

36、一种基于浏览器插件的前后端调试系统的使用方法，包括以下步骤：

37、s1、通过基础框架构建单元构建系统的基础框架，在前后端构建后进行分离处理，然后对分离结果进行快速优化，优化后将数据架构在系统中应用；

38、s2、利用用户需求获取模块获取用户需求，根据需求构建浏览器插件，对生成的插件进行性能测试，判断插件运行时是否存在异常；

39、s3、对插件的前后端进行调试，调试结果输入到调试反馈模块中，备份到本地和云端数据库中存储；

40、s4、根据调试结果判断程序实体是否包含缺陷，对缺陷定位，然后启动对插件性能的优化处理。

41、本发明的有益效果：

42、1、本发明中，通过插件运行测试模块，可在插件生成后对插件进行测试，从而保证插件在系统中的正常运行，通过对调试反馈模块获取前后端的调试结果，将调试结果与数据库中标准数据进行对比，根据对比结果判断插件是否需要进行优化处理，然后将反馈结果的相关数据输入矩阵计算，可快速判断程序实体中的缺陷并进行定位，由于对程序缺陷的定位较为精准，因此无需对程序主体逐个查找，降低了缺陷检索的复杂程度，通过性能优化模块可依次对插件的前端、后端以及数据库进行优化处理，可保证插件在系统中的使用效果。

43、2、本发明中，通过前端和后端的建立，可利用后端为前端提高数据支撑，利用前端实现数据的显示和交互，辅助实现基础框架的功能，通过前后端分离模块可摆脱插件前后端架构之间的相互依赖，降低系统的耦合度，提升开发效率和部署效率，提高系统的协同性，加快页面加载速度，减少网络延迟，提高用户体验，减少资源消耗，从容提高系统的整体性能，通过匹配程度较高的索引可提高对数据库的查询速度，可降低查询延迟程度，辅助对后端数据库的调试，从而保证系统在使用时的高效响应。