CN106776285B - 网页前端调试方法及装置 - Google Patents

Abstract

本公开是关于一种网页前端调试方法及装置。该方法包括：访问数据标志位，其中，数据标志位用于指示调试数据的来源为服务器还是调试设备的本地存储器，根据数据标志位指示的调试数据的来源从服务器或者本地存储器获取调试数据，根据调试数据对网页前端进行调试，实现了可以根据数据标志位的指示从服务器或者本地存储器中获取调试数据，在网页前端调试过程中，当网络状态出现变化时，可以直接根据数据标志位指示的来源获取调试数据，实现了在调试过程中可以灵活切换是从服务器中获取调试数据还是从本地存储器中获取调试数据，便于开发人员操作，从而，提高了网页前端调试的效率。

Description

网页前端调试方法及装置

技术领域

本公开涉及计算机技术，尤其涉及一种网页前端调试方法及装置。

背景技术

随着计算机技术的发展，越来越多的用户通过在浏览器上浏览网页来获取信息。网页包括网页前端和网页后端。浏览器通过网页前端向用户展示信息。网页前端在上线前需要经过调试，以达到最优的展示效果。网页前端的调试需要依赖于网页后端返回的数据。

相关技术中，在网页前端的调试过程中，当调试网页前端的调试设备与服务器之间的网络状态良好时以及服务器的性能比较稳定时，调试设备通过网络从服务器获取调试数据以进行网页前端的调试。当调试设备与服务器之间的网络性能较差或者服务器的性能不稳定时，通过编写代码将预先获取的调试数据保存在调试设备的本地存储器中，来模拟从服务器获取的调试数据以进行网页前端的调试，在网络恢复或者服务器的性能恢复时，需要移除预先获取的调试数据以及用来保存调试数据至调试设备的代码，而再次通过网络从服务器获取调试数据。在网络性能较差或者服务器的性能再次不稳定时，重复上述步骤。

发明内容

为克服相关技术中存在的问题，本公开提供一种网页前端调试方法及装置。

根据本公开实施例的第一方面，提供一种网页前端调试方法，包括：

访问数据标志位；其中，所述数据标志位用于指示调试数据的来源为服务器还是调试设备的本地存储器；

根据所述数据标志位指示的调试数据的来源从所述服务器或者所述本地存储器获取所述调试数据；

根据所述调试数据对所述网页前端进行调试。

结合第一方面，在第一方面的第一种可能的实现方式中，所述方法还包括：

将所有用于从所述服务器获取所述调试数据的应用程序编程接口API封装成数据获取函数；

相应地，所述访问数据标志位，包括：

通过所述数据获取函数访问所述数据标志位；

所述根据所述数据标志位指示的调试数据的来源从所述服务器或者所述本地存储器获取所述调试数据，包括：

根据所述数据标志位指示的调试数据的来源，通过所述数据获取函数调用所述API从所述服务器获取所述调试数据，或者，通过所述数据获取函数从所述本地存储器获取所述调试数据。

结合第一方面，在第一方面的第二种可能的实现方式中，所述方法还包括：

将所述调试数据保存在所述本地存储器中。

结合第一方面的第二种可能的实现方式，在第一方面的第三种可能的实现方式中，所述将所述调试数据保存在所述本地存储器中，包括：

将所述调试数据通过保存为json文件的形式保存在所述本地存储器中。

结合第一方面或第一方面的第一种可能的实现方式至第一方面的第三种可能的实现方式中任一种可能的实现方式，在第一方面的第四种可能的实现方式中，所述从所述数据标志位指示的调试数据的来源处获取所述调试数据，包括：

若所述数据标志位指示所述调试数据来源于服务器，则从所述服务器获取所述调试数据；

若所述数据标志位指示所述调试数据来源于所述本地存储器，则从所述本地存储器获取所述调试数据。

结合第一方面，在第一方面的第五种可能的实现方式中，在所述访问数据标志位之前，所述方法还包括：

设置全局通用的配置文件，将所述数据标志位存储在所述配置文件中。

结合第一方面，在第一方面的第六种可能的实现方式中，所述数据标志位默认用于指示所述调试数据的来源为所述服务器；

所述方法还包括：

若检测到所述调试设备与所述服务器之间的网络质量满足预设的条件，则设置所述数据标志位用于指示所述调试数据的来源为所述本地存储器。

根据本公开实施例的第二方面，提供一种网页前端调试装置，包括：

访问模块，被配置为访问数据标志位；其中，所述数据标志位用于指示调试数据的来源为服务器还是网页前端调试装置的本地存储器；

获取模块，被配置为根据所述访问模块访问的数据标志位指示的调试数据的来源从所述服务器或者所述本地存储器获取所述调试数据；

调试模块，被配置为根据所述获取模块获取的所述调试数据对所述网页前端进行调试。

结合第二方面，在第二方面的第一种可能的实现方式中，所述装置还包括：

封装模块，被配置为将所有用于从所述服务器获取所述调试数据的应用程序编程接口API封装成数据获取函数；

相应地，所述访问模块包括：

访问子模块，被配置为通过所述封装模块封装的所述数据获取函数访问所述数据标志位；

所述获取模块包括：

第一获取子模块，被配置为根据所述访问子模块访问的数据标志位指示的调试数据的来源，通过所述封装模块封装的所述数据获取函数调用所述API从所述服务器获取所述调试数据，或者，通过所述封装模块封装的所述数据获取函数从所述本地存储器获取所述调试数据。

结合第二方面，在第二方面的第二种可能的实现方式中，所述装置还包括：

保存模块，被配置为将所述调试数据保存在所述本地存储器中。

结合第二方面的第二种可能的实现方式，在第二方面的第三种可能的实现方式中，所述保存模块包括：

保存子模块，被配置为将所述调试数据通过保存为json文件的形式保存在所述本地存储器中。

结合第二方面或第二方面的第一种可能的实现方式至第二方面的第三种可能的实现方式中任一种可能的实现方式，在第二方面的第四种可能的实现方式中，所述获取模块包括：

第二获取子模块，被配置为当所述访问模块访问的数据标志位指示所述调试数据来源于服务器时，从所述服务器获取所述调试数据；

第三获取子模块，被配置为当所述访问模块访问的所述数据标志位指示所述调试数据来源于所述本地存储器时，从所述本地存储器获取所述调试数据。

结合第二方面，在第二方面的第五种可能的实现方式中，所述装置还包括：

第一设置模块，被配置为设置全局通用的配置文件，将所述数据标志位存储在所述配置文件中。

结合第二方面，在第二方面的第六种可能的实现方式中，所述数据标志位默认用于指示所述调试数据的来源为所述服务器；

所述装置还包括：

第二设置模块，被配置为当检测到所述网页前端调试装置与所述服务器之间的网络质量满足预设的条件时，设置所述数据标志位用于指示所述调试数据的来源为所述本地存储器。

根据本公开实施例的第三方面，提供一种网页前端调试装置，包括：

处理器；

用于存储所述处理器可执行指令的存储器；

其中，所述处理器被配置为：

访问数据标志位；其中，所述数据标志位用于指示调试数据的来源为服务器还是调试设备的本地存储器；

根据所述数据标志位指示的调试数据的来源从所述服务器或者所述本地存储器获取所述调试数据；

根据所述调试数据对所述网页前端进行调试。

本公开的实施例提供的技术方案可以包括以下有益效果：

一个实施例中，通过访问数据标志位，其中，数据标志位用于指示调试数据的来源为服务器还是调试设备的本地存储器，根据数据标志位指示的调试数据的来源从服务器或者本地存储器获取调试数据，根据调试数据对网页前端进行调试，实现了可以根据数据标志位的指示从服务器或者本地存储器中获取调试数据，在网页前端调试过程中，当网络状态出现变化时，可以直接根据数据标志位指示的来源获取调试数据，相较于相关技术，在不能从服务器中获取调试数据时，不需要编写代码将调试数据保存至调试设备中，也不需要在可以从服务器获取调试数据时，再将代码和本地存储器中的调试数据移除，实现了在调试过程中可以灵活切换是从服务器中获取调试数据还是从本地存储器中获取调试数据，便于开发人员操作，从而，提高了网页前端调试的效率。

另一个实施例中，通过设置全局通用的配置文件，将数据标志位存储在配置文件中，将调试数据保存在本地存储器中，将所有用于从服务器获取调试数据的API封装成数据获取函数，通过数据获取函数访问数据标志位，根据数据标志位指示的调试数据的来源，通过数据获取函数调用API从服务器获取调试数据，或者，通过数据获取函数从本地存储器获取调试数据，根据调试数据对网页前端进行调试，数据标志位默认用于指示调试数据的来源为服务器，若检测到调试设备与服务器之间的网络质量满足预设的条件，则设置数据标志位用于指示调试数据的来源为本地存储器，实现了从任何地方都可以访问存储于全局通用的配置文件中的数据标志位，通过数据获取函数访问数据标志位以及获取调试数据，当网络质量满足预设的条件时，改变数据标志位的状态，一方面，简化了数据标志位的访问过程，另一方面，使用数据获取函数便于后期的维护升级，再一方面，依据网络质量改变数据标志位的状态可以保证网页前端调试的调试效果，从而，进一步提高了网页前端调试的效率。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理。

图1是根据一示例性实施例示出的一种网页前端调试方法的流程图；

图2是根据另一示例性实施例示出的一种网页前端调试方法的流程图；

图3是根据一示例性实施例示出的一种网页前端调试装置的框图；

图4是根据另一示例性实施例示出的一种网页前端调试装置的框图；

图5是根据再一示例性实施例示出的一种网页前端调试装置的框图；

图6是根据一示例性实施例示出的一种网页前端调试装置的框图。

通过上述附图，已示出本公开明确的实施例，后文中将有更详细的描述。这些附图和文字描述并不是为了通过任何方式限制本公开构思的范围，而是通过参考特定实施例为本领域技术人员说明本公开的概念。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。

图1是根据一示例性实施例示出的一种网页前端调试方法的流程图。如图1所示，本公开实施例提供的网页前端调试方法包括以下步骤：

在步骤101中，访问数据标志位。

其中，数据标志位用于指示调试数据的来源为服务器还是调试设备的本地存储器。

本公开实施例中的网页前端调试方法可以由具有计算能力的调试设备执行，例如，计算机、终端设备及个人数字助理等。本公开实施例中的网页前端调试方法可以根据调试数据对网页前端进行调试，以使浏览器通过网页前端显示的页面显示效果满足用户的需求。

对网页前端进行调试，具体为对网页前端代码进行调试。在调试过程中，需要依赖调试数据。调试数据根据调试的业务的不同而不同。调试数据可以从服务器中获取也可以从调试设备的本地存储器中获取。数据标志位用来指示调试数据的来源。本公开实施例中所涉及的服务器为存储有与网页前端对应的网页后端的服务器。调试设备可以通过直接读取数据标志位来访问数据标志位。

在步骤102中，根据数据标志位指示的调试数据的来源从服务器或者本地存储器获取调试数据。

调试设备在访问到数据标志位后，根据数据标志位指示的调试数据的来源从服务器或者本地存储器获取调试数据。

需要说明的是，本地存储器中的调试数据可以是预先将从服务器获取的调试数据保存在本地存储器中，也可以是调试设备自己预先生成的。本公开实施例对此不做限制。

若数据标志位指示调试数据来源于服务器，则调试设备从服务器获取调试数据。在从服务器获取调试数据时，调试设备可以通过调试设备与服务器之间的网络，以调试设备和服务器预先约定的协议从服务器获取调试数据。举例来说，调试设备可以通过应用程序编程接口(Application Programming Interface；简称：API)协议从服务器获取调试数据。

若数据标志位指示调试数据来源于本地存储器，则调试设备从本地存储器获取调试数据。在从本地存储器获取调试数据时，调试设备可以直接读取本地存储器中的数据，以获取调试数据。

本公开实施例中的数据标志位的具体状态可以是进行网页前端调试的开发人员手动进行设置的，也可以是调试设备根据其与服务器之间的网络状态自行进行设置的。例如，当网络状态良好时，即网络速率可以满足预设的阈值时，则调试设备可以将数据标志位的状态设置为指示调试数据为从服务器中获取。当网络状态较差，或者，由于服务器性能不稳定而导致在预设的时间内调试设备无法获取调试数据时，调试设备将数据标志位的状态设置为指示调试数据为从本地存储器中获取。可选的，可以是数据标志位为1时，指示调试数据的来源为服务器，数据标志位为0时，指示调试数据的来源为本地存储器。相较于相关技术，可以使调试设备根据数据标志位的指示从服务器或者本地存储器中获取调试数据。

在步骤103中，根据调试数据对网页前端进行调试。

在获取到调试数据后，调试设备可以依据调试数据对网页前端进行调试。可选的，可以是将调试数据导入网页前端中，在调试设备上解析该网页前端，获取显示页面。针对该显示页面不完善的地方，修改网页前端，获取新的显示页面，直至新的显示页面可以满足用户需求。

本公开实施例提供的网页前端调试方法，通过访问数据标志位，其中，数据标志位用于指示调试数据的来源为服务器还是调试设备的本地存储器，根据数据标志位指示的调试数据的来源从服务器或者本地存储器获取调试数据，根据调试数据对网页前端进行调试，实现了可以根据数据标志位的指示从服务器或者本地存储器中获取调试数据，在网页前端调试过程中，当网络状态出现变化时，可以直接根据数据标志位指示的来源获取调试数据，相较于相关技术，在不能从服务器中获取调试数据时，不需要编写代码将调试数据保存至调试设备中，也不需要在可以从服务器获取调试数据时，再将代码和本地存储器中的调试数据移除，实现了在调试过程中可以灵活切换是从服务器中获取调试数据还是从本地存储器中获取调试数据，便于开发人员操作，从而，提高了网页前端调试的效率。

图2是根据另一示例性实施例示出的一种网页前端调试方法的流程图。本公开实施例在图1所示实施例的基础上，对其他的步骤作一详细说明。如图2所示，本公开实施例提供的网页前端调试方法包括如下步骤：

在步骤201中，设置全局通用的配置文件，将数据标志位存储在配置文件中。

本公开实施例提供的网页前端调试方法可以用于使用JavaScript进行网页前端调试的过程中。

全局通用的配置文件意为在网页前端调试过程中，可以被随意访问的文件。通过将数据标志位存储在全局通用的配置文件中，可以使得在调试过程中的任何地方都可以访问到该数据标志位。

在步骤202中，将调试数据保存在本地存储器中。

调试数据的来源可以是调试设备预先从服务器中获取到的，也可以是调试设备自己生成的。调试设备需要预先将调试数据保存在本地存储器中。

在调试设备保存调试数据至本地存储器时，可以通过以下三种可能的实现方式：

在第一种可能的实现方式中，调试设备可以将调试数据通过保存为JavaScript对象表示法(JavaScript Object Notation；简称：JSON)文件的形式保存在本地存储器中。JSON文件格式清晰，可以跟网页前端调试语言JavaScript无缝衔接，使用方便。

在第二种可能的实现方式中，调试设备可以将调试数据通过保存为可扩展标记语言(Extensible Markup Language；简称：XML)文件的形式保存在本地存储器中。相较于JSON文件，XML文件在使用时，需要先解析。

在第三种可能的实现方式中，调试设备可以将调试数据通过保存为变量的形式保存在本地存储器中。

在步骤203中，将所有用于从服务器获取调试数据的API封装成数据获取函数。

需要说明的是，步骤201、步骤202和步骤203之间没有时序关系，即，步骤201、步骤202和步骤203的执行时机可以是任意的顺序，也可以是并发执行。本公开实施例对此不做限制。

在步骤204中，通过数据获取函数访问数据标志位。

在步骤203和步骤204中，将所有用于从服务器中获取调试数据的API封装成数据获取函数，这使得在后续步骤中需要使用API时，直接调用该数据获取函数即可以实现，便于后续的维护升级。

在访问数据标志位时，可以通过数据获取函数访问数据标志位，即在数据获取函数内部访问数据标志位。在步骤201中，由于将数据标志位存储在了全局通用的配置文件中，则在步骤204中，数据获取函数通过访问该全局通用的配置文件访问数据标志位。

在步骤205中，根据数据标志位指示的调试数据的来源，通过数据获取函数调用API从服务器获取调试数据，或者，通过数据获取函数从本地存储器获取调试数据。

当数据标志位指示调试数据的来源为服务器时，通过数据获取函数调用API从服务器获取调试数据；当数据标志位指示调试数据的来源为本地存储器时，通过数据获取函数从本地存储器获取调试数据。

在通过数据获取函数调用API从服务器中获取调试数据时，可以是通过数据获取函数调用其所封装的API，从服务器中获取调试数据。在获取过程中，可以是调试设备向服务器发送符合其与服务器约定的API协议的调试数据获取请求，服务器在接收到调试数据获取请求后，确定该调试数据获取请求符合约定的API协议，根据该调试数据获取请求，向调试设备发送调试数据获取请求所请求的调试数据。

在通过数据获取函数从本地存储器中获取调试数据时，可以是在数据获取函数内部直接读取本地存储器，从而，从本地存储器中获取调试数据。

在步骤206中，根据调试数据对网页前端进行调试。

在获取到调试数据后，调试设备可以依据调试数据对网页前端进行调试。可选的，可以是将调试数据导入网页前端中，在调试设备上解析该网页前端，获取显示页面。针对该显示页面不完善的地方，修改网页前端，获取新的显示页面，直至新的显示页面可以满足用户需求。

在步骤207中，若检测到调试设备与服务器之间的网络质量满足预设的条件，则设置数据标志位用于指示调试数据的来源为本地存储器。

其中，数据标志位默认用于指示调试数据的来源为服务器。

在本公开实施例中，默认服务器和调试设备之间的网络状态可以满足实现调试设备从服务器中获取调试数据，设置数据标志位默认用于指示调试数据的来源为服务器。由于来源于服务器中的调试数据更符合实际使用中的情况，则数据标志位的这种默认设置可以保证网页前端调试的调试效果。

当调试设备检测到调试设备与服务器之间的网络质量满足预设的条件时，调试设备设置数据标志位用于指示调试数据的来源为本地存储器。这里的预设条件可以是网络的数据传输速率低于预设的阈值，还可以是网络的数据传输速率为0比特/秒。调试设备可以以预设的频率测试其与服务器之间网络的数据传输速率，例如，可以采取发送测试数据包的方式测试数据传输速率。当调试设备与服务器之间的网络质量满足预设的条件时，说明在调试过程中，无法从服务器中获取调试数据了，将数据标志位设置于用于指示调试数据的来源为本地存储器，以实现在调试过程中，从本地存储器中获取调试数据。

以上过程可以用代码形式表示如下：

在以上代码中，第一行注释，设置了名为config的全局通用的配置文件。第二行定义了数据标志位isOnline的默认值为true，即，数据标志位默认用于指示调试数据的来源为服务器，并注释当数据标志位为false时，从本地存储器中获取调试数据。第三行注释，设置了一个名为other的文件。第四行定义了一个名为getData的函数。第五行-第十一行中定义了getData的功能为：如果isOnline为true时，调用API，从服务器中获取调试数据；如果isOnline为false，直接从本地存储器中获取调试数据。

本公开实施例提供的网页前端调试方法，通过设置全局通用的配置文件，将数据标志位存储在配置文件中，将调试数据保存在本地存储器中，将所有用于从服务器获取调试数据的API封装成数据获取函数，通过数据获取函数访问数据标志位，根据数据标志位指示的调试数据的来源，通过数据获取函数调用API从服务器获取调试数据，或者，通过数据获取函数从本地存储器获取调试数据，根据调试数据对网页前端进行调试，数据标志位默认用于指示调试数据的来源为服务器，若检测到调试设备与服务器之间的网络质量满足预设的条件，则设置数据标志位用于指示调试数据的来源为本地存储器，实现了从任何地方都可以访问存储于全局通用的配置文件中的数据标志位，通过数据获取函数访问数据标志位以及获取调试数据，当网络质量满足预设的条件时，改变数据标志位的状态，一方面，简化了数据标志位的访问过程，另一方面，使用数据获取函数便于后期的维护升级，再一方面，依据网络质量改变数据标志位的状态可以保证网页前端调试的调试效果，从而，进一步提高了网页前端调试的效率。

下述为本公开装置实施例，可以用于执行本公开方法实施例。对于本公开装置实施例中未披露的细节，请参照本公开方法实施例。

图3是根据一示例性实施例示出的一种网页前端调试装置的框图。如图3所示，本公开实施例提供的网页前端调试包括：访问模块31、获取模块32以及调试模块33。

访问模块31，被配置为访问数据标志位。

其中，数据标志位用于指示调试数据的来源为服务器还是网页前端调试装置的本地存储器。

本公开实施例中的网页前端调试装置可以是具有计算能力的计算机、终端设备及个人数据助理等。本公开实施例中的网页前端调试装置可以根据调试数据对网页前端进行调试，以使浏览器通过网页前端显示的页面显示效果满足用户的需求。

对网页前端进行调试，具体为对网页前端代码进行调试。在调试过程中，需要依赖调试数据。调试数据根据调试的业务的不同而不同。调试数据可以从服务器中获取也可以从调试设备的本地存储器中获取。数据标志位用来指示调试数据的来源。本公开实施例中所涉及的服务器为存储有与网页前端对应的网页后端的服务器。访问模块31可以通过直接读取数据标志位来访问数据标志位。

获取模块32，被配置为根据访问模块31访问的数据标志位指示的调试数据的来源从服务器或者本地存储器获取调试数据。

需要说明的是，本地存储器中的调试数据可以是预先将从服务器获取的调试数据保存在本地存储器中，也可以是网页前端调试装置自己预先生成的。本公开实施例对此不做限制。

可选的，获取模块32包括：第二获取子模块321和第三获取子模块322。

第二获取子模块321，被配置为当访问模块31访问的数据标志位指示调试数据来源于服务器时，从服务器获取调试数据。第二获取子模块321可以通过网页前端调试装置与服务器之间的网络，以网页前端调试装置和服务器预先约定的协议从服务器获取调试数据。举例来说，第二获取子模块321可以通过API协议从服务器获取调试数据。

第三获取子模块322，被配置为当访问模块31访问的数据标志位指示调试数据来源于本地存储器时，从本地存储器获取调试数据。第三获取子模块322可以直接读取本地存储器中的数据，以获取调试数据。

本公开实施例中的数据标志位的具体状态可以是进行网页前端调试的开发人员手动进行设置的，也可以是网页前端调试装置根据其与服务器之间的网络状态自行进行设置的。例如，当网络状态良好时，即网络速率可以满足预设的阈值时，则网页前端调试装置可以将数据标志位的状态设置为指示调试数据为从服务器中获取。当网络状态较差，或者，由于服务器性能不稳定而导致在预设的时间内网页前端调试装置无法获取调试数据时，网页前端调试装置将数据标志位的状态设置为指示调试数据为从本地存储器中获取。可选的，可以是数据标志位为1时，指示调试数据的来源为服务器，数据标志位为0时，指示调试数据的来源为本地存储器。相较于相关技术，可以使网页前端调试装置根据数据标志位的指示从服务器或者本地存储器中获取调试数据。

调试模块33，被配置为根据获取模块32获取的调试数据对网页前端进行调试。

在获取到调试数据后，网页前端调试装置可以依据调试数据对网页前端进行调试。可选的，可以是将调试数据导入网页前端中，在网页前端调试装置上解析该网页前端，获取显示页面。针对该显示页面不完善的地方，修改网页前端，获取新的显示页面，直至新的显示页面可以满足用户需求。

本公开实施例提供的网页前端调试装置，通过设置访问模块，被配置为访问数据标志位，其中，数据标志位用于指示调试数据的来源为服务器还是调试设备的本地存储器，获取模块，被配置为根据访问模块访问的数据标志位指示的调试数据的来源从服务器或者本地存储器获取调试数据，调试模块，被配置为根据获取模块获取的调试数据对网页前端进行调试，实现了可以根据数据标志位的指示从服务器或者本地存储器中获取调试数据，在网页前端调试过程中，当网络状态出现变化时，可以直接根据数据标志位指示的来源获取调试数据，相较于相关技术，在不能从服务器中获取调试数据时，不需要编写代码将调试数据保存至调试设备中，也不需要在可以从服务器获取调试数据时，再将代码和本地存储器中的调试数据移除，实现了在调试过程中可以灵活切换是从服务器中获取调试数据还是从本地存储器中获取调试数据，便于开发人员操作，从而，提高了网页前端调试的效率。

图4是根据另一示例性实施例示出的一种网页前端调试装置的框图。本公开实施例在图3所示实施例的基础上，对网页前端调试装置的其他模块作一详细说明。如图4所示，本公开实施例提供的网页前端调试装置还包括：封装模块41、保存模块42、第一设置模块43以及第二设置模块44。

封装模块41，被配置为将所有用于从服务器获取调试数据的API封装成数据获取函数。

将所有用于从服务器中获取调试数据的API封装成数据获取函数，这使得在后续步骤中需要使用API时，直接调用该数据获取函数即可以实现，便于后续的维护升级。

访问模块31包括访问子模块311，被配置为通过封装模块41封装的数据获取函数访问数据标志位。

访问子模块311实现在数据获取函数内部访问数据标志位。

获取模块32包括第一获取子模块323，被配置为根据访问子模块311访问的数据标志位指示的调试数据的来源，通过封装模块41封装的数据获取函数调用API从服务器获取调试数据，或者，通过封装模块41封装的数据获取函数从本地存储器获取调试数据。

当数据标志位指示调试数据的来源为服务器时，第一获取子模块323通过数据获取函数调用API从服务器获取调试数据；当数据标志位指示调试数据的来源为本地存储器时，第一获取子模块323通过数据获取函数从本地存储器获取调试数据。

在通过数据获取函数调用API从服务器中获取调试数据时，可以是通过数据获取函数调用其所封装的API，从服务器中获取调试数据。在获取过程中，可以是网页前端调试装置向服务器发送符合其与服务器约定的API协议的调试数据获取请求，服务器在接收到调试数据获取请求后，确定该调试数据获取请求符合约定的API协议，根据该调试数据获取请求，向网页前端调试装置发送调试数据获取请求所请求的调试数据。

在通过数据获取函数从本地存储器中获取调试数据时，可以是在数据获取函数内部直接读取本地存储器，从而，从本地存储器中获取调试数据。

保存模块42，被配置为将调试数据保存在本地存储器中。

调试数据的来源可以是网页前端调试装置预先从服务器中获取到的，也可以是网页前端调试装置自己生成的。保存模块42需要预先将调试数据保存在本地存储器中。

可选的，保存模块42包括保存子模块421，被配置为将调试数据通过保存为json文件的形式保存在本地存储器中。JSON文件格式清晰，可以跟网页前端调试语言JavaScript无缝衔接，使用方便。

保存子模块421还可以被配置为将调试数据通过保存为XML文件的形式保存在本地存储器中，也可以被配置为将调试数据通过保存为变量的形式保存在本地存储器中。

第一设置模块43，被配置为设置全局通用的配置文件，将数据标志位存储在配置文件中。

全局通用的配置文件意为在网页前端调试过程中，可以被随意访问的文件。通过将数据标志位存储在全局通用的配置文件中，可以使得在调试过程中的任何地方都可以访问到该数据标志位。

第二设置模块44，被配置为当检测到网页前端调试装置与服务器之间的网络质量满足预设的条件时，设置数据标志位用于指示调试数据的来源为本地存储器。

其中，数据标志位默认用于指示调试数据的来源为服务器。

在本公开实施例中，默认服务器和网页前端调试装置之间的网络状态可以满足实现网页前端调试装置从服务器中获取调试数据，设置数据标志位默认用于指示调试数据的来源为服务器。由于来源于服务器中的调试数据更符合实际使用中的情况，则数据标志位的这种默认设置可以保证网页前端调试的调试效果。

当网页前端调试装置检测到其与服务器之间的网络质量满足预设的条件时，第二设置模块44设置数据标志位用于指示调试数据的来源为本地存储器。这里的预设条件可以是网络的数据传输速率低于预设的阈值，还可以是网络的数据传输速率为0比特/秒。网页前端调试装置可以以预设的频率测试其与服务器之间网络的数据传输速率，例如，可以采取发送测试数据包的方式测试数据传输速率。当网页前端调试装置与服务器之间的网络质量满足预设的条件时，说明在调试过程中，无法从服务器中获取调试数据了，将数据标志位设置于用于指示调试数据的来源为本地存储器，以实现在调试过程中，从本地存储器中获取调试数据。

本公开实施例提供的网页前端调试装置，通过设置封装模块，被配置为将所有用于从服务器获取调试数据的API封装成数据获取函数，访问模块包括访问子模块，被配置为通过封装模块封装的数据获取函数访问数据标志位，获取模块包括第一获取子模块，被配置为根据访问子模块访问的数据标志位指示的调试数据的来源，通过封装模块封装的数据获取函数调用API从服务器获取调试数据，或者，通过封装模块封装的数据获取函数从本地存储器获取调试数据，保存模块，被配置为将调试数据保存在本地存储器中，第一设置模块，被配置为设置全局通用的配置文件，将数据标志位存储在配置文件中，第二设置模块，被配置为当检测到网页前端调试装置与服务器之间的网络质量满足预设的条件时，设置数据标志位用于指示调试数据的来源为本地存储器，实现了从任何地方都可以访问存储于全局通用的配置文件中的数据标志位，通过数据获取函数访问数据标志位以及获取调试数据，当网络质量满足预设的条件时，改变数据标志位的状态，一方面，简化了数据标志位的访问过程，另一方面，使用数据获取函数便于后期的维护升级，再一方面，依据网络质量改变数据标志位的状态可以保证网页前端调试的调试效果，从而，进一步提高了网页前端调试的效率。

以上描述了网页前端调试装置的内部功能和结构，图5是根据再一示例性实施例示出的一种网页前端调试装置的框图。如图5所示，该网页前端调试装置可实现为：

处理器51；

用于存储处理器51可执行指令的存储器52；

其中，处理器51被配置为：

访问数据标志位；其中，数据标志位用于指示调试数据的来源为服务器还是调试设备的本地存储器；

根据数据标志位指示的调试数据的来源从服务器或者本地存储器获取调试数据；

根据调试数据对网页前端进行调试。

本公开实施例提供的网页前端调试装置，通过设置处理器被配置为访问数据标志位，其中，数据标志位用于指示调试数据的来源为服务器还是调试设备的本地存储器，根据数据标志位指示的调试数据的来源从服务器或者本地存储器获取调试数据，根据调试数据对网页前端进行调试，实现了可以根据数据标志位的指示从服务器或者本地存储器中获取调试数据，在网页前端调试过程中，当网络状态出现变化时，可以直接根据数据标志位指示的来源获取调试数据，相较于相关技术，在不能从服务器中获取调试数据时，不需要编写代码将调试数据保存至调试设备中，也不需要在可以从服务器获取调试数据时，再将代码和本地存储器中的调试数据移除，实现了在调试过程中可以灵活切换是从服务器中获取调试数据还是从本地存储器中获取调试数据，便于开发人员操作，从而，提高了网页前端调试的效率。

图6是根据一示例性实施例示出的一种网页前端调试装置的框图。例如，网页前端调试装置1900可以被提供为一服务器。参照图6，网页前端调试装置1900包括处理组件1922，其进一步包括一个或多个处理器，以及由存储器1932所代表的存储器资源，用于存储可由处理组件1922的执行的指令，例如应用程序。存储器1932中存储的应用程序可以包括一个或一个以上的每一个对应于一组指令的模块。此外，处理组件1922被配置为执行指令，以执行上述网页前端调试方法。

网页前端调试装置1900还可以包括一个电源组件1926被配置为执行网页前端调试装置1900的电源管理，一个有线或无线网络接口1950被配置为将网页前端调试装置1900连接到网络，和一个输入输出(I/O)接口1958。网页前端调试装置1900可以操作基于存储在存储器1932的操作系统，例如Windows ServerTM，Mac OS XTM，UnixTM,LinuxTM，FreeBSDTM或类似。

一种非临时性计算机可读存储介质，当所述存储介质中的指令由网页前端调试装置的处理器执行时，使得网页前端调试装置能够执行上述网页前端调试方法。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本申请旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求书指出。

应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求书来限制。

Claims (9)

1.一种网页前端调试方法，其特征在于，包括：

设置全局通用的配置文件，将数据标志位存储在所述配置文件中；

访问数据标志位；其中，所述数据标志位用于指示调试数据的来源为服务器还是调试设备的本地存储器；

根据所述数据标志位指示的调试数据的来源从所述服务器或者所述本地存储器获取所述调试数据；

根据所述调试数据对所述网页前端进行调试；

其中，所述数据标志位默认用于指示所述调试数据的来源为所述服务器；

若检测到所述调试设备与所述服务器之间的网络质量满足预设的条件，则设置所述数据标志位用于指示所述调试数据的来源为所述本地存储器；

将所有用于从所述服务器获取所述调试数据的应用程序编程接口API封装成数据获取函数；

相应地，所述访问数据标志位，包括：

通过所述数据获取函数访问所述数据标志位；

所述根据所述数据标志位指示的调试数据的来源从所述服务器或者所述本地存储器获取所述调试数据，包括：

根据所述数据标志位指示的调试数据的来源，通过所述数据获取函数调用所述API从所述服务器获取所述调试数据，或者，通过所述数据获取函数从所述本地存储器获取所述调试数据。

2.根据权利要求1所述的方法，其特征在于，所述方法还包括：

将所述调试数据保存在所述本地存储器中。

3.根据权利要求2所述的方法，其特征在于，所述将所述调试数据保存在所述本地存储器中，包括：

将所述调试数据通过保存为json文件的形式保存在所述本地存储器中。

4.根据权利要求1-3任一项所述的方法，其特征在于，所述从所述数据标志位指示的调试数据的来源处获取所述调试数据，包括：

若所述数据标志位指示所述调试数据来源于服务器，则从所述服务器获取所述调试数据；

若所述数据标志位指示所述调试数据来源于所述本地存储器，则从所述本地存储器获取所述调试数据。

5.一种网页前端调试装置，其特征在于，包括：

访问模块，被配置为访问数据标志位；其中，所述数据标志位用于指示调试数据的来源为服务器还是网页前端调试装置的本地存储器；

获取模块，被配置为根据所述访问模块访问的数据标志位指示的调试数据的来源从所述服务器或者所述本地存储器获取所述调试数据；

调试模块，被配置为根据所述获取模块获取的所述调试数据对所述网页前端进行调试；

第一设置模块，被配置为设置全局通用的配置文件，将所述数据标志位存储在所述配置文件中；

其中，所述数据标志位默认用于指示所述调试数据的来源为所述服务器；所述装置还包括：

第二设置模块，被配置为当检测到所述网页前端调试装置与所述服务器之间的网络质量满足预设的条件时，设置所述数据标志位用于指示所述调试数据的来源为所述本地存储器；

封装模块，被配置为将所有用于从所述服务器获取所述调试数据的应用程序编程接口API封装成数据获取函数；

相应地，所述访问模块包括：

访问子模块，被配置为通过所述封装模块封装的所述数据获取函数访问所述数据标志位；

所述获取模块包括：

第一获取子模块，被配置为根据所述访问子模块访问的数据标志位指示的调试数据的来源，通过所述封装模块封装的所述数据获取函数调用所述API从所述服务器获取所述调试数据，或者，通过所述封装模块封装的所述数据获取函数从所述本地存储器获取所述调试数据。

6.根据权利要求5所述的装置，其特征在于，所述装置还包括：

保存模块，被配置为将所述调试数据保存在所述本地存储器中。

7.根据权利要求6所述的装置，其特征在于，所述保存模块包括：

保存子模块，被配置为将所述调试数据通过保存为json文件的形式保存在所述本地存储器中。

8.根据权利要求5-7任一项所述的装置，其特征在于，所述获取模块包括：

第二获取子模块，被配置为当所述访问模块访问的数据标志位指示所述调试数据来源于服务器时，从所述服务器获取所述调试数据；

第三获取子模块，被配置为当所述访问模块访问的所述数据标志位指示所述调试数据来源于所述本地存储器时，从所述本地存储器获取所述调试数据。

9.一种网页前端调试装置，其特征在于，包括：

处理器；

用于存储所述处理器可执行指令的存储器；

其中，所述处理器被配置为：

设置全局通用的配置文件，将数据标志位存储在所述配置文件中；

访问数据标志位；其中，所述数据标志位用于指示调试数据的来源为服务器还是调试设备的本地存储器；

根据所述数据标志位指示的调试数据的来源从所述服务器或者所述本地存储器获取所述调试数据；

根据所述调试数据对所述网页前端进行调试；

其中，所述数据标志位默认用于指示所述调试数据的来源为所述服务器；

若检测到所述调试设备与所述服务器之间的网络质量满足预设的条件，则设置所述数据标志位用于指示所述调试数据的来源为所述本地存储器；

将所有用于从所述服务器获取所述调试数据的应用程序编程接口API封装成数据获取函数；

相应地，所述访问数据标志位，包括：

通过所述数据获取函数访问所述数据标志位；

所述根据所述数据标志位指示的调试数据的来源从所述服务器或者所述本地存储器获取所述调试数据，包括：

根据所述数据标志位指示的调试数据的来源，通过所述数据获取函数调用所述API从所述服务器获取所述调试数据，或者，通过所述数据获取函数从所述本地存储器获取所述调试数据。

Images