CN114741294A - 一种页面的调试方法、装置、设备及存储介质 - Google Patents

Abstract

本公开提供了一种页面的调试方法、装置、设备及存储介质，涉及计算机技术领域，尤其涉及互联网技术领域。具体实现方案为：对待调试的第一源文件进行本地编译，然后通过代理将对远程服务器上的访问请求代理到本地编译得到的目标文件，使用本地编译得到的目标文件替代远程服务器上的目标文件响应页面的访问请求，从而可以通过访问远程服务器的页面查看源文件待调试的执行结果。如此，无须在本地搭建运行环境，即可对本地修改的页面及页面中所使用的页面样式、控件和脚本等进行调试，大大简化了开发过程，进而可大幅提高开发效率。

Description

一种页面的调试方法、装置、设备及存储介质

技术领域

本公开涉及计算机技术领域，尤其涉及互联网技术领域。

背景技术

计算机技术的发展日新月异，常常会涌现出大量新的技术栈，而使用不同的技术栈在本地构建和运行项目的方法也会不尽相同。因此，通过在本地构建和运行项目的方式调试页面，通常需要一定的学习成本。

特别是对于页面样式等界面显示的开发人员来说，在本地构建和运行项目就显得更为复杂和繁琐，增大了开发成本和调试难度，使上线周期变长。

发明内容

本公开提供了一种页面的调试方法、装置、设备以及存储介质。

根据本公开的一方面，提供了一种页面的调试方法，包括：获取待调试的第一源文件，第一源文件是基于第二源文件进行修改得到的；对第一源文件进行编译，得到与第一源文件对应的第一目标文件；使用启用代理的页面访问工具，向远程服务器发送页面请求，得到第一目标文件在页面中的执行结果，其中，代理用于使用第一目标文件替代远程服务器上与第二源文件对应的第二目标文件，响应页面请求。

根据本公开的另一方面，提供了一种页面的调试装置，包括：源文件获取模块，用于获取待调试的第一源文件，第一源文件是基于第二源文件进行修改得到的；编译模块，用于对第一源文件进行编译，得到与第一源文件对应的第一目标文件；页面访问请求代理模块，用于使用启用代理的页面访问工具，向远程服务器发送页面请求，得到第一目标文件在页面中的执行结果，其中，代理用于使用第一目标文件替代远程服务器上与第二源文件对应的第二目标文件，响应页面请求。

根据本公开的另一方面，提供了一种电子设备，包括：至少一个处理器；以及与至少一个处理器通信连接的存储器；其中，存储器存储有可被至少一个处理器执行的指令，指令被至少一个处理器执行，以使至少一个处理器能够执行上述任一项页面的调试方法。

根据本公开的另一方面，提供了一种存储有计算机指令的非瞬时计算机可读存储介质，其中，计算机指令用于使计算机执行上述任一项页面的调试方法。

根据本公开的另一方面，提供了一种计算机程序产品，包括计算机程序，计算机程序在被处理器执行时实现上述任一项页面的调试方法。

本公开提供了一种页面的调试方法、装置、设备以及存储介质，该方法包括：对待调试的第一源文件进行本地编译，然后通过代理将对远程服务器上的访问请求代理到本地编译得到的目标文件，使用本地编译得到的目标文件替代远程服务器上的目标文件响应页面的访问请求，从而可以通过访问远程服务器的页面查看源文件待调试的执行结果。如此，无须在本地搭建运行环境，即可对本地修改的页面及页面中所使用的页面样式、控件和脚本等进行调试，大大简化了开发过程，进而可大幅提高开发效率。

应当理解，本部分所描述的内容并非旨在标识本公开的实施例的关键或重要特征，也不用于限制本公开的范围。本公开的其它特征将通过以下的说明书而变得容易理解。

附图说明

附图用于更好地理解本方案，不构成对本公开的限定。其中：

图1是本公开第一实施例实现页面调试的方法的流程示意图；

图2是本公开第二实施例实现页面调试的方法的过程中，各个文件之间的关系和转换示意图；

图3是本公开第二实施例实现页面调试的方法的流程示意图；

图4是本公开第一实施例页面调试装置的结构示意图；

图5是用来实现本公开实施例的页面调试的方法的电子设备的框图。

具体实施方式

以下结合附图对本公开的示范性实施例做出说明，其中包括本公开实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本公开的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

本公开所提供的一种页面的调试方法主要应用在对页面进行的开发和调试的场景中。其中，页面泛指应用程序中用于显示信息或与用户交互的界面，例如，网页或操作界面等。

图1示出了本公开一实施例实现页面的调试方法的主要流程，如图1所示，该方法包括：

操作S110，获取待调试的第一源文件，第一源文件是基于第二源文件进行修改得到的；

其中，源文件指包含页面描述语言(HTML)、脚本程序、控件代码或页面样式描述信息等源代码的文件，也是开发过程中开发人员可以修改和编辑的文件。

待调试的第一源文件，指为了修复缺陷或优化功能对原有源文件进行了修改，并且需要进一步调试和验证的源文件，也就是修改后的源文件。其中，为了方便区分原有源文件和修改后的源文件，将原有源文件称为第二源文件。第一源文件与第二源文件同名，是同一源文件的不同版本。

在本公开实施例中的第一源文件主要指页面开发中涉及的源文件，例如，静态网页、动态网页、动态网页中调用到的脚本程序、静态或动态网页中调用的页面样式、静态或动态网页中调用到的控件等元素的源文件。

操作S120，对第一源文件进行编译，得到与第一源文件对应的第一目标文件；

其中，编译指通过编译程序，将由高级语言编写的源程序转换为计算机可以识别的二进制文件，也就是目标文件。目标文件也被称为可执行文件或二进制文件。

在本公开实施例中，第一目标文件，是待调试的第一源文件编译得到的目标文件。

在本公开实施例中，并不限定对第一源文件进行编译的编译环境、所使用的编译程序、编译方式或编译范围，只要可以得到第一源文件对应的目标文件即可。

例如，可以是在开发环境中进行的编译，也可以是在测试环境中进行的编译，甚至可以是在远程机器中进行的编译；可以是对整个应用程序进行的整体编译，也可以仅对第一源文件所在的最小编译单元，例如，页面样式或控件，进行局部编译等。

操作S130，使用启用代理的页面访问工具，向远程服务器发送页面请求，得到第一目标文件在页面中的执行结果，其中，代理用于使用第一目标文件替代远程服务器上与第二源文件对应的第二目标文件，响应页面请求。

页面访问工具主要指浏览器，也可以是能够发送页面请求的客户端工具，例如，HTTP请求客户端(HTTPRequestClient)等。

第二目标文件是对第二源文件(即，修改前的原有源文件)编译得到的目标文件。第一目标文件与第二目标文件同名，是同一目标文件的不同版本。

向远程服务器发送的页面请求所请求的页面，通常是包含或引用到第一源文件所修改部分的页面。如此，在响应页面请求时，就可以调用到编译第一源文件得到的第一目标文件。

在使用没有启用代理的页面访问工具(例如，浏览器)访问页面时，通常是直接将页面请求发送到远程服务器，然后由远程服务器把相应页面请求的响应结果，也就是请求的页面，传送回来。

在使用启用代理的页面访问工具访问页面时，则会将所有页面请求先发送给代理；然后，由代理获取请求的页面；之后再由代理将其获取到的页面返回给页面访问工具。

代理的设置通常是为了：1)实现高可用性和负载均衡。通过代理将发送给同一应用的页面请求，均衡地发送到可用的多个后台服务器；2)通过代理，可使多个客户端共享网络访问资源。

但本公开的发明人却创造性地想到：如果通过代理将发送给远程服务器的页面请求发送给修改后的第一目标文件，由修改后的第一目标文件替代远程服务器上未修改的第二目标文件响应网页请求，然后获取第一目标文件的执行结果，再将第一目标文件的执行结果返回给页面访问工具。

如此，就可以通过远程服务器的运行环境获取第一目标文件的执行结果，而无须在本地搭建运行环境。

基于以上发明思路，本公开实施例使用了启用代理的页面访问工具，并通过该代理实现：将远程服务器响应页面请求的过程中对修改部分的调用发送给第一目标文件，由第一目标文件响应相应的调用以完成页面请求。

实施者可通过编程自行实现一个具有代理功能的工具来实现上述方法；也可以使用第三方提供的、可定制代理规则的代理，通过设置代理规则将远程服务器上第二目标文件的地址映射到第一目标文件所在的地址来实现上述方法。

如此，即使本地没有搭建可运行环境，第一目标文件也可以通过代理接收到页面请求并通过代理返回执行结果。而开发人员，则可以通过页面访问工具获取到第一目标文件的执行结果，观察到第一目标文件在页面中的显示效果，并根据需要进行进一步修改和验证。

图2示出了本公开的另一实施例实现页面的调试方法的过程中所涉及的文件和文件过程。

如图2所示，在本公开实施例中，待调试的源文件为页面样式的源文件(例如，a.js和a.less)。页面样式的源文件，也就是待调试的第一源文件，主要指层叠样式表(Cascading Style Sheets，CSS)。如图2所示，本公开实施例的页面样式的源文件存储在本地开发环境20中。页面样式的源文件经过编译后得到本地的目标文件(例如，style.css)。之后，通过启用代理的浏览器，请求远程服务器21中的index.html，index.html中使用到了style.css，而style.css通过代理规则映射到本地style.css。因此，index.html使用本地的style.css进行显示。之后，启用代理的浏览器返回将使用本地的style.css进行显示的index.html，作为调试结果供开发人员观察。如果调试结果符合预期，则可以上传本地的style.css到远程服务器，覆盖远程服务器上的style.css。

在执行上述调试过程之前，还需在浏览器中启用代理，并设置代理规则，将对远程服务器上的style.css映射至本地的style.css。

在本公开实施例中，使用的是抓包工具fiddler，并添加了类似以下的规则代码至规则文件中：

其中，${localpath}为本地style.css文件所在路径，而${localpath}/style.css则为本地的style.css文件。

通过上述的规则，可以将远程服务器上的style.css映射至本地的style.css，并使用本地的style.css替代远程服务器上的style.css响应页面请求。

实施者也可以使用其它类似工具，例如，proxyman等实现上述功能。

图3示出了本公开实施例实现页面样式的调试方法的主要流程，包括：

操作S310，获取本地开发环境中的页面样式的源文件；

例如，图2右侧本地开发环境20中的a.js和a.less等。

在获取本地开发环境中的页面样式的源文件

操作S320，将页面样式文件编译生成远程服务器端同名的页面样式目标文件(style.css)；

在本公开实施例中，使用的是自动化构建工具gulp，实施者也可以使用其他任何适用的构建工具或编译工具，例如ant等。

由于在本公开实施例中，主要应用与页面样式文件的开发和调试场景，因此，在本实施例中仅编译修改后的页面样式文件所涉及的最小编译单元，即相关页面样式文件生成的style.css，而不会编译其他项目元素。如此，可最大程度地简化开发环境地搭建和编译过程，进一步提高开发效率。

操作S330，使用启用了代理的浏览器，向远程服务器发送页面请求，得到页面样式文件在所述页面中的执行结果；

在本公开实施中，使用的是演示环境中的服务器作为远程服务器，实施者也可以使用其他可用的远程服务器，例如，在测试环境中搭建的专门用于调试页面样式文件的远程服务器。该远程服务器可供多个页面样式文件的开发人员使用，还可进一步节约系统资源。

操作S340，判断执行结果是否与预期结果相同，若是，则继续操作是350，若否，则继续进行修改，然后，返回至操作S310，继续下一轮调试过程；

在本公开实施例中，页面样式目标文件的执行结果，就是页面样式文件通过页面进行展示的显示效果。

操作S350，将本地编译的页面样式目标文件上传至所述远程服务器，覆盖远程服务器中的页面样式目标文件。

在实际应用中，在将本地编译的页面样式目标文件上传至所述远程服务器，覆盖远程服务器中的页面样式目标文件之前还可运行相关的测试和进行代码提交的审批流程。在得到批准或授权后，再执行覆盖操作。

如此，就完成了页面样式文件的开发、调试和上线过程。对于页面样式开发人员来说，使用上述页面调试方法，无须在本地搭建运行环境，甚至无需重新编译整个应用，只需编译修改的页面样式文件，就可轻松完成页面样式文件的开发和调试，从而大幅提升了页面样式开发的效率，进而缩短了整个项目的上线周期。

此外，通过上述页面调试的方法，还可进一步将页面样式从其他页面开发中独立出来，进一步简化了本地开发环境的搭建，减少了误改其他页面文件的风险。

对于页面样式开发人员来说，也无须学习搭建本地运行环境所需的技术栈，可进一步减免学习成本，从而可将节约的时间用来专注在本职工作以提供更多的研发产出。

需要说明的是图1至图3所示的实施例仅为本公开页面调试方法的示例性说明，并非对实施方式或应用场景的限定。

本公开的技术方案中，所涉及的用户个人信息的获取，存储和应用程序等，均符合相关法律法规的规定，且不违背公序良俗。

根据本公开的实施例，本公开还提供了一种页面的调试装置，如图4所示，该装置40包括：源文件获取模块401，用于获取待调试的第一源文件，第一源文件是基于第二源文件进行修改得到的；编译模块402，用于对第一源文件进行编译，得到与第一源文件对应的第一目标文件；页面访问请求代理模块403，用于使用启用代理的页面访问工具，向远程服务器发送页面请求，得到第一目标文件在页面中的执行结果，其中，代理用于使用第一目标文件替代远程服务器上与第二源文件对应的第二目标文件，响应页面请求。

根据本公开一实施例，该装置40还包括：代理启用模块，用于在页面访问工具中，启用代理；代理规则设置模块，用于在代理中设置代理规则，代理规则用于使用第一目标文件替代远程服务器上与第二源文件对应的第二目标文件，响应页面请求。

根据本公开一实施例，其中，编译模块402具体用于对第一源文件所在的最小编译单元进行局部编译。

根据本公开一实施例，该装置40，还包括：文件上传模块，用于若执行结果与预期结果相同，则将第一目标文件上传至远程服务器，覆盖的第二目标文件。

根据本公开的实施例，本公开还提供了一种电子设备、一种可读存储介质和一种计算机程序产品。

图5示出了可以用来实施本公开的实施例的示例电子设备500的示意性框图。电子设备旨在表示各种形式的数字计算机，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本公开的实现。

如图5所示，设备500包括计算单元501，其可以根据存储在只读存储器(ROM)502中的计算机程序或者从存储单元508加载到随机访问存储器(RAM)503中的计算机程序，来执行各种适当的动作和处理。在RAM 503中，还可存储设备500操作所需的各种程序和数据。计算单元501、ROM 502以及RAM 503通过总线504彼此相连。输入/输出(I/O)接口505也连接至总线504。

设备500中的多个部件连接至I/O接口505，包括：输入单元506，例如键盘、鼠标等；输出单元507，例如各种类型的显示器、扬声器等；存储单元508，例如磁盘、光盘等；以及通信单元509，例如网卡、调制解调器、无线通信收发机等。通信单元509允许设备500通过诸如因特网的计算机网络和/或各种电信网络与其他设备交换信息/数据。

计算单元501可以是各种具有处理和计算能力的通用和/或专用处理组件。计算单元501的一些示例包括但不限于中央处理单元(CPU)、图形处理单元(GPU)、各种专用的人工智能(AI)计算芯片、各种运行机器学习模型算法的计算单元、数字信号处理器(DSP)、以及任何适当的处理器、控制器、微控制器等。计算单元501执行上文所描述的各个方法和处理，例如本公开页面调试的方法。例如，在一些实施例中，本公开页面调试的方法可被实现为计算机软件程序，其被有形地包含于机器可读介质，例如存储单元508。在一些实施例中，计算机程序的部分或者全部可以经由ROM 502和/或通信单元509而被载入和/或安装到设备500上。当计算机程序加载到RAM 503并由计算单元501执行时，可以执行上文描述的页面调试的方法的一个或多个步骤。备选地，在其他实施例中，计算单元501可以通过其他任何适当的方式(例如，借助于固件)而被配置为执行本公开页面调试的方法。

本文中以上描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、场可编程门阵列(FPGA)、专用集成电路(ASIC)、专用标准产品(ASSP)、芯片上系统的系统(SOC)、负载可编程逻辑设备(CPLD)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括：实施在一个或者多个计算机程序中，该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释，该可编程处理器可以是专用或者通用可编程处理器，可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令，并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。

用于实施本公开的方法的程序代码可以采用一个或多个编程语言的任何组合来编写。这些程序代码可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器或控制器，使得程序代码当由处理器或控制器执行时使流程图和/或框图中所规定的功能/操作被实施。程序代码可以完全在机器上执行、部分地在机器上执行，作为独立软件包部分地在机器上执行且部分地在远程机器上执行或完全在远程机器或服务器上执行。

在本公开的上下文中，机器可读介质可以是有形的介质，其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的程序。机器可读介质可以是机器可读信号介质或机器可读储存介质。机器可读介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备，或者上述内容的任何合适组合。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或快闪存储器)、光纤、便捷式紧凑盘只读存储器(CD-ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。

为了提供与用户的交互，可以在计算机上实施此处描述的系统和技术，该计算机具有：用于向用户显示信息的显示装置(例如，CRT(阴极射线管)或者LCD(液晶显示器)监视器)；以及键盘和指向装置(例如，鼠标或者轨迹球)，用户可以通过该键盘和该指向装置来将输入提供给计算机。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的传感反馈(例如，视觉反馈、听觉反馈、或者触觉反馈)；并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。

可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如，作为数据服务器)、或者包括中间件部件的计算系统(例如，应用程序服务器)、或者包括前端部件的计算系统(例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如，通信网络)来将系统的部件相互连接。通信网络的示例包括：局域网(LAN)、广域网(WAN)和互联网。

计算机系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。服务器可以是云服务器，也可以为分布式系统的服务器，或者是结合了区块链的服务器。

应该理解，可以使用上面所示的各种形式的流程，重新排序、增加或删除步骤。例如，本发公开中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行，只要能够实现本公开公开的技术方案所期望的结果，本文在此不进行限制。

上述具体实施方式，并不构成对本公开保护范围的限制。本领域技术人员应该明白的是，根据设计要求和其他因素，可以进行各种修改、组合、子组合和替代。任何在本公开的精神和原则之内所作的修改、等同替换和改进等，均应包含在本公开保护范围之内。

Claims (12)

1.一种页面的调试方法，包括：

获取待调试的第一源文件，所述第一源文件是基于第二源文件进行修改得到的；

对所述第一源文件进行编译，得到与所述第一源文件对应的第一目标文件；

使用启用代理的页面访问工具，向远程服务器发送页面请求，得到所述第一目标文件在所述页面中的执行结果，其中，所述代理用于使用所述第一目标文件替代远程服务器上与所述第二源文件对应的第二目标文件，响应所述页面请求。

2.根据权利要求1所述的方法，还包括：

在所述页面访问工具中，启用所述代理；

在所述代理中设置代理规则，所述代理规则用于使用所述第一目标文件替代远程服务器上与所述第二源文件对应的第二目标文件，响应所述页面请求。

3.根据权利要求1所述的方法，其中，所述对所述第一源文件进行编译，包括：

对所述第一源文件所在的最小编译单元进行局部编译。

4.根据权利要求1所述的方法，还包括：

若所述执行结果与预期结果相同，则将所述第一目标文件上传至所述远程服务器，覆盖所述的第二目标文件。

5.根据权利要求1至4任一项所述的方法，其中，所述第一源文件包括页面样式的源文件。

6.一种页面的调试装置，包括：

源文件获取模块，用于获取待调试的第一源文件，所述第一源文件是基于第二源文件进行修改得到的；

编译模块，用于对所述第一源文件进行编译，得到与所述第一源文件对应的第一目标文件；

页面访问请求代理模块，用于使用启用代理的页面访问工具，向远程服务器发送页面请求，得到所述第一目标文件在所述页面中的执行结果，其中，所述代理用于使用所述第一目标文件替代远程服务器上与所述第二源文件对应的第二目标文件，响应所述页面请求。

7.根据权利要求6所述的装置，还包括：

代理启用模块，用于在所述页面访问工具中，启用所述代理；

代理规则设置模块，用于在所述代理中设置代理规则，所述代理规则用于使用所述第一目标文件替代远程服务器上与所述第二源文件对应的第二目标文件，响应所述页面请求。

8.根据权利要求6所述的装置，其中，所述编译模块具体用于对所述第一源文件所在的最小编译单元进行局部编译。

9.根据权利要求6所述的装置，还包括：

文件上传模块，用于若所述执行结果与预期结果相同，则将所述第一目标文件上传至所述远程服务器，覆盖所述的第二目标文件。

10.一种电子设备，包括：

至少一个处理器；以及

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行权利要求1－5中任一项所述的方法。

11.一种存储有计算机指令的非瞬时计算机可读存储介质，其中，所述计算机指令用于使所述计算机执行根据权利要求1－5中任一项所述的方法。

12.一种计算机程序产品，包括计算机程序，所述计算机程序在被处理器执行时实现根据权利要求1－5中任一项所述的方法。

Images