[发明专利]前端项目调试方法及系统

说明书

一种前端项目调试方法及系统，涉及前端开发领域，可应用于金融领域和其他领域，所述方法包含：监听浏览器的服务端口获取用户输入的网站中待调试页面的页面信息；根据所述页面信息于预设配置文件中获得所述页面信息对应的入口文件，根据所述入口文件提取待调试页面的网页代码；根据所述浏览器属性将所述网页代码编译打包为对应属性的显示代码，将所述显示代码提供至浏览器显示输出。以及，获取用户输入的页面参数，根据所述页面参数于预设配置文件中获得所述页面参数对应的入口文件；根据所述入口文件提取待调试页面的网页代码，根据所述浏览器属性将所述网页代码编译打包为对应属性的显示代码；通过浏览器将所述显示代码渲染后显示输出。

技术领域

本申请涉及前端开发领域，可应用于金融领域和其他领域，尤指一种前端项目调试方法及系统。

背景技术

在前端领域，通过工程化手段对项目进行编译打包的场景越来越多，甚至已经成为现代前端项目主流的开发方式。对前端项目进行编译、打包的目的在于：为了提升开发效率，现在越来越多的采用高级编程语言的新特性来研发前端网站，但这些高级开发语言对低版本浏览器的兼容性并不友好，所以需要使用工具来自动把代码转换成低版本浏览器能识别的通用代码。现今主流的三大前端开发框架Vue、React、Angular都采用组件化开发的模式，也就是会把一个页面拆分成很多个小的组件来开发，可以达到多人并行开发每个组件，以及提升组件复用率的目的。但是浏览器同样也不支持这种组件化的代码识别模式，所以需要使用工具把这种组件化模式开发的代码转换成浏览器能识别的代码。还有很多原因让们编译和打包前端代码，如：把代码压缩以减小文件大小，从而降低网络耗时，提升网页打开速度，等等。

现有的前端项目开发、调试过程如下：开发人员写完代码之后，使用工程化打包工具(如：webpack)把项目中所有的代码进行编译、代码压缩、然后打包，转换成浏览器能识别的可运行代码。在这些编译打包完成后，工程化打包工具会在电脑上启动一个开发服务器，然后开发人员就可以打开浏览器输入网址，查看开发出的网站效果，然后再持续的进行调试和修改。时序图如图1所示，其流程包含：1、开发人员在开发工具中输入命令启动构建工具；2、构建工具会遍历项目中所有的前端页面依次对所有页面进行“编译、打包”，有多少页面都会依次顺序执行，项目中页面数量越多，过程耗时越久；3、当“编译、打包”完成后，构建工具会启动“开发服务器”；4、“开发服务器”启动成功后，开发人员就可以在浏览器中打开页面查看效果；上述过程是打开一个页面的整体流程。如果开发人员修改了一行代码，需要重新预览一下效果。那么就需要重复1～4步，如果有100个页面，那么几十另外99个页面没有做任何变化，也需要把它们都“编译、打包”，才能看到另一个页面的预览效果。

现有的技术方案，虽然能有效地把高级语言代码转换成浏览器可运行的代码。但是这种方案存在一个重大缺陷：如果网站只有一个页面，那么这种方案还暴露不出问题。但实际上网站往往会有几十甚至上百个页面，会有如下问题：如果这个网站中有100个页面，使用工程化的方式编译、打包一个页面需要5秒钟，那么这100个页面就是500秒，也就是8分钟多。这是什么概念呢，也就是开发人员开发出网站，编译打包需要8分钟，然后才能在浏览器打开网页看到效果。并且，开发人员在网站开发过程中，需要频繁的修改代码，然后再重新便宜、打包，再到浏览器里查看运行效果。而如果每次修改代码后都要等8分钟才能看到效果，这将是开发人员的噩梦。在实际的网站开发过程中，即使项目里有100个页面，对于当前这个开发人员来说，他在当前这段时间内只会对某一两个页面进行开发和调试工作，不可能同时做这100个页面，也就是说，并需要同时把这100个页面都进行编译、打包，但是现有的开发、调试方案并没有对此做出改善。

发明内容

本申请目的在于提供一种前端项目调试方法及系统，既能够快速把代码编译、打包成浏览器识别代码的需求，又能解决现有技术“编译、打包效率低”、“不能按需要打包”的问题。