前端项目调试方法及系统技术方案

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

【技术实现步骤摘要】
前端项目调试方法及系统


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

技术介绍

[0002]在前端领域，通过工程化手段对项目进行编译打包的场景越来越多，甚至已经成为现代前端项目主流的开发方式。对前端项目进行编译、打包的目的在于：为了提升开发效率，现在越来越多的采用高级编程语言的新特性来研发前端网站，但这些高级开发语言对低版本浏览器的兼容性并不友好，所以需要使用工具来自动把代码转换成低版本浏览器能识别的通用代码。现今主流的三大前端开发框架Vue、React、Angular都采用组件化开发的模式，也就是会把一个页面拆分成很多个小的组件来开发，可以达到多人并行开发每个组件，以及提升组件复用率的目的。但是浏览器同样也不支持这种组件化的代码识别模式，所以需要使用工具把这种组件化模式开发的代码转换成浏览器能识别的代码。还有很多原因让们编译和打包前端代码，如：把代码压缩以减小文件大小，从而降低网络耗时，提升网页打开速度，等等。
[0003]现有的前端项目开发、调试过程如下：开发人员写完代码之后，使用工程化打包工具(如：webpack)把项目中所有的代码进行编译、代码压缩、然后打包，转换成浏览器能识别的可运行代码。在这些编译打包完成后，工程化打包工具会在电脑上启动一个开发服务器，然后开发人员就可以打开浏览器输入网址，查看开发出的网站效果，然后再持续的进行调试和修改。时序图如图1所示，其流程包含：1、开发人员在开发工具中输入命令启动构建工具；2、构建工具会遍历项目中所有的前端页面依次对所有页面进行“编译、打包”，有多少页面都会依次顺序执行，项目中页面数量越多，过程耗时越久；3、当“编译、打包”完成后，构建工具会启动“开发服务器”；4、“开发服务器”启动成功后，开发人员就可以在浏览器中打开页面查看效果；上述过程是打开一个页面的整体流程。如果开发人员修改了一行代码，需要重新预览一下效果。那么就需要重复1～4步，如果有100个页面，那么几十另外99个页面没有做任何变化，也需要把它们都“编译、打包”，才能看到另一个页面的预览效果。
[0004]现有的技术方案，虽然能有效地把高级语言代码转换成浏览器可运行的代码。但是这种方案存在一个重大缺陷：如果网站只有一个页面，那么这种方案还暴露不出问题。但实际上网站往往会有几十甚至上百个页面，会有如下问题：如果这个网站中有100个页面，使用工程化的方式编译、打包一个页面需要5秒钟，那么这100个页面就是500秒，也就是8分钟多。这是什么概念呢，也就是开发人员开发出网站，编译打包需要8分钟，然后才能在浏览器打开网页看到效果。并且，开发人员在网站开发过程中，需要频繁的修改代码，然后再重新便宜、打包，再到浏览器里查看运行效果。而如果每次修改代码后都要等8分钟才能看到效果，这将是开发人员的噩梦。在实际的网站开发过程中，即使项目里有100个页面，对于当前这个开发人员来说，他在当前这段时间内只会对某一两个页面进行开发和调试工作，不可能同时做这100个页面，也就是说，并需要同时把这100个页面都进行编译、打包，但是现
有的开发、调试方案并没有对此做出改善。

技术实现思路

[0005]本申请目的在于提供一种前端项目调试方法及系统，既能够快速把代码编译、打包成浏览器识别代码的需求，又能解决现有技术“编译、打包效率低”、“不能按需要打包”的问题。
[0006]为达上述目的，本申请所提供的前端项目调试方法，具体包含：监听浏览器的服务端口获取用户输入的网站中待调试页面的页面信息；根据所述页面信息于预设配置文件中获得所述页面信息对应的入口文件，根据所述入口文件提取待调试页面的网页代码；根据所述浏览器属性将所述网页代码编译打包为对应属性的显示代码，将所述显示代码提供至浏览器显示输出。
[0007]在上述前端项目调试方法中，可选的，所述监听浏览器的服务端口获取用户输入的网站中待调试页面的页面信息包含：通过Node.js开启浏览器服务端口的监听配置，获取用户输入的网站中待调试页面的页面信息。
[0008]本申请还提供一种前端项目调试方法，所述方法包含：获取用户输入的页面参数，根据所述页面参数于预设配置文件中获得所述页面参数对应的入口文件；根据所述入口文件提取待调试页面的网页代码，根据所述浏览器属性将所述网页代码编译打包为对应属性的显示代码；通过浏览器将所述显示代码渲染后显示输出。
[0009]在上述前端项目调试方法中，可选的，通过浏览器将所述显示代码渲染后显示输出包含：监听浏览器的服务端口获取用户输入的所述页面参数所对应的页码信息；根据所述页面信息通过浏览器将所述显示代码渲染后显示输出。
[0010]本申请还提供一种前端项目调试系统，所述系统包含构建工具、开发服务器和配置文件存储库；所述开发服务器用于监听浏览器的服务端口获取用户输入的网站中待调试页面的页面信息；以及，将接收到的显示代码渲染到浏览器中显示输出；所述构建工具用于根据所述页面信息于所述配置文件存储库中获得所述页面信息对应的入口文件，根据所述入口文件提取待调试页面的网页代码，根据所述浏览器属性将所述网页代码编译打包为对应属性的显示代码，将所述显示代码提供至所述开发服务器；所述配置文件存储库用于存储网站的配置文件，所述配置文件包含入口文件和多个页面的网页代码。
[0011]在上述前端项目调试系统中，可选的，所述构建工具还包含：获取用户输入的页面参数，根据所述页面参数于所述配置文件存储库中通过对应的入口文件提取待调试页面的网页代码，根据所述浏览器属性将所述网页代码编译打包为对应属性的显示代码，将所述显示代码提供至所述开发服务器。
[0012]在上述前端项目调试系统中，可选的，所述开发服务器还包含监听模块，所述监听模块用于通过Node.js开启浏览器服务端口监听，通过监听浏览器服务端口获得用户输入的网站中待调试页面的页面信息。
[0013]在上述前端项目调试系统中，可选的，所述开发服务器通过Node.js的套接字与所述构建工具建立长连接。
[0014]本申请还提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述方法。
[0015]本申请还提供一种计算机可读存储介质，所述计算机可读存储介质存储有执行上述方法的计算机程序。
[0016]本申请的有益技术效果在于：在浏览器输入网页地址后，才会对这个网页的代码进行“编译、打包”，可以很大的省去对不必要的代码编译、打包耗时，页面越多，效果越明显。开发者可以指定一个或多个页面进行编译打包，这样可以提前把你想要看到的页面进行构建，构建完成后就能立刻在浏览器看到效果。好处也很明显，就是不用全量构建所有页面，省时省力。可以应用于各类多页面前端项目的场景，是一套灵活的大幅提升前端项目开发、调试效率的方法和实现，具有很大的市场推广空间。
附图说明
[0017]此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，并不本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种前端项目调试方法，其特征在于，所述方法包含：监听浏览器的服务端口获取用户输入的网站中待调试页面的页面信息；根据所述页面信息于预设配置文件中获得所述页面信息对应的入口文件，根据所述入口文件提取待调试页面的网页代码；根据所述浏览器属性将所述网页代码编译打包为对应属性的显示代码，将所述显示代码提供至浏览器显示输出。2.根据权利要求1所述的前端项目调试方法，其特征在于，所述监听浏览器的服务端口获取用户输入的网站中待调试页面的页面信息包含：通过Node.js开启浏览器服务端口的监听配置，获取用户输入的网站中待调试页面的页面信息。3.一种前端项目调试方法，其特征在于，所述方法包含：获取用户输入的页面参数，根据所述页面参数于预设配置文件中获得所述页面参数对应的入口文件；根据所述入口文件提取待调试页面的网页代码，根据浏览器属性将所述网页代码编译打包为对应属性的显示代码；通过浏览器将所述显示代码渲染后显示输出。4.根据权利要求3所述的前端项目调试方法，其特征在于，通过浏览器将所述显示代码渲染后显示输出包含：监听浏览器的服务端口获取用户输入的所述页面参数所对应的页码信息；根据所述页面信息通过浏览器将所述显示代码渲染后显示输出。5.一种前端项目调试系统，其特征在于，所述系统包含构建工具、开发服务器和配置文件存储库；所述开发服务器用于监听浏览器的服务端口获取用户输入的网站中待调试页面的页面信息；以及，将接收到的显示代码渲染到浏览器中...

【专利技术属性】
技术研发人员：尤海洋，
申请(专利权)人：中国工商银行股份有限公司，
类型：发明
国别省市：