前端项目调试方法及系统与流程

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


背景技术：

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


技术实现要素：

5.本技术目的在于提供一种前端项目调试方法及系统，既能够快速把代码编译、打包成浏览器识别代码的需求，又能解决现有技术“编译、打包效率低”、“不能按需要打包”的问题。
6.为达上述目的，本技术所提供的前端项目调试方法，具体包含：监听浏览器的服务端口获取用户输入的网站中待调试页面的页面信息；根据所述页面信息于预设配置文件中获得所述页面信息对应的入口文件，根据所述入口文件提取待调试页面的网页代码；根据所述浏览器属性将所述网页代码编译打包为对应属性的显示代码，将所述显示代码提供至浏览器显示输出。
7.在上述前端项目调试方法中，可选的，所述监听浏览器的服务端口获取用户输入的网站中待调试页面的页面信息包含：通过node.js开启浏览器服务端口的监听配置，获取用户输入的网站中待调试页面的页面信息。
8.本技术还提供一种前端项目调试方法，所述方法包含：获取用户输入的页面参数，根据所述页面参数于预设配置文件中获得所述页面参数对应的入口文件；根据所述入口文件提取待调试页面的网页代码，根据所述浏览器属性将所述网页代码编译打包为对应属性的显示代码；通过浏览器将所述显示代码渲染后显示输出。
9.在上述前端项目调试方法中，可选的，通过浏览器将所述显示代码渲染后显示输出包含：监听浏览器的服务端口获取用户输入的所述页面参数所对应的页码信息；根据所述页面信息通过浏览器将所述显示代码渲染后显示输出。
10.本技术还提供一种前端项目调试系统，所述系统包含构建工具、开发服务器和配置文件存储库；所述开发服务器用于监听浏览器的服务端口获取用户输入的网站中待调试页面的页面信息；以及，将接收到的显示代码渲染到浏览器中显示输出；所述构建工具用于根据所述页面信息于所述配置文件存储库中获得所述页面信息对应的入口文件，根据所述入口文件提取待调试页面的网页代码，根据所述浏览器属性将所述网页代码编译打包为对应属性的显示代码，将所述显示代码提供至所述开发服务器；所述配置文件存储库用于存储网站的配置文件，所述配置文件包含入口文件和多个页面的网页代码。
11.在上述前端项目调试系统中，可选的，所述构建工具还包含：获取用户输入的页面参数，根据所述页面参数于所述配置文件存储库中通过对应的入口文件提取待调试页面的网页代码，根据所述浏览器属性将所述网页代码编译打包为对应属性的显示代码，将所述显示代码提供至所述开发服务器。
12.在上述前端项目调试系统中，可选的，所述开发服务器还包含监听模块，所述监听模块用于通过node.js开启浏览器服务端口监听，通过监听浏览器服务端口获得用户输入的网站中待调试页面的页面信息。
13.在上述前端项目调试系统中，可选的，所述开发服务器通过node.js的套接字与所述构建工具建立长连接。
14.本技术还提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述方法。
15.本技术还提供一种计算机可读存储介质，所述计算机可读存储介质存储有执行上述方法的计算机程序。
16.本技术的有益技术效果在于：在浏览器输入网页地址后，才会对这个网页的代码进行“编译、打包”，可以很大的省去对不必要的代码编译、打包耗时，页面越多，效果越明显。开发者可以指定一个或多个页面进行编译打包，这样可以提前把你想要看到的页面进行构建，构建完成后就能立刻在浏览器看到效果。好处也很明显，就是不用全量构建所有页面，省时省力。可以应用于各类多页面前端项目的场景，是一套灵活的大幅提升前端项目开发、调试效率的方法和实现，具有很大的市场推广空间。
附图说明
17.此处所说明的附图用来提供对本技术的进一步理解，构成本技术的一部分，并不构成对本技术的限定。在附图中：
18.图1为现有技术中前端项目调试的时序示意图；
19.图2为本技术一实施例所提供的前端项目调试方法的流程示意图；
20.图3为本技术一实施例所提供的访问即构建的时序示意图；
21.图4为本技术一实施例所提供的前端项目调试方法的流程示意图；
22.图5为本技术一实施例所提供的按需构建的时序示意图；
23.图6为本技术一实施例所提供的前端项目调试系统的结构示意图；
24.图7为本技术一实施例所提供的电子设备的结构示意图。
具体实施方式
25.以下将结合附图及实施例来详细说明本技术的实施方式，借此对本技术如何应用技术手段来解决技术问题，并达成技术效果的实现过程能充分理解并据以实施。需要说明的是，只要不构成冲突，本技术中的各个实施例及各实施例中的各个特征可以相互结合，所形成的技术方案均在本技术的保护范围之内。
26.另外，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。
27.请参考图2所示，本技术所提供的前端项目调试方法，具体包含：
28.s201监听浏览器的服务端口获取用户输入的网站中待调试页面的页面信息；
29.s202根据所述页面信息于预设配置文件中获得所述页面信息对应的入口文件，根据所述入口文件提取待调试页面的网页代码；
30.s203根据所述浏览器属性将所述网页代码编译打包为对应属性的显示代码，将所述显示代码提供至浏览器显示输出。
31.其中，所述监听浏览器的服务端口获取用户输入的网站中待调试页面的页面信息可包含：通过node.js开启浏览器服务端口的监听配置，获取用户输入的网站中待调试页面的页面信息。在实际工作中，上述前端项目调试方法其目的在于访问即构建的开发和调试过程，请参考图3所示，其流程可如下：
32.1、开发人员一开始就可以启动“开发服务器”，这个时候不需要编译、构建任何页
面，所以几乎0耗时(启动服务器是毫秒级)。启动开发服务器时，会利用node.js开启http服务端口监听的功能(只要在浏览器输入了对应的端口的网页，就能立刻监听到并根据浏览器的地址编译对应代码)。同时，还通过node.js的套接字socket能力，在“开发服务器”和“构建工具”之间建立一个长连接，这样两者就能进行实时通信。
33.2、“开发服务器”启动后，开发人员就可以在浏览器中输入某个想要预览页面的网址，然后开发服务器根据已经启动的“http端口监听服务”，监听并获取到当前浏览器中的网页地址。
34.3、然后“开发服务器”就会根据已经和“构建工具”创建的socket连接，把当前网页的地址通知到构建工具去编译、打包当前输入的这个页面，构建工具接收到当前网页地址之后，会根据网页地址到配置文件中查找该网页对应的入口文件(一个javascript文件)，构建工具会通过这个页面的入口文件把整个页面所需要的代码进行编译、打包成在浏览器中能运行的代码。这个过程只会打包浏览器所输入的页面对应的代码，而不会把项目中所有的页面都进行编译、打包。所以这个过程只需要打包一个页面的耗时(几秒钟)。
35.4、编译、打包完这一个页面后，浏览器中就能看到这个页面的预览效果了。
36.5、如果开发人员修改了这个页面的代码，也是重复1～4步的操作。同样，这个过程也只是编译、打包当前这个页面的代码，不会打包所有页面。所以如果页面越多，效率提升越明显。
37.请参考图4所示，本技术还提供一种前端项目调试方法，所述方法包含：
38.s401获取用户输入的页面参数，根据所述页面参数于预设配置文件中获得所述页面参数对应的入口文件；
39.s402根据所述入口文件提取待调试页面的网页代码，根据所述浏览器属性将所述网页代码编译打包为对应属性的显示代码；
40.s403通过浏览器将所述显示代码渲染后显示输出。
41.在上述实施例中，通过浏览器将所述显示代码渲染后显示输出可包含：监听浏览器的服务端口获取用户输入的所述页面参数所对应的页码信息；根据所述页面信息通过浏览器将所述显示代码渲染后显示输出。在实际工作中，上述前端项目调试方法其目的在于按需构建的开发和调试过程，按需构建是为了节省开发人员在输入页面网址后的几秒钟等待时间，有的开发人员希望把某个页面的编译、打包过程前置(先构建完，在浏览器中打开时能立刻查看到内容)，而不是在通过浏览器输入网址后才进行编译和打包。其开发、调试过程请参考图5所示，具体如下：
42.1、开发人员输入命令通过构建工具进行编译、打包，与已有方案不同的是，这里会在启动构建工具时，传入指定页面参数(如：page1)，而“访问即构建”的方式在启动开发服务时不指定任何页面参数，这样构建工具就需要提前编译、打包“page1”的代码，也不会把所有页面进行编译、打包。同样，在接收到“page1”参数后，构建工具也是到我们的配置文件中查找“page1”对应的入口文件(一个javascript文件)，然后构建工具会通过这个入口文件把整个“page1”所需要的代码进行编译、打包成在浏览器中能运行的代码。
43.2、“page1”打包完成后，构建工具会自动使用node.js启动“http端口监听服务”来监听浏览器对应的端口请求。
44.3、然后，开发人员就可以打开浏览器输入“page1”的网址。
45.4、开发服务器就会根据已经启动的“http端口监听服务”监听到“page1”的网址，并把已经提前编译打包好的“page1”代码响应并渲染到浏览器中展示出来。
46.5、当开发人员修改了代码，也是重复执行1～4步，同样这个过程也只会编译和打包页面1的代码，节省大量全量编译和打包的时间。
47.请参考图6所示，本技术还提供一种前端项目调试系统，所述系统包含构建工具、开发服务器和配置文件存储库；所述开发服务器用于监听浏览器的服务端口获取用户输入的网站中待调试页面的页面信息；以及，将接收到的显示代码渲染到浏览器中显示输出；所述构建工具用于根据所述页面信息于所述配置文件存储库中获得所述页面信息对应的入口文件，根据所述入口文件提取待调试页面的网页代码，根据所述浏览器属性将所述网页代码编译打包为对应属性的显示代码，将所述显示代码提供至所述开发服务器；所述配置文件存储库用于存储网站的配置文件，所述配置文件包含入口文件和多个页面的网页代码。其中，所述开发服务器通过node.js的套接字与所述构建工具建立长连接。
48.在本技术一实施例中，所述构建工具还可包含：获取用户输入的页面参数，根据所述页面参数于所述配置文件存储库中通过对应的入口文件提取待调试页面的网页代码，根据所述浏览器属性将所述网页代码编译打包为对应属性的显示代码，将所述显示代码提供至所述开发服务器。其中，所述开发服务器还可包含监听模块，所述监听模块用于通过node.js开启浏览器服务端口监听，通过监听浏览器服务端口获得用户输入的网站中待调试页面的页面信息。
49.在实际工作中，开发人员想要预览自己网站中网页的效果，可以直接启动“开发服务器”，这个过程是非常快的，毫秒级的启动速度，本技术不需要在这个时候就把网站中所有的页面都进行“编译、打包”。在开发服务器启动后，开发人员就可以在浏览器中输入网址预览想要调试的网页。此时开发服务器会通知相关工程化工具(启动服务时，通过套接字socket技术建立起了开发服务器与工程化工具的通信连接)，开发服务器根据浏览器的网页地址，识别出该网页所需要的代码文件，然后把当前想要预览的这个网页代码进行“编译、打包”，完成后就能在浏览器中看到网页的效果了。这个编译和打包的过程也只涉及到一个网页，所以也只需要几秒钟的时间就能随时看到网页效果。而且，本技术还支持让开发人员在启动开发服务器时，指定需要提前编译和打包的页面参数，这样也中以达到提前编译、打包指定页面的能力，不用把全部页面进行打包，在浏览器输入网址后，便可以立刻看到网页预览效果。
50.本技术的有益技术效果在于：在浏览器输入网页地址后，才会对这个网页的代码进行“编译、打包”，可以很大的省去对不必要的代码编译、打包耗时，页面越多，效果越明显。开发者可以指定一个或多个页面进行编译打包，这样可以提前把你想要看到的页面进行构建，构建完成后就能立刻在浏览器看到效果。好处也很明显，就是不用全量构建所有页面，省时省力。可以应用于各类多页面前端项目的场景，是一套灵活的大幅提升前端项目开发、调试效率的方法和实现，具有很大的市场推广空间。
51.本技术还提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述方法。
52.本技术还提供一种计算机可读存储介质，所述计算机可读存储介质存储有执行上述方法的计算机程序。
53.如图7所示，该电子设备600还可以包括：通信模块110、输入单元120、音频处理单元130、显示器160、电源170。值得注意的是，电子设备600也并不是必须要包括图7中所示的所有部件；此外，电子设备600还可以包括图7中没有示出的部件，可以参考现有技术。
54.如图7所示，中央处理器100有时也称为控制器或操作控件，可以包括微处理器或其他处理器装置和/或逻辑装置，该中央处理器100接收输入并控制电子设备600的各个部件的操作。
55.其中，存储器140，例如可以是缓存器、闪存、硬驱、可移动介质、易失性存储器、非易失性存储器或其它合适装置中的一种或更多种。可储存上述与失败有关的信息，此外还可存储执行有关信息的程序。并且中央处理器100可执行该存储器140存储的该程序，以实现信息存储或处理等。
56.输入单元120向中央处理器100提供输入。该输入单元120例如为按键或触摸输入装置。电源170用于向电子设备600提供电力。显示器160用于进行图像和文字等显示对象的显示。该显示器例如可为lcd显示器，但并不限于此。
57.该存储器140可以是固态存储器，例如，只读存储器(rom)、随机存取存储器(ram)、sim卡等。还可以是这样的存储器，其即使在断电时也保存信息，可被选择性地擦除且设有更多数据，该存储器的示例有时被称为eprom等。存储器140还可以是某种其它类型的装置。存储器140包括缓冲存储器141(有时被称为缓冲器)。存储器140可以包括应用/功能存储部142，该应用/功能存储部142用于存储应用程序和功能程序或用于通过中央处理器100执行电子设备600的操作的流程。
58.存储器140还可以包括数据存储部143，该数据存储部143用于存储数据，例如联系人、数字数据、图片、声音和/或任何其他由电子设备使用的数据。存储器140的驱动程序存储部144可以包括电子设备的用于通信功能和/或用于执行电子设备的其他功能(如消息传送应用、通讯录应用等)的各种驱动程序。
59.通信模块110即为经由天线111发送和接收信号的发送机/接收机110。通信模块(发送机/接收机)110耦合到中央处理器100，以提供输入信号和接收输出信号，这可以和常规移动通信终端的情况相同。
60.基于不同的通信技术，在同一电子设备中，可以设置有多个通信模块110，如蜂窝网络模块、蓝牙模块和/或无线局域网模块等。通信模块(发送机/接收机)110还经由音频处理器130耦合到扬声器131和麦克风132，以经由扬声器131提供音频输出，并接收来自麦克风132的音频输入，从而实现通常的电信功能。音频处理器130可以包括任何合适的缓冲器、解码器、放大器等。另外，音频处理器130还耦合到中央处理器100，从而使得可以通过麦克风132能够在本机上录音，且使得可以通过扬声器131来播放本机上存储的声音。
61.本领域内的技术人员应明白，本技术的实施例可提供为方法、系统、或计算机程序产品。因此，本技术可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本技术可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。
62.本技术是参照根据本技术实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流
程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
63.这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
64.这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
65.以上所述的具体实施例，对本技术的目的、技术方案和有益效果进行了进一步详细说明，所应理解的是，以上所述仅为本技术的具体实施例而已，并不用于限定本技术的保护范围，凡在本技术的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本技术的保护范围之内。