前端开发页面的调试方法、装置、设备及存储介质与流程

1.本申请涉及计算机技术领域，尤其涉及一种前端开发页面的调试方法、装置、设备及存储介质。


背景技术：

2.一个网站类型的应用程序通常分为前端网页和后台服务，前端网页在开发调试过程中依赖于后端服务。也就是说，如果要调试前端网页必须要有后端能够提供服务，否则前端页面调试过程中会受到阻塞。
3.在实际项目开发中，确定分析设计完需求，前端开发的主要任务就是前端用户界面(user interface，简称ui)的布局及与后端开发应用程序编程接口(application programming interface，简称api)的测通。前端ui界面的布局与后端数据服务几乎很少有交互，但布局实时效果的查看需依赖后端正常提供服务的情况下才可以完成；api接口的测通需等待后端人员开发本地测试完，将该接口部署到服务器上，前端搭建复杂的后端环境才能开始前后端接口的联调，前后端开发任务不能同时进行，降低开发效率，影响开发进程。


技术实现要素：

4.本申请的目的旨在至少在一定程度上解决上述技术问题之一。
5.为此，本申请提出了一种前端开发页面的调试方法，通过代理后端服务根据本地数据存储路径下的存储数据对前端开发页面进行调试，无需调用后端存储的数据，相较于现有技术中后端开发完成后才能对前端开发页面进行调试，提高了前端调试的效率。
6.本申请第一方面实施例提出了一种前端开发页面的调试方法，包括：
7.监听前端开发页面的接口调用请求，其中，所述接口调用请求包括：待调用接口的标识；
8.获取与所述标识对应的本地数据存储路径；
9.根据本地设备的ip地址以及页面服务端口获取所述本地数据存储路径下的存储数据；
10.根据所述存储数据对所述前端开发页面进行调试。
11.可选地，所述获取与所述标识对应的本地数据存储路径，包括：
12.获取与所述标识对应的原始数据存储路径；
13.判断所述原始数据存储路径是否为所述本地设备上的数据存储路径；
14.若所述原始数据存储路径不为所述本地设备上的数据存储路径，则根据所述待调用接口的标识查询本地接口映射关系表，获取与所述标识对应的本地数据存储路径；
15.若所述原始数据存储路径为所述本地设备上的数据存储路径时，则将所述原始数据存储路径确定为与所述标识对应的本地数据存储路径。
16.可选地，所述获取与所述标识对应的本地数据存储路径之前，还包括：
17.针对所述前端开发页面的每个待处理接口，确定与所述待处理接口的标识对应的第一原始数据存储路径是否为所述本地设备上的数据存储路径；
18.若所述第一原始数据存储路径不为所述本地设备上的数据存储路径，则获取所述第一原始数据存储路径所指向的非本地设备的ip地址以及页面服务端口；
19.根据所述非本地设备的ip地址以及页面服务端口获取所述第一原始数据存储路径下的第一存储数据；
20.将所述第一存储数据存储在所述本地设备上，并根据所述待处理接口的标识以及所述第一存储数据在所述本地设备上的数据存储路径对所述接口映射关系表进行更新。
21.可选地，所述方法，还包括：
22.若所述第一原始数据存储路径不为所述本地设备上的数据存储路径，则获取所述第一原始数据存储路径下的第一存储数据；
23.将所述第一存储数据存储在所述本地设备上，并根据所述待处理接口的标识以及所述第一存储数据在所述本地设备上的数据存储路径对所述接口映射关系表进行更新。
24.可选地，所述根据所述存储数据对所述前端开发页面进行调试，包括：
25.获取存储数据修改请求，其中，所述存储数据修改请求是所述前端开发页面显示异常时生成的，所述存储数据修改请求包括：待修改接口的标识，与所述待修改接口相关的修改后存储数据；
26.获取与所述待修改接口的标识对应的本地数据存储路径；
27.根据所述修改后存储数据，对与所述待修改接口的标识对应的本地数据存储路径下的存储数据进行更新，以根据更新后的存储数据进行异常查找。
28.可选地，所述获取与所述标识对应的本地数据存储路径之前，还包括：
29.判断配置代理开关是否为关闭状态；
30.对应的，所述获取与所述标识对应的本地数据存储路径，包括：
31.若所述配置代理开关为关闭状态，则获取与所述标识对应的本地数据存储路径。
32.可选地，若所述配置代理开关为开启状态，则获取与所述标识对应的原始数据存储路径；
33.确定所述原始数据存储路径不为所述本地设备上的数据存储路径，则获取所述原始数据存储路径所指向的非本地设备的ip地址以及页面服务端口；
34.根据所述非本地设备的ip地址以及页面服务端口获取所述原始数据存储路径下的存储数据；
35.根据所述存储数据对所述前端开发页面进行调试。
36.本申请实施例的前端开发页面的调试方法，通过监听前端开发页面的接口调用请求，其中，接口调用请求包括：待调用接口的标识；获取与标识对应的本地数据存储路径，根据本地设备的ip地址以及页面服务端口获取本地数据存储路径下的存储数据，根据存储数据对前端开发页面进行调试。由此，代理后端服务根据本地数据存储路径下的存储数据对前端开发页面进行调试，无需调用后端存储的数据，相较于现有技术中后端开发完成后才能对前端开发页面进行调试，提高了前端调试的效率。
37.本申请第二方面实施例提出了一种前端开发页面的调试装置，包括：
38.监听模块，用于监听前端开发页面的接口调用请求，其中，所述接口调用请求包
括：待调用接口的标识；
39.第一获取模块，用于获取与所述标识对应的本地数据存储路径；
40.第二获取模块，用于根据本地设备的ip地址以及页面服务端口获取所述本地数据存储路径下的存储数据；
41.调试模块，用于根据所述存储数据对所述前端开发页面进行调试。
42.本申请实施例的前端开发页面的调试装置，通过监听前端开发页面的接口调用请求，其中，接口调用请求包括：待调用接口的标识；获取与标识对应的本地数据存储路径，根据本地设备的ip地址以及页面服务端口获取本地数据存储路径下的存储数据，根据存储数据对前端开发页面进行调试。由此，代理后端服务根据本地数据存储路径下的存储数据对前端开发页面进行调试，无需调用后端存储的数据，相较于现有技术中后端开发完成后才能对前端开发页面进行调试，提高了前端调试的效率。
43.本申请第三方面实施例提出了一种电子设备，包括：存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现如第一方面所述的前端开发页面的调试方法。
44.本申请第四方面实施例提出了一种非临时性计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如第一方面所述的前端开发页面的调试方法。
45.本申请附加的方面和优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本申请的实践了解到。
附图说明
46.本申请上述的和/或附加的方面和优点从下面结合附图对实施例的描述中将变得明显和容易理解，其中：
47.图1为相关技术中的一种前端开发页面的调试框架图；
48.图2为本申请实施例提供的一种前端开发页面的调试方法的流程示意图；
49.图3为本申请实施例提供的另一种前端开发页面的调试方法的流程示意图；
50.图4为本申请实施例提供的一种用于对前端开发页面进行调试的方法的流程示意图；
51.图5为本申请实施例提供的又一种前端开发页面的调试方法的流程示意图；
52.图6为本申请实施例提供的一种前端开发页面的调试示例框图；
53.图7为本申请实施例提供的一种前端开发页面的调试装置的结构示意图；
54.图8为根据本申请一个实施例的电子设备的结构示意图。
具体实施方式
55.下面详细描述本申请的实施例，所述实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，旨在用于解释本申请，而不能理解为对本申请的限制。
56.示例性地，如图1所示，网站类型的应用程序可以分为前端网页和后台服务，前端网页在开发调试过程中依赖于后端服务。也就是说，如果要调试前端网页必须要有后端能够提供服务，否则前端页面调试过程中会受到阻塞。
57.其中，前端网页是指网页的布局，颜色，外框等界面的布局。用于对前端网页布局的数据是由后台服务提供的。
58.下面参考附图描述本申请实施例的前端开发页面的调试方法、装置、电子设备以及非临时性计算机可读存储介质。
59.下面结合图2，对本申请提供的前端开发页面的调试方法进行详细说明。
60.图2为本申请实施例提供的一种前端开发页面的调试方法的流程示意图。
61.本申请实施例的执行主体为本申请提供的前端开发页面的调试装置，该前端开发页面的调试装置可以被配置在任一代理后端服务中，以使该代理后端服务可以执行前端开发页面的调试功能。
62.其中，代理后端服务为在前端创建的，用于执行前端开发页面调试方法，通过获取到的调试数据对前端开发页面进行调试，以使得浏览器通过页面前端显示的页面显示效果满足用户的需求。如图2所示，该前端开发页面的调试方法包括以下步骤：
63.步骤101，监听前端开发页面的接口调用请求。
64.其中，接口调用请求包括：待调用接口的标识。
65.本申请实施例中，代理后端服务可以监听前端开发页面的接口调用请求，以根据接口调用请求包括的待调用接口的标识确定待调用接口。
66.例如，代理后端服务可以实时或每隔一段时间监听前端开发页面的调用接口请求。
67.可以理解的是，每一个接口对应一个标识，可以根据待调用接口的标识确定前端开发页面的接口调用请求需要调用的接口。
68.需要说明的是，对前端开发页面进行调试，需要依赖与获取到的调试数据，调试数据可以从前端本地存储器中获取，还可以从代理后端服务的存储器中获取，还可以从其他服务器中获取。
69.步骤102，获取与标识对应的本地数据存储路径。
70.其中，本地数据存储路径，是指在代理后端服务的本地存储的数据的存储路径。
71.本申请实施例中，确定前端开发页面的接口调用请求对应的标识后，可以根据待调用接口的标识确定对应的本地数据存储路径，从而代理后端服务可以获取到与标识对应的本地数据存储路径。
72.需要解释的是，可以在代理后端服务添加本地地址和端口配置，以将本地地址存储的数据转存在代理后端服务的存储器中，用于在脱离后端服务完全使用该轻量服务就可以对前端开发页面进行调试；还可以添加其他域真实环境地址和端口配置，以将其他域存储的数据转存在代理后端服务的存储器中，用于在使用其他域环境下的真实数据时，不用搭建和启用复杂的后端环境就可以对前端开发页面进行调试；还可以添加连接其他域的标志属性配置作为为区分连接的是本地环境还是其他域环境的开关。
73.作为一种可能的实现方式，代理后端服务可以监听前端开发页面的数据调用请求，通过数据调用请求地址的长度、内容和文件中的配置确定前端开发页面请求的是本地静态资源或是本地模拟的动态资源亦或是其他域真实环境下的资源。
74.步骤103，根据本地设备的ip地址以及页面服务端口获取本地数据存储路径下的存储数据。
75.其中，存储数据，是指用于对前端开发页面进行调试的数据。本地设备，是指创建得到的代理后端服务所在的设备。
76.本申请实施例中，代理后端服务获取到与标识对应的本地数据存储路径后，可以根据本地设备的ip地址以及页面服务端口获取本地存储路径下的存储数据。
77.可以理解为，代理后端服务监听到前端开发页面的接口调用请求时，确定前端开发页面请求的是本地存储的数据，可以根据本地设备的ip地址以及页面服务端口获取本地数据存储路径下的存储数据。由此，实现了脱离后端快速查找存储数据以对前端开发页面进行调试。
78.步骤104，根据存储数据对前端开发页面进行调试。
79.本申请实施例中，获取本地数据存储路径下的存储数据后，代理后端服务可以根据获取到的存储数据作为响应返回给前端开发页面，以根据获取到的存储数据对前端开发页面进行调试。
80.可选地，代理后端服务可以将存储数据导入前端开发页面中，以使得开发人员根据存储数据对前端开发页面进行调试。
81.本申请实施例提供的前端开发页面的调试方法，通过监听前端开发页面的接口调用请求，其中，接口调用请求包括：待调用接口的标识；获取与标识对应的本地数据存储路径，根据本地设备的ip地址以及页面服务端口获取本地数据存储路径下的存储数据，根据存储数据对前端开发页面进行调试。由此，代理后端服务根据本地数据存储路径下的存储数据对前端开发页面进行调试，无需调用后端存储的数据，相较于现有技术中后端开发完成后才能对前端开发页面进行调试，提高了前端调试的效率。
82.作为本申请实施例的一种可能的实现方式，在上述步骤102中获取与标识对应的本地数据存储路径时，可能存在与标识对应的原始数据存储路径并非代理后端服务本地存储路径，这种情况下，需要根据待调用接口的标识查询本地接口映射关系表，获取代理后端服务存储的与标识对应的本地数据存储路径。下面针对上述情况，结合图3，对本申请提供的前端开发页面的调试方法进行进一步说明。
83.图3为本申请实施例提供的另一种前端开发页面的调试方法的流程示意图。如图3所示，上述步骤102可以包括以下步骤：
84.步骤201，获取与标识对应的原始数据存储路径。
85.本申请实施例中，代理后端服务监听到前端开发页面的接口调用请求，确定待调用接口的标识后，可以获取与标识对应的原始数据存储路径。
86.需要说明的是，原始数据存储路径，可以为存储在代理后端服务的本地设备上的数据存储路径，也可以为存储在后端服务器的数据存储路径，还可以为其他域下存储的数据存储路径，在此不做限定。
87.步骤202，判断原始数据存储路径是否为本地设备上的数据存储路径。
88.本申请实施例中，获取到与标识对应的原始数据存储路径后，可以判断原始数据存储路径是否为本地设备上的数据存储路径，以确定标识对应的数据存储路径的位置。
89.步骤203，若原始数据存储路径不为本地设备上的数据存储路径，则根据待调用接口的标识查询本地接口映射关系表，获取与标识对应的本地数据存储路径。
90.其中，本地接口映射关系表，是用于预先存储接口的标识与本地接口之间的对应
关系。
91.在一种可能的情况下，获取到与标识对应的原始数据存储路径后，确定原始数据存储路径不为本地设备上的数据存储路径。这种情况下，可以根据待调用接口的标识查询本地接口映射关系表，以根据本地接口映射表中预先存储的待调用接口的标识与本地接口之间的映射关系，确定与标识对应的本地数据存储路径。进一步地，根据本地设备的ip地址以及页面服务端口获取本地数据存储路径下的存储数据，代理后端服务可以根据获取到的存储数据作为响应返回给前端开发页面，以根据获取到的存储数据对前端开发页面进行调试。
92.例如，假设代理后端服务监听到前端开发页面的接口调用请求包括的待调用接口的标识对应的数据存储路径为真实后端服务器的存储器，为了避免配置复杂的后端开发运行环境，可以将存储数据预先存储的代理后端服务的本地设备上，通过本地接口确定模拟数据路径，进而建立了待调用接口的标识与本地接口之间的对应关系。由此，通过查询待调用接口的标识与本地接口之间的映射关系，可以确定待调用接口的标识与模拟数据路径的对应关系。
93.可以理解为，可以在创建代理后端服务的js文件的同级目录中添加一个后端真实接口和模拟数据路径相互映射的文件。其中，文件中存储有待调用接口的标识与存储在代理后端服务的本地接口之间的映射关系。
94.该文件需在代理后端服务的js文件中引入，同时在项目中创建和每个真实接口相对应的模拟真实数据的文件，该文件中的模拟数据是由前后端根据接口需要定义的数据组成的，这样可以在接口未完全实现的情况下，前端可以使用真实接口发送请求，利用该模拟数据作为响应来交互，这样前端可以和后端并行开发。
95.作为本申请实施例的一种可能的实现形式，针对前端开发页面的每个待处理接口，可以确定与待处理接口的标识对应的第一原始数据存储路径是否为本地设备上的数据存储路径。若确定第一原始数据存储路径不为本地设备上的数据存储路径，则获取第一原始数据存储路径所指向的非本地设备的ip地址以及页面服务端口。进而，根据非本地设备的ip地址以及页面服务端口获取第一原始数据存储路径下的第一存储数据。进一步地，将第一存储数据存储在本地设备上，并根据待处理接口的标识以及第一存储数据在本地设备上的数据存储路径对接口映射关系表进行更新。
96.作为本申请实施例的一种可能的实现形式，若确定第一原始数据存储路径不为本地设备上的数据存储路径，这种情况下，可以将第一原始数据存储路径下的数据预先存储在本地设备上，以使得前端开发页面请求调用第一原始数据存储路径下的数据时，可以直接从本地设备中获取到数据。可选地，可以获取第一原始数据存储路径下的第一存储数据，将第一存储数据存储在本地设备上，并根据待处理接口的标识以及第一存储数据在本地设备上的数据存储路径对接口映射关系表进行更新。
97.可选地，确定第一原始数据存储路径不为本地设备上的数据存储路径时，可以通过发送提示信息的方式，以提示前端开发人员或者后端开发人员，将第一原始数据存储路径下的第一存储数据存储在本地设备上。
98.步骤204，若原始数据存储路径为本地设备上的数据存储路径时，则将原始数据存储路径确定为与标识对应的本地数据存储路径。
99.在另一种可能的情况下，获取到与标识对应的原始数据存储路径后，确定原始数据存储路径为本地设备上的数据存储路径。这种情况下，可以将原始数据存储路径确定为与标识对应的本地数据存储路径。
100.可以理解为，确定与标识对应的原始数据存储路径为代理后端服务的本地设备上的数据存储路径，则可以将原始数据存储路径确定为与标识对应的本地数据存储路径。
101.本申请实施例的前端开发页面的调试方法，代理后端服务获取与标识对应的原始数据存储路径；确定原始数据存储路径不为本地设备上的数据存储路径，则根据待调用接口的标识查询本地接口映射关系表，获取与标识对应的本地数据存储路径；若原始数据存储路径为本地设备上的数据存储路径时，则将原始数据存储路径确定为与标识对应的本地数据存储路径。由此，代理后端服务可以获取到本地设备上的数据存储路径下的存储数据，从而避免了需要真实后端提供数据对前端开发页面进行调试时存在效率低的技术问题。
102.作为本申请实施例的一种可能的实现方式，在根据存储数据对前端开发页面进行调试时，可能存在前端开发页面不显示等异常情况，这时需要对调用的数据进行修改，以根据修改后的数据确定对前端开发页面的调试出现异常的原因。下面针对上述情况，结合图4，对本申请提供的前端开发页面的调试方法进行进一步说明。
103.图4为本申请实施例提供的一种用于对前端开发页面进行调试的方法的流程示意图。如图4所示，上述步骤104可以包括以下步骤：
104.步骤301，获取存储数据修改请求。
105.其中，存储数据修改请求是前端开发页面显示异常时生成的，存储数据修改请求包括：待修改接口的标识，与待修改接口相关的修改后存储数据。
106.本申请实施例中，在根据存储数据对前端开发页面进行调试时，可能会出现前端开发页面显示出现异常的情况，此时，前端开发页面可以生成存储数据修改请求，以使得代理后端服务获取到存储数据修改请求。
107.作为一种示例，假设代理后端服务调用接口a对前端开发页面进行调试时，前端开发页面的显示出现了异常，前端开发页面可以生成存储数据修改请求，其中，存储数据修改请求中包括有待修改接口b的标识，以及与待修改接口b相关的修改后存储数据。由此，通过调用待修改接口的标识获取修改后的存储数据，以根据修改后存储数据对前端开发页面进行调试。
108.还例如，假设代理后端服务调用接口a对前端开发页面进行调试时，前端开发页面的显示出现了异常，前端开发页面可以生成存储数据修改请求，其中，存储数据修改请求可以包含有对存储数据进行删除的指示信息。进而，通过对存储数据进行删除，以确定根据存储数据对前端开发页面进行调试出现异常的原因。
109.步骤302，获取与待修改接口的标识对应的本地数据存储路径。
110.本申请实施例中，获取与待修改接口的标识对应的本地数据存储路径的具体实现过程，可以参考上述实施例中步骤102中获取与标识对应的本地数据存储路径，在此不再赘述。
111.步骤303，根据修改后存储数据，对与待修改接口的标识对应的本地数据存储路径下的存储数据进行更新，以根据更新后的存储数据进行异常查找。
112.本申请实施例中，获取到与修改接口相关的修改后存储数据以及与待修改接口的
标识对应的本地数据存储路径后，可以根据修改后存储数据，对与待修改接口的标识对应的本地数据存储路径下的存储数据进行更新。由此，与待修改接口的标识对应的本地数据存储路径下的存储数据为修改后的存储数据，从而便于根据更新后的存储数据进行异常查找。
113.可以理解为，若根据更新后的存储数据对前端开发页面进行调试时，页面显示正常，可以确定是原始接口的标识对应的本地数据存储路径中存储的数据出现了异常。
114.本申请实施例的前端开发页面的调试方法，通过获取存储数据修改请求，其中，存储数据修改请求是前端开发页面显示异常时生成的，存储数据修改请求包括：待修改接口的标识，与待修改接口相关的修改后存储数据，获取与待修改接口的标识对应的本地数据存储路径，根据修改后存储数据，对与待修改接口的标识对应的本地数据存储路径下的存储数据进行更新，以便根据更新后的存储数据进行异常查找。由此，通过对用于前端开发页面进行调试的存储数据进行更新，实现了确定前端开发页面显示异常的原因的目的。
115.在上述实施例的基础上，代理后端服务在获取与标识对应的本地数据存储路径之前，需要先判断配置代理开关的开启状态，以确定获取与标识对应的数据存储路径。下面针对上述情况，结合图5，对本申请提供的前端开发页面的调试方法进行进一步说明。
116.图5为本申请实施例提供的又一种前端开发页面的调试方法的流程示意图。如图5所示，在上述步骤102之前，该前端开发页面的调试方法，还可以包括以下步骤：步骤401，监听前端开发页面的接口调用请求。
117.本申请实施例中，步骤401的实现过程，可以参见上述实施例中步骤101的实现过程，在此不再赘述。
118.步骤402，判断配置代理开关是否为关闭状态。
119.可以理解的是，代理后端服务若需从不同域获取服务，则需要在代理后端服务配置该域的地址和端口，然后将连接真实环境下的配置代理开关打开，以接收前端开发页面发送的接口调用请求，以获取与标识对应的原始数据存储路径。
120.因此，在获取与标识对应的原始数据存储路径时，需要判断配置代理开关的状态，以确定获取与标识对应的数据存储路径。
121.步骤403，若配置代理开关为关闭状态，则获取与标识对应的本地数据存储路径。
122.在一种可能的情况下，代理后端服务在获取与标识对应的本地数据存储路径时，确定配置代理开关为关闭状态，则获取与标识对应的本地数据存储路径。
123.步骤404，若配置代理开关为开启状态，则获取与标识对应的原始数据存储路径。
124.在另一种可能的情况下，代理后端服务在获取与标识对应的本地数据存储路径时，确定配置代理开关为开启状态，则获取与标识对应的原始数据存储路径。
125.步骤405，确定原始数据存储路径不为本地设备上的数据存储路径，则获取原始数据存储路径所指向的非本地设备的ip地址以及页面服务端口。
126.步骤406，根据非本地设备的ip地址以及页面服务端口获取原始数据存储路径下的存储数据。
127.步骤407，根据存储数据对前端开发页面进行调试。
128.本申请实施例中，确定配置代理开关为开启状态，获取与标识对应的原始数据存储路径。进一步地，判断与标识对应的原始数据存储路径是否为本地设备上的数据存储路
径。
129.在一种可能的情况下，确定原始数据存储路径不为本地设备上的数据存储路径，则获取原始数据存储路径所指向的非本地设备的ip地址以及页面服务端口。
130.进而，根据非本地设备的ip地址以及页面服务端口获取原始数据存储路径下的存储数据，以根据存储数据对前端开发页面进行调试。
131.由此，在获取不同存储路径的数据时，只需在代理后端服务中配置待调用接口的标识，将配置代理开关开启，即可获取到与标识对应的原始数据存储路径，从而实现了通过调用不同域的数据对前端开发页面进行调试的目的。
132.作为一种示例，如图6所示，假设前端开发页面为浏览器或客户端，代理后端服务为在前端创建的，用于执行前端开发页面调试方法，通过获取到的调试数据对前端开发页面进行调试，以使得浏览器通过页面前端显示的页面显示效果满足用户的需求。
133.在一种可能的情况下，代理后端服务监听到浏览器或客户端发送的用于请求本地数据存储路径的数据请求后，代理后端服务响应于接收到的数据请求，根据本地设备的ip地址以及页面服务端口获取到本地数据存储路径下的存储数据，根据存储数据对浏览器或客户端进行调试。
134.在另一种可能的情况下，代理后端服务监听到浏览器或客户端发送的用于请求其他设备数据存储路径的数据请求后，判断数据请求中的待调用接口的标识对应的原始数据存储路径是否为本地设备上的数据存储路径。若原始数据存储路径不为本地设备上的数据存储路径，则根据待调用接口的标识查询本地接口映射关系表，获取与标识对应的本地数据存储路径。进一步地，代理后端服务获取到与标识对应的原始数据存储路径中的存储数据后，根据存储数据对浏览器或客户端进行调试。
135.若原始数据存储路径为本地设备上的数据存储路径，则将原始数据存储路径确定为与标识对应的本地数据存储路径，进一步地，代理后端服务获取到原始数据存储路径中的存储数据后，根据存储数据对浏览器或客户端进行调试。
136.在又一种可能的情况下，代理后端服务监听到浏览器或客户端发送的数据请求为请求其他环境下存储的资源后，则手动配置环境地址、端口号以及将连接其他环境的标志属性打开，通过重定向(需要后端支持跨域)其他地址即可或转发到目的后端，目的后端返回的响应即可通过代理后端服务返回给浏览器或客户端，这样就可以在该环境下完成页面需要的开发调试。
137.在获取与标识对应的本地数据存储路径之前，需要判断配置代理开关的开关状态，若配置代理开关为关闭状态，代理后端服务响应于接收到的数据请求，获取与数据请求中的待调用接口的标识对应的本地数据存储路径中存储的数据，以根据存储数据对浏览器或客户端进行调试。若配置代理开关为开启状态，获取到与数据请求中的待调用接口的标识对应的原始数据存储路径中的存储数据后，以根据存储数据对浏览器或客户端进行调试。
138.与上述几种实施例提供的前端开发页面的调试方法相对应，本申请的一种实施例还提供一种前端开发页面的调试装置。由于本申请实施例提供的前端开发页面的调试装置与上述几种实施例提供的前端开发页面的调试方法相对应，因此在前端开发页面的调试方法的实施方式也适用于本实施例提供的前端开发页面的调试装置，在本实施例中不再详细
描述。
139.图7为根据本申请一个实施例的前端开发页面的调试装置的结构示意图。
140.如图7所示，该前端开发页面的调试装置40，可以包括：监听模块41、第一获取模块42、第二获取模块43以及调试模块44。
141.其中，监听模块41，用于监听前端开发页面的接口调用请求，其中，接口调用请求包括：待调用接口的标识。
142.第一获取模块42，用于获取与标识对应的本地数据存储路径。
143.第二获取模块43，用于根据本地设备的ip地址以及页面服务端口获取本地数据存储路径下的存储数据。
144.调试模块44，用于根据存储数据对前端开发页面进行调试。
145.作为本申请实施例的一种可能实现方式，第一获取模块42，还可以用于：
146.获取与标识对应的原始数据存储路径；
147.判断原始数据存储路径是否为本地设备上的数据存储路径；
148.若原始数据存储路径不为本地设备上的数据存储路径，则根据待调用接口的标识查询本地接口映射关系表，获取与标识对应的本地数据存储路径；
149.若原始数据存储路径为本地设备上的数据存储路径时，则将原始数据存储路径确定为与标识对应的本地数据存储路径。
150.作为本申请实施例的另一种可能实现方式，该前端开发页面的调试装置40，还可以包括：
151.确定模块，用于针对前端开发页面的每个待处理接口，确定与待处理接口的标识对应的第一原始数据存储路径是否为本地设备上的数据存储路径；
152.第三获取模块，用于若第一原始数据存储路径不为本地设备上的数据存储路径，则获取第一原始数据存储路径所指向的非本地设备的ip地址以及页面服务端口；
153.第四获取模块，用于根据非本地设备的ip地址以及页面服务端口获取第一原始数据存储路径下的第一存储数据；
154.第一更新模块，用于将第一存储数据存储在本地设备上，并根据待处理接口的标识以及第一存储数据在本地设备上的数据存储路径对接口映射关系表进行更新。
155.作为本申请实施例的另一种可能实现方式，该前端开发页面的调试装置40，还可以包括：
156.第五获取模块，用于若第一原始数据存储路径不为本地设备上的数据存储路径，则获取第一原始数据存储路径下的第一存储数据；
157.第二更新模块，用于将第一存储数据存储在本地设备上，并根据待处理接口的标识以及第一存储数据在本地设备上的数据存储路径对接口映射关系表进行更新。
158.作为本申请实施例的另一种可能实现方式，调试模块，还可以用于：
159.获取存储数据修改请求，其中，存储数据修改请求是前端开发页面显示异常时生成的，存储数据修改请求包括：待修改接口的标识，与所述待修改接口相关的修改后存储数据；
160.获取与待修改接口的标识对应的本地数据存储路径；
161.根据修改后存储数据，对与待修改接口的标识对应的本地数据存储路径下的存储
数据进行更新，以便根据更新后的存储数据进行异常查找。
162.作为本申请实施例的另一种可能实现方式，该前端开发页面的调试装置40，还可以包括：
163.判断模块，用于判断配置代理开关是否为关闭状态；
164.对应的，第一获取模块，还用于：
165.若配置代理开关为关闭状态，则获取与标识对应的本地数据存储路径。
166.作为本申请实施例的另一种可能实现方式，第一获取模块，还可以用于：
167.若配置代理开关为开启状态，则获取与标识对应的原始数据存储路径；
168.确定原始数据存储路径不为本地设备上的数据存储路径，则获取原始数据存储路径所指向的非本地设备的ip地址以及页面服务端口；
169.根据非本地设备的ip地址以及页面服务端口获取原始数据存储路径下的存储数据；
170.根据存储数据对前端开发页面进行调试。
171.本申请实施例提供的前端开发页面的调试装置，通过监听前端开发页面的接口调用请求，其中，接口调用请求包括：待调用接口的标识；获取与标识对应的本地数据存储路径，根据本地设备的ip地址以及页面服务端口获取本地数据存储路径下的存储数据，根据存储数据对前端开发页面进行调试。由此，代理后端服务根据本地数据存储路径下的存储数据对前端开发页面进行调试，无需调用后端存储的数据，相较于现有技术中后端开发完成后才能对前端开发页面进行调试，提高了前端调试的效率。
172.为了实现上述实施例，本申请还提出一种电子设备，图8为本申请实施例提供的一种电子设备的结构示意图。该电子设备包括：
173.存储器1001、处理器1002及存储在存储器1001上并可在处理器1002上运行的计算机程序。
174.处理器1002执行所述程序时实现上述实施例中提供的前端开发页面的调试方法。
175.进一步地，电子设备还包括：
176.通信接口1003，用于存储器1001和处理器1002之间的通信。
177.存储器1001，用于存放可在处理器1002上运行的计算机程序。
178.存储器1001可能包含高速ram存储器，也可能还包括非易失性存储器(non
‑
volatile memory)，例如至少一个磁盘存储器。
179.处理器1002，用于执行所述程序时实现上述实施例所述的前端开发页面的调试方法。
180.如果存储器1001、处理器1002和通信接口1003独立实现，则通信接口1003、存储器1001和处理器1002可以通过总线相互连接并完成相互间的通信。所述总线可以是工业标准体系结构(industry standard architecture，简称为isa)总线、外部设备互连(peripheral component，简称为pci)总线或扩展工业标准体系结构(extended industry standard architecture，简称为eisa)总线等。所述总线可以分为地址总线、数据总线、控制总线等。为便于表示，图8中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。
181.可选的，在具体实现上，如果存储器1001、处理器1002及通信接口1003，集成在一
块芯片上实现，则存储器1001、处理器1002及通信接口1003可以通过内部接口完成相互间的通信。
182.处理器1002可能是一个中央处理器(central processing unit，简称为cpu)，或者是特定集成电路(application specific integrated circuit，简称为asic)，或者是被配置成实施本申请实施例的一个或多个集成电路。
183.为了实现上述实施例，本申请实施例还提出一种非临时性计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如上述实施例中提供的前端开发页面的调试方法。
184.为了实现上述实施例，本申请实施例还提出一种计算机程序产品，当所述计算机程序产品中的指令处理器执行时，实现上述实施例中提供的前端开发页面的调试方法。
185.在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本申请的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不必须针对的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任一个或多个实施例或示例中以合适的方式结合。此外，在不相互矛盾的情况下，本领域的技术人员可以将本说明书中描述的不同实施例或示例以及不同实施例或示例的特征进行结合和组合。
186.此外，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括至少一个该特征。在本申请的描述中，“多个”的含义是至少两个，例如两个，三个等，除非另有明确具体的限定。
187.流程图中或在此以其他方式描述的任何过程或方法描述可以被理解为，表示包括一个或更多个用于实现定制逻辑功能或过程的步骤的可执行指令的代码的模块、片段或部分，并且本申请的优选实施方式的范围包括另外的实现，其中可以不按所示出或讨论的顺序，包括根据所涉及的功能按基本同时的方式或按相反的顺序，来执行功能，这应被本申请的实施例所属技术领域的技术人员所理解。
188.在流程图中表示或在此以其他方式描述的逻辑和/或步骤，例如，可以被认为是用于实现逻辑功能的可执行指令的定序列表，可以具体实现在任何计算机可读介质中，以供指令执行系统、装置或设备(如基于计算机的系统、包括处理器的系统或其他可以从指令执行系统、装置或设备取指令并执行指令的系统)使用，或结合这些指令执行系统、装置或设备而使用。就本说明书而言，"计算机可读介质"可以是任何可以包含、存储、通信、传播或传输程序以供指令执行系统、装置或设备或结合这些指令执行系统、装置或设备而使用的装置。计算机可读介质的更具体的示例(非穷尽性列表)包括以下：具有一个或多个布线的电连接部(电子装置)，便携式计算机盘盒(磁装置)，随机存取存储器(ram)，只读存储器(rom)，可擦除可编辑只读存储器(eprom或闪速存储器)，光纤装置，以及便携式光盘只读存储器(cdrom)。另外，计算机可读介质甚至可以是可在其上打印所述程序的纸或其他合适的介质，因为可以例如通过对纸或其他介质进行光学扫描，接着进行编辑、解译或必要时以其他合适方式进行处理来以电子方式获得所述程序，然后将其存储在计算机存储器中。
189.应当理解，本申请的各部分可以用硬件、软件、固件或它们的组合来实现。在上述
实施方式中，多个步骤或方法可以用存储在存储器中且由合适的指令执行系统执行的软件或固件来实现。如，如果用硬件来实现和在另一实施方式中一样，可用本领域公知的下列技术中的任一项或他们的组合来实现：具有用于对数据信号实现逻辑功能的逻辑门电路的离散逻辑电路，具有合适的组合逻辑门电路的专用集成电路，可编程门阵列(pga)，现场可编程门阵列(fpga)等。
190.本技术领域的普通技术人员可以理解实现上述实施例方法携带的全部或部分步骤是可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，该程序在执行时，包括方法实施例的步骤之一或其组合。
191.此外，在本申请各个实施例中的各功能单元可以集成在一个处理模块中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个模块中。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。所述集成的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。
192.上述提到的存储介质可以是只读存储器，磁盘或光盘等。尽管上面已经示出和描述了本申请的实施例，可以理解的是，上述实施例是示例性的，不能理解为对本申请的限制，本领域的普通技术人员在本申请的范围内可以对上述实施例进行变化、修改、替换和变型。