Front-end development page debugging system, method, electronic device and storage medium

Abstract

The present disclosure provides a debugging system, method, electronic device and storage medium for a front-end development page, and relates to the field of computer technology, in particular to the field of front-end development technology, and the field of front-end applet page development technology. The specific implementation scheme is: the debugging plug-in module monitors the interface call request of the front-end development page, and sends the interface call request to the simulation server when it is determined that the interface call request is not to be intercepted; wherein the interface call request contains the identification information of the interface to be called; the simulation server receives the interface call request sent by the debugging plug-in module, and determines the target response data corresponding to the identification information of the interface to be called from the local simulation data, and returns the target response data to the front-end development page. In the case where the back-end service is not completed, the development and debugging of the front-end page is started, so as to achieve the effect of parallel development of the front-end page and the back-end service, and improve the efficiency of the front-end development.

Description

Technical Field

[0001] The present disclosure relates to the field of computer technology, further to the field of front-end development technology, and the field of front-end applet page development technology, and in particular to a debugging system, method, electronic device and storage medium for a front-end development page. Background Art

[0002] The development of applications is usually divided into front-end pages and back-end services. The development and debugging of front-end pages are usually strongly dependent on back-end services. That is, the development of front-end pages, which are post-tasks, can only be started after the back-end services (such as server-side interface functions and data, etc.) as the pre-tasks are ready. Summary of the invention

[0003] The present invention provides a debugging system, method, electronic device and storage medium for a front-end development page.

[0004] According to one aspect of the present disclosure, a debugging system for a front-end development page is provided, the debugging system comprising: a simulation server, a debugging plug-in module,

[0005] The debugging plug-in module is used to monitor the interface call request of the front-end development page, and when it is determined that the interface call request is not to be intercepted, send the interface call request to the simulation server; wherein the interface call request contains the identification information of the interface to be called;

[0006] The simulation server is used to receive the interface call request sent by the debugging plug-in module, and determine the target response data corresponding to the identification information of the interface to be called from the local simulation data, and return the target response data to the front-end development page.

[0007] According to another aspect of the present disclosure, a debugging system for a front-end development page is provided, the debugging system comprising: a simulation server, the simulation server comprising: a simulation data module, a routing module, a file service module,

[0008] The simulation data module is used to store custom response data;

[0009] The routing module is used to store the correspondence between the interface identifier and the identification information of the response data; the file service module is used to monitor the interface call request of the front-end development page, and when the interface call request is monitored, based on the identification information of the interface to be called, query the identification information of the target response data corresponding to the identification information of the interface to be called in the routing module, and obtain the target response data from the simulation data module according to the identification information of the target response data, and return the target response data to the front-end development page; wherein the interface call request contains the identification information of the interface to be called.

[0010] According to another aspect of the present disclosure, a debugging method for a front-end development page is provided, which is applied to a debugging system for a front-end development page, wherein the debugging system comprises: a simulation server and a debugging plug-in module; the method comprises:

[0011] The debugging plug-in module monitors the interface call request of the front-end development page, and sends the interface call request to the simulation server when it is determined that the interface call request is not to be intercepted; wherein the interface call request includes identification information of the interface to be called;

[0012] The simulation server receives the interface call request sent by the debugging plug-in module, determines the target response data corresponding to the identification information of the interface to be called from the local simulation data, and returns the target response data to the front-end development page.

[0013] According to another aspect of the present disclosure, a debugging method for a front-end development page is provided, which is applied to a debugging system for a front-end development page, wherein the debugging system comprises: a simulation server, wherein the simulation server comprises: a simulation data module, a routing module, and a file service module; the method comprises:

[0014] The simulation data module stores custom response data;

[0015] The routing module stores the corresponding relationship between the interface identifier and the identification information of the response data;

[0016] The file service module monitors the interface call request of the front-end development page, and when the interface call request is monitored, based on the identification information of the interface to be called, queries the identification information of the target response data corresponding to the identification information of the interface to be called in the routing module, and obtains the target response data from the simulation data module according to the identification information of the target response data, and returns the target response data to the front-end development page; wherein the interface call request contains the identification information of the interface to be called.

[0017] According to another aspect of the present disclosure, there is provided an electronic device, comprising:

[0018] at least one processor; and

[0019] a memory communicatively connected to the at least one processor; wherein,

[0020] The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to execute the debugging method of the front-end development page described in any one of the present disclosure.

[0021] According to another aspect of the present disclosure, a non-transitory computer-readable storage medium storing computer instructions is provided, wherein the computer instructions are used to enable the computer to execute the debugging method of the front-end development page described in any one of the present disclosure.

[0022] According to another aspect of the present disclosure, a computer program product is provided, including a computer program, wherein when the computer program is executed by a processor, the computer program implements the debugging method of the front-end development page described in any one of the present disclosure.

[0023] In the disclosed embodiment, when the backend service is not fully developed, the development and debugging of the frontend page is started, so as to achieve the effect of parallel development of the frontend page and the backend service, thereby improving the efficiency of the frontend development.

[0024] It should be understood that the content described in this section is not intended to identify the key or important features of the embodiments of the present disclosure, nor is it intended to limit the scope of the present disclosure. Other features of the present disclosure will become easily understood through the following description. BRIEF DESCRIPTION OF THE DRAWINGS

[0025] The accompanying drawings are used to better understand the present solution and do not constitute a limitation of the present disclosure.

[0026] Figure 1 It is a schematic diagram of a debugging system for front-end development pages according to the present disclosure;

[0027] Figure 2 is a schematic diagram of a configuration interface according to the present disclosure;

[0028] Figure 3 is another schematic diagram of configuring an interface according to the present disclosure;

[0029] Figure 4 It is a schematic diagram of a debugging implementation method of a front-end development page according to the present disclosure;

[0030] Figure 5 is another schematic diagram of a debugging system for a front-end development page according to the present disclosure;

[0031] Figure 6 It is a schematic diagram of a debugging method for a front-end development page according to the present disclosure;

[0032] Figure 7 is another schematic diagram of a debugging method for a front-end development page according to the present disclosure;

[0033] Figure 8 It is a block diagram of an electronic device used to implement the debugging method of the front-end development page of the embodiment of the present disclosure. DETAILED DESCRIPTION

[0034] The following is a description of exemplary embodiments of the present disclosure in conjunction with the accompanying drawings, including various details of the embodiments of the present disclosure to facilitate understanding, which should be considered as merely exemplary. Therefore, it should be recognized by those of ordinary skill in the art that various changes and modifications may be made to the embodiments described herein without departing from the scope and spirit of the present disclosure. Similarly, for the sake of clarity and conciseness, descriptions of well-known functions and structures are omitted in the following description.

[0035] In the related art, in order to realize the development of the front-end page when the back-end service is not completed, or to realize the demand of parallel development of the front-end page and the back-end service, in one implementation scheme adopted, a data file is created locally in advance, and then when the front-end page is developed, the created local data file is directly imported by the import method, and the imported data file is used as the simulated interface data returned by the back-end service to further realize the development of the front-end page. Importing data files by the import method requires modifying the current project code (i.e., adding simulated data introduction logic code in the current project code) to adapt to the interface data request method of the front-end page development, so that there is a tendency of code import when data is imported, and when the back-end service development is completed and the completed back-end service code can be accessed, it is necessary to delete the code added for importing simulated data. Moreover, for large-scale front-end development projects, there are usually many back-end services involved, such as interfaces, etc., so a large amount of paging data is involved, which makes the manual creation of data files more labor-intensive.

[0036] In order to solve the above problems, the debugging system of the front-end development page provided by the embodiment of the present invention utilizes the debugging plug-in module to monitor the interface call request of the front-end development page, and sends the interface call request to the simulation server when it is determined that the interface call request is not intercepted. The reception, interception and forwarding of the interface call request can be realized without modifying the code. Furthermore, when the simulation server receives the interface call request sent by the debugging plug-in module, it determines the target response data corresponding to the identification information of the interface to be called from the local simulation data, and returns the target response data to the front-end development page. In this way, the development and debugging of the front-end page can be started when the back-end service is not completed, so as to achieve the effect of parallel development of the front-end page and the back-end service, thereby improving the efficiency of the front-end development.

[0037] In one embodiment of the present disclosure, a debugging system for a front-end development page is provided. Figure 1 The debugging system 100 of the front-end development page includes: a debugging plug-in module 110, a front-end development page 120 and a simulation server 130.

[0038] The debugging plug-in module 110 and the front-end development page 120 may be function modules or software modules working on the same or different physical machine devices as the simulation server 130, and the physical machine devices may belong to the same or different cluster systems. The debugging plug-in module 110, the front-end development page 120 and the simulation server 130 may interact with each other.

[0039] The debugging plug-in module 110 is used to monitor the interface call request of the front-end development page, and send the interface call request to the simulation server when it is determined not to intercept the interface call request; wherein the interface call request includes the identification information of the interface to be called.

[0040] The debugging plug-in module 110 can be a plug-in developed and expanded on the basis of the Chrome plug-in, which can monitor the interface call request of the front-end development page, and send the interface call request to the simulation server when it is determined that the interface call request is not intercepted.

[0041] In a possible implementation, the front-end development page 120 may be a front-end applet development page. Exemplarily, the front-end applet development page may be a front-end page of any applet to be developed in the front-end device.

[0042] When the front-end development page 120 is a front-end applet development page, the debugging plug-in module can be used to monitor the interface call request of the front-end applet development page, so as to further realize the development of the front-end applet development page when the back-end service is not completed, or realize the need of parallel development of the front-end applet development page and the back-end service.

[0043] In a possible implementation, the debugging plug-in module 110 may inject a target script file into the front-end development page 120 so that the target script file creates a target proxy object for the front-end development page 120, and then obtains the interface call request of the front-end development page 120 monitored by the target proxy object.

[0044] Exemplarily, the target script file may be a JavaScript script file (JS script file for short), which can create a target proxy object. The target proxy object may be an XMLHttpRequest object, XHR object for short, which can be used to interact with a server, and through XHR, a specific Uniform Resource Locator (URL) can be requested without refreshing the page, thereby obtaining data corresponding to the URL.

[0045] In the disclosed embodiment, the debugging plug-in module 110 injects a JS script file into the front-end development page 120. The script file can be understood as an installation program (such as a URL link, etc.), which can be run on the front-end device to create a target proxy object XHR for the front-end development page 120. XHR can monitor and obtain the interface call request of the front-end development page 120, and then the debugging plug-in module 110 obtains the interface call request of the front-end development page 120 monitored by XHR. Specifically, the debugging plug-in module 110 receives the interface call request of the front-end development page 120 sent by XHR and monitored and obtained.

[0046] The target script file is injected into the front-end development page 120 through the debugging plug-in module 110 to create a target proxy object in the front-end device, and then the target proxy object is used to monitor and obtain the interface call request of the front-end development page 120, thereby realizing real-time monitoring of the interface call request of the front-end development page 120.

[0047] Exemplarily, the identification information of the interface to be called contained in the above interface call request may be a URL identifier of the interface to be called, or a domain name / address and port number of the interface to be called, etc. The interface call request may be an interface call request for a backend server, used to obtain interface response data of the backend server.

[0048] After monitoring the interface call request of the front-end development page 120, the debugging plug-in module 110 can further determine whether to intercept the interface call request. Specifically, determining whether to intercept the interface call request can be: judging whether the identification information of the interface to be called contained in the interface call request exists in the debugging plug-in module 110. If it exists, it indicates that the debugging plug-in module 110 stores the response data corresponding to the identification information of the interface to be called, that is, the debugging plug-in module 110 can return the corresponding response data to the front-end development page 120, so there is no need to send the interface call request to the simulation server 130. Otherwise, it indicates that the debugging plug-in module 110 does not store the response data corresponding to the interface call request. At this time, the interface call request is sent to the simulation server 130.

[0049] The simulation server 130 is used to receive the interface call request sent by the debugging plug-in module 110, determine the target response data corresponding to the identification information of the interface to be called from the local simulation data, and return the target response data to the front-end development page 120.

[0050] The simulation server 130 may store local simulation data, which includes response data corresponding to different interface identifiers. Further, after receiving the interface call request sent by the debugging plug-in module 110, the simulation server 130 may determine the target response data corresponding to the identification information of the interface to be called from the local simulation data, and return the target response data to the front-end development page 120.

[0051] In the disclosed embodiment, a debugging plug-in module is utilized to monitor the interface call request of the front-end development page, and when it is determined that the interface call request is not to be intercepted, the interface call request is sent to a simulation server. Thus, the reception, interception and forwarding of the interface call request can be realized without modifying the code. Furthermore, when the simulation server receives the interface call request sent by the debugging plug-in module, it determines the target response data corresponding to the identification information of the interface to be called from the local simulation data, and returns the target response data to the front-end development page. Thus, when the development of the back-end service is not completed, the development and debugging of the front-end page is started, thereby achieving the effect of parallel development of the front-end page and the back-end service, and improving the efficiency of the front-end development.

[0052] In a possible implementation, the debugging plug-in module 110 may also be used to:

[0053] Obtaining the target interface information input by the user in the first interface input box, determining whether the interface server corresponding to the target interface information has been developed, and downloading and storing the response data of the interface server corresponding to the target interface information when the interface server corresponding to the target interface information has been developed and a download enable switch for the response data is turned on;

[0054] The custom interface information input by the user in the second interface input box and the response data input in the response data input box corresponding to the second interface input box are obtained, and the interface identifier and the response data corresponding to the custom interface information are stored in the debugging plug-in module.

[0055] In the embodiment of the present disclosure, the debugging plug-in module 110 can set a configuration interface, which can be used to configure the first interface input box, the port input box, and the download enable switch button ( Figure 2 ), add and delete buttons, etc. Figure 2 As shown. The user can input the target interface information through the first interface input box, input the target port information through the port input box, and select whether to turn on the download enable switch button for the response data. The target interface information can be the domain name or address of the interface server, and the interface server that has been developed has the response data.

[0056] The debugging plug-in module 110 may also store identification information of an interface server that has been developed. Furthermore, the debugging plug-in module 110 may obtain the target interface information input by the user in the first interface input box through the above configuration interface, and further, based on the identification information of the interface server that has been developed, determine whether the interface server corresponding to the target interface information has been developed, and download and store the response data of the interface server corresponding to the target interface information when the interface server corresponding to the target interface information has been developed and the download enable switch of the response data is turned on. Exemplarily, the data file format corresponding to the response data of the interface server corresponding to the target interface information that is downloaded and stored may be: JSON data file, etc.

[0057] In the configuration interface of the debugging plug-in module 110, a second interface input box, a response data input box corresponding to the second interface input box, and a start switch button, a delete button, and an add button for the content in the second interface input box and the corresponding response data input box can also be configured. Figure 3 The user can input the custom interface information through the second interface input box, input the response data corresponding to the custom interface information through the response data input box corresponding to the second interface input box, and choose whether to enable the custom interface information and its corresponding response data.

[0058] Furthermore, the debugging plug-in module 110 can obtain the custom interface information entered by the user in the second interface input box and the response data entered in the response data input box corresponding to the second interface input box through the above configuration interface. Wherein, the custom interface information can include the interface information of the interface server that has been developed or not. If the custom interface information corresponds to the interface information of the interface server that has been developed, then the response data entered in the response data input box corresponding to the second interface input box is: the modification or reset of the response data of the interface server that has been developed; if the custom interface information corresponds to the interface information of the interface server that has not been developed, then the response data entered in the response data input box corresponding to the second interface input box is: the setting of the response data of the interface server that has not been developed. Further, the interface identification and response data corresponding to the obtained custom interface information are stored in the debugging plug-in module 110, and when the custom interface information and its corresponding response data are selected to be enabled, when the debugging plug-in module 110 monitors the interface call, the target response data corresponding to the identification information of the interface to be called can be obtained from the stored custom interface information and its corresponding response data, and returned to the front-end development page 120.

[0059] Figure 2 and Figure 3 The add and delete buttons in can respectively realize the single or batch download and storage of the response data of the interface servers that have been developed, and the single or batch setting and storage of the response data of the interface servers that have not been developed.

[0060] In the disclosed embodiment, the above-mentioned configuration interface can be used to realize single or batch downloading and storage of response data of interface servers that have completed development, as well as modification and storage of response data of interface servers that have completed development, and single or batch setting and storage of response data of interface servers that have not completed development, so that after monitoring the interface call request of the front-end development page 120, the target response data corresponding to the interface call request can be returned to the front-end development page 120 based on the stored response data.

[0061] In a possible implementation, the above-mentioned debugging plug-in module 110 may also be used for:

[0062] When request interception is enabled, based on the identification information of the interface to be called and the interface identification corresponding to the custom interface information stored in the debugging plug-in module, determine whether to intercept the interface call request. If so, determine the target response data corresponding to the identification information of the interface to be called from the debugging plug-in module, and return the target response data to the front-end development page.

[0063] In the disclosed embodiment, the interface identifier and response data corresponding to the user-configured custom interface information are stored in the debugging plug-in module 110, and a request interception start switch can also be configured in the debugging plug-in module 110. Furthermore, when request interception is enabled, when an interface call request is received, it can be determined whether the identification information of the interface to be called in the interface call request is the same as the interface identifier corresponding to the custom interface information stored in the debugging plug-in module 110. If they are the same, it is determined to intercept the interface call request, and further, the target response data corresponding to the identification information of the interface to be called is determined from the debugging plug-in module 110, and the target response data is returned to the front-end development page 120, and there is no need to further send the interface call request to the simulation server to obtain the target response data.

[0064] In the disclosed embodiment, when request interception is enabled, the target response data corresponding to the identification information of the interface to be called is preferentially determined from the debugging plug-in module 110, and the determined target response data is returned to the front-end development page 120 to quickly obtain the target response data corresponding to the interface call request, thereby further improving the efficiency of the front-end development.

[0065] In a possible implementation, the simulation server 130 may include: a simulation data module, a routing module, and a file service module. The simulation server 130 receives the interface call request sent by the debugging plug-in module 110, and determines the target response data corresponding to the identification information of the interface to be called from the local simulation data. The implementation process of returning the target response data to the front-end development page 120 may include:

[0066] The simulation data module can be used to store the response data of the interface server corresponding to the target interface information downloaded by the debugging plug-in module, and store custom response data. The custom response data may include the interface identifier set by the user and its corresponding response data, and may also include the interface identifier obtained by the simulation server 130 from other devices and its corresponding response data, which is not limited in the embodiments of the present disclosure.

[0067] The routing module can be used to store the correspondence between the interface identifier and the identification information of the response data. Exemplarily, the routing module can store the correspondence between the response data of the interface server corresponding to the target interface information downloaded and stored in the simulation data module by the debugging plug-in module 110 and the target interface identifier, as well as the correspondence between the custom response data stored in the simulation data module and the interface identifier corresponding to the custom response data.

[0068] The file service module is used to monitor the interface call request, and when the interface call request is monitored, based on the identification information of the interface to be called, query the identification information of the target response data corresponding to the identification information of the interface to be called in the routing module, and obtain the target response data from the simulation data module according to the identification information of the target response data, and return the target response data to the front-end development page.

[0069] In the disclosed embodiment, when the simulation server fails to match the response data corresponding to the interface call request in the debugging plug-in module, after using the file service module to listen to the interface call request, it queries the correspondence between the interface identifier stored in the routing module and the identification information of the response data, obtains the identification information of the target response data corresponding to the identification information of the interface to be called, and then obtains the target response data from the simulation data module, and returns the target response data to the front-end development page, thereby starting the development and debugging of the front-end page when the back-end service is not completed, achieving the effect of parallel development of the front-end page and the back-end service, thereby improving the efficiency of the front-end development.

[0070] In a possible implementation, the simulation server 130 may further include a file system module.

[0071] The file system module is used to monitor whether the response data stored in the simulation data module has changed, and send data change information to the routing module when the response data stored in the simulation data module has changed;

[0072] The routing module is also used to update the corresponding relationship between the interface identifier and the identification information of the response data when receiving the data change information.

[0073] In actual applications, after the simulation server is started, there may be additions and deletions of files, etc. Therefore, the file system module is used to monitor whether the response data stored in the simulation data module has changed, so that when the response data stored in the simulation data module has changed, the correspondence between the interface identifier stored in the routing module and the identification information of the response data is updated, so that the correspondence between the interface identifier stored in the routing module and the identification information of the response data can be updated in real time with the response data stored in the simulation data module, without the need to repeatedly start the simulation server, so as to more accurately obtain the target response data corresponding to the interface call request.

[0074] For example, Figure 4As shown, the debugging plug-in module can perform plug-in data configuration, and the plug-in data configuration may include: the custom interface information entered by the user in the second interface input box, and the response data entered in the response data input box corresponding to the second interface input box; it may also include: the target interface information entered by the user in the first interface input box, and the response data (i.e., the response data of the interface server corresponding to the target interface information) downloaded when the interface server corresponding to the target interface information is developed and the download enable switch of the response data is turned on. Figure 4 The obtained custom interface information and its corresponding response data are stored in the debugging plug-in module, and the response data of the interface server corresponding to the downloaded target interface information is stored in the simulation data module of the simulation server ( Figure 4 Mock data in the local / Downloads directory).

[0075] The debugging plug-in module can be an extended bdmock plug-in in the Chrome plug-in. The debugging plug-in module injects a JS script file into the front-end development page so that the JS script file creates a proxy XHR object for the front-end development page and obtains the interface call request of the front-end development page monitored by the XHR object. Furthermore, when request interception is enabled, based on the identification information of the interface to be called and the interface identification corresponding to the custom interface information stored in the debugging plug-in module, it is determined whether to intercept the interface call request. In the case of interception, the target response data corresponding to the identification information of the interface to be called is determined from the debugging plug-in module, and the target response data is returned to the front-end development page.

[0076] The debugging plug-in module sends the interface call request to the simulation server without intercepting the interface call request.

[0077] The simulation data module of the simulation server stores the custom response data and the response data of the interface server corresponding to the target interface information downloaded by the debugging plug-in module. The routing module of the simulation server stores the correspondence between the interface identifier and the identification information of the response data. When the file service module of the simulation server listens to the interface call request, based on the identification information of the interface to be called contained in the interface call request, it queries the routing module for the identification information of the target response data corresponding to the identification information of the interface to be called, and obtains the target response data from the simulation data module according to the identification information of the target response data, and returns the target response data to the front-end development page.

[0078] The file system module of the simulation server monitors whether the response data stored in the simulation data module changes, and when the response data stored in the simulation data module changes, it sends data change information to the routing module, and then the routing module updates the correspondence between the interface identifier and the identification information of the response data.

[0079] In a possible implementation, Figure 5 Another schematic diagram of the debugging system of the front-end development page is shown. The debugging system 200 of the front-end development page may include: a front-end development page 210 and a simulation server 220, wherein the simulation server 220 may include: a simulation data module 221, a routing module 222, and a file service module 223.

[0080] The simulation data module 221 is used to store custom response data, wherein the custom response data may include an interface identifier and its corresponding response data set by a user, and may also include an interface identifier and its corresponding response data obtained by the simulation server 220 from other devices, which is not limited in the present embodiment.

[0081] The routing module 222 is used to store the corresponding relationship between the interface identifier and the identification information of the response data. The simulation data module 221 stores the custom response data, and correspondingly, the routing module 222 stores the corresponding relationship between the interface identifier and the identification information of the custom response data.

[0082] The file service module 223 is used to monitor the interface call request of the front-end development page 210, and when the interface call request is monitored, based on the identification information of the interface to be called, query the identification information of the target response data corresponding to the identification information of the interface to be called in the routing module 222, and obtain the target response data from the simulation data module 221 according to the identification information of the target response data, and return the target response data to the front-end development page 210; wherein, the interface call request contains the identification information of the interface to be called.

[0083] In actual application, the file service module 223 can monitor the proxy XHR object carried in the front-end development page 210 to obtain the interface call request of the front-end development page 210, and then obtain the target response data corresponding to the interface call request. In one embodiment, the front-end development page can be a front-end applet development page.

[0084] In the disclosed embodiment, custom response data is stored in a simulation data module of a simulation server, and then when the file service module listens to an interface call request, the identification information of the target response data corresponding to the identification information of the interface to be called can be queried in the routing module based on the identification information of the interface to be called contained in the interface call request, and then the target response data can be obtained from the simulation data module, and the target response data can be returned to the front-end development page, thereby starting the development and debugging of the front-end page when the back-end service is not completed, achieving the effect of parallel development of the front-end page and the back-end service, thereby improving the efficiency of the front-end development.

[0085] In a possible implementation, the simulation server 220 may further include a file system module (not shown in the figure). The file system module may be used to monitor whether the custom response data stored in the simulation data module 221 is changed, and send data change information to the routing module 222 when the custom response data stored in the simulation data module 221 is changed.

[0086] The routing module 222 is further configured to update the correspondence between the interface identifier and the identifier information of the response data when receiving the data change information.

[0087] In actual applications, after the simulation server is started, there may be additions and deletions of files, etc. Therefore, the file system module is used to monitor whether the custom response data stored in the simulation data module has changed, so that when the custom response data stored in the simulation data module has changed, the correspondence between the interface identifier stored in the routing module and the identification information of the response data is updated, so that the correspondence between the interface identifier stored in the routing module and the identification information of the response data can be updated in real time with the custom response data stored in the simulation data module, without the need to repeatedly start the simulation server, so as to more accurately obtain the target response data corresponding to the interface call request.

[0088] In a possible implementation, the debugging system of the front-end development page may include a debugging plug-in module. The debugging plug-in module may inject a target script file into the front-end development page so that the target script file creates a target proxy object for the front-end development page; and obtain an interface call request of the front-end development page monitored by the target proxy object, wherein the interface call request includes identification information of the interface to be called.

[0089] The debugging plug-in module can also obtain the custom interface information entered by the user in the second interface input box, and the response data entered in the response data input box corresponding to the second interface input box, and store the interface identifier and response data corresponding to the obtained custom interface information. Specifically, the implementation method of the debugging plug-in module obtaining and storing the interface identifier and response data corresponding to the custom interface information can be found in the above description, and the embodiments of the present disclosure will not be repeated here.

[0090] Furthermore, when request interception is enabled, the debugging plug-in module can determine whether to intercept the interface call request based on the identification information of the interface to be called and the interface identification corresponding to the custom interface information stored in the debugging plug-in module. If so, the target response data corresponding to the identification information of the interface to be called is determined from the debugging plug-in module, and the target response data is returned to the front-end development page.

[0091] In the disclosed embodiment, the debugging plug-in module is capable of modifying and storing the response data of the interface server whose development has been completed, and individually or in batches setting and storing the response data of the interface server whose development has not been completed, so that after monitoring the interface call request of the front-end development page, the target response data corresponding to the identification information of the interface to be called is determined from the debugging plug-in module, and the determined target response data is returned to the front-end development page to quickly obtain the target response data corresponding to the interface call request, so that the development and debugging of the front-end page can be started when the back-end service is not completed, so as to achieve the effect of parallel development of the front-end page and the back-end service, thereby improving the efficiency of the front-end development.

[0092] The present disclosure also provides a method for debugging a front-end development page. Figure 6 , applied to the debugging system of the first front-end development page, the debugging system of the front-end development page includes: a simulation server and a debugging plug-in module; the method includes:

[0093] S301, the debugging plug-in module monitors the interface call request of the front-end development page, and sends the interface call request to the simulation server when it is determined that the interface call request is not to be intercepted; wherein the interface call request includes identification information of the interface to be called;

[0094] S302, the simulation server receives the interface call request sent by the debugging plug-in module, determines the target response data corresponding to the identification information of the interface to be called from the local simulation data, and returns the target response data to the front-end development page.

[0095] In the disclosed embodiment, a debugging plug-in module is utilized to monitor the interface call request of the front-end development page, and when it is determined that the interface call request is not to be intercepted, the interface call request is sent to a simulation server. Thus, the reception, interception and forwarding of the interface call request can be realized without modifying the code. Furthermore, when the simulation server receives the interface call request sent by the debugging plug-in module, it determines the target response data corresponding to the identification information of the interface to be called from the local simulation data, and returns the target response data to the front-end development page. Thus, when the development of the back-end service is not completed, the development and debugging of the front-end page is started, thereby achieving the effect of parallel development of the front-end page and the back-end service, and improving the efficiency of the front-end development.

[0096] In a possible implementation, the debugging plug-in module monitors the interface call request of the front-end development page, including:

[0097] The debugging plug-in module injects a target script file into the front-end development page so that the target script file creates a target proxy object for the front-end development page; and obtains an interface call request of the front-end development page monitored by the target proxy object.

[0098] In a possible implementation, the above method further includes:

[0099] The debugging plug-in module obtains the target interface information input by the user in the first interface input box, determines whether the interface server corresponding to the target interface information has been developed, and downloads and stores the response data of the interface server corresponding to the target interface information when the interface server corresponding to the target interface information has been developed and the download enable switch of the response data is turned on;

[0100] The debugging plug-in module obtains the custom interface information input by the user in the second interface input box and the response data input in the response data input box corresponding to the second interface input box, and stores the interface identifier and response data corresponding to the custom interface information in the debugging plug-in module.

[0101] In a possible implementation, the above method further includes:

[0102] When request interception is enabled, the debugging plug-in module determines whether to intercept the interface call request based on the identification information of the interface to be called and the interface identification corresponding to the custom interface information stored in the debugging plug-in module. If so, the target response data corresponding to the identification information of the interface to be called is determined from the debugging plug-in module, and the target response data is returned to the front-end development page.

[0103] In a possible implementation, the simulation server includes: a simulation data module, a routing module, and a file service module, wherein the simulation server in step S302 receives the interface call request sent by the debugging plug-in module, determines the target response data corresponding to the identification information of the interface to be called from the local simulation data, and returns the target response data to the front-end development page, including:

[0104] The file service module monitors the interface call request, and when the interface call request is monitored, based on the identification information of the interface to be called, queries the identification information of the target response data corresponding to the identification information of the interface to be called in the routing module, and obtains the target response data from the simulation data module according to the identification information of the target response data, and returns the target response data to the front-end development page; wherein, the simulation data module stores the response data of the interface server corresponding to the target interface information downloaded by the debugging plug-in module, as well as the custom response data; and the routing module stores the correspondence between the interface identification and the identification information of the response data.

[0105] In a possible implementation, the simulation server further includes a file system module, and the method further includes:

[0106] The file system module monitors whether the response data stored in the simulation data module is changed, and when the response data stored in the simulation data module is changed, sends data change information to the routing module;

[0107] When receiving the data change information, the routing module updates the corresponding relationship between the interface identifier and the identifier information of the response data.

[0108] The present disclosure also provides another method for debugging a front-end development page. Figure 7 , applied to the debugging system of the second front-end development page, the debugging system of the front-end development page includes: a simulation server; the simulation server includes: a simulation data module, a routing module, and a file service module; the method includes:

[0109] S401, simulating a data module to store custom response data;

[0110] S402, the routing module stores the corresponding relationship between the interface identifier and the identification information of the response data;

[0111] S403, the file service module monitors the interface call request of the front-end development page, and when the interface call request is monitored, based on the identification information of the interface to be called, queries the identification information of the target response data corresponding to the identification information of the interface to be called in the routing module, and obtains the target response data from the simulation data module according to the identification information of the target response data, and returns the target response data to the front-end development page; wherein, the interface call request contains the identification information of the interface to be called.

[0112] In the disclosed embodiment, custom response data is stored in a simulation data module of a simulation server, and then when the file service module listens to an interface call request, the identification information of the target response data corresponding to the identification information of the interface to be called can be queried in the routing module based on the identification information of the interface to be called contained in the interface call request, and then the target response data can be obtained from the simulation data module, and the target response data can be returned to the front-end development page, thereby starting the development and debugging of the front-end page when the back-end service is not completed, achieving the effect of parallel development of the front-end page and the back-end service, thereby improving the efficiency of the front-end development.

[0113] In a possible implementation, the simulation server further includes a file system module, and the method further includes:

[0114] The file system module monitors whether the custom response data stored in the simulation data module is changed, and sends data change information to the routing module when the custom response data stored in the simulation data module is changed;

[0115] When receiving the data change information, the routing module updates the corresponding relationship between the interface identifier and the identifier information of the response data.

[0116] According to an embodiment of the present disclosure, the present disclosure also provides an electronic device, a readable storage medium and a computer program product.

[0117] The present disclosure also provides an electronic device, comprising:

[0118] at least one processor; and

[0119] a memory communicatively connected to at least one processor; wherein,

[0120] The memory stores instructions that can be executed by at least one processor. The instructions are executed by at least one processor to enable the at least one processor to perform any method in the present disclosure.

[0121] The present disclosure also provides a non-transitory computer-readable storage medium storing computer instructions, wherein the computer instructions are used to enable a computer to execute any one of the methods in the present disclosure.

[0122] The present disclosure also provides a computer program product, including a computer program, which implements any method in the present disclosure when executed by a processor.

[0123] Figure 8 A schematic block diagram of an example electronic device 500 that can be used to implement an embodiment of the present disclosure is shown. The electronic device is intended to represent various forms of digital computers, such as laptop computers, desktop computers, workstations, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. The electronic device can also represent various forms of mobile devices, such as personal digital processing, cellular phones, smart phones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely examples and are not intended to limit the implementation of the present disclosure described and / or required herein.

[0124] like Figure 8 As shown, the device 500 includes a computing unit 501, which can perform various appropriate actions and processes according to a computer program stored in a read-only memory (ROM) 502 or a computer program loaded from a storage unit 508 into a random access memory (RAM) 503. In the RAM 503, various programs and data required for the operation of the device 500 can also be stored. The computing unit 501, the ROM 502, and the RAM 503 are connected to each other via a bus 504. An input / output (I / O) interface 505 is also connected to the bus 504.

[0125] A number of components in the device 500 are connected to the I / O interface 505, including: an input unit 506, such as a keyboard, a mouse, etc.; an output unit 507, such as various types of displays, speakers, etc.; a storage unit 508, such as a disk, an optical disk, etc.; and a communication unit 509, such as a network card, a modem, a wireless communication transceiver, etc. The communication unit 509 allows the device 500 to exchange information / data with other devices through a computer network such as the Internet and / or various telecommunication networks.

[0126] The computing unit 501 may be a variety of general and / or special processing components with processing and computing capabilities. Some examples of the computing unit 501 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various dedicated artificial intelligence (AI) computing chips, various computing units running machine learning model algorithms, digital signal processors (DSPs), and any appropriate processors, controllers, microcontrollers, etc. The computing unit 501 performs the various methods and processes described above, such as the debugging method of the front-end development page. For example, in some embodiments, the debugging method of the front-end development page may be implemented as a computer software program, which is tangibly contained in a machine-readable medium, such as a storage unit 508. In some embodiments, part or all of the computer program may be loaded and / or installed on the device 500 via ROM 502 and / or communication unit 509. When the computer program is loaded into RAM 503 and executed by the computing unit 501, one or more steps of the debugging method of the front-end development page described above may be performed. Alternatively, in other embodiments, the computing unit 501 may be configured to perform the debugging method of the front-end development page by any other appropriate means (e.g., by means of firmware).

[0127] Various implementations of the systems and techniques described above herein can be implemented in digital electronic circuit systems, integrated circuit systems, field programmable gate arrays (FPGAs), application specific integrated circuits (ASICs), application specific standard products (ASSPs), systems on chips (SOCs), load programmable logic devices (CPLDs), computer hardware, firmware, software, and / or combinations thereof. These various implementations can include: being implemented in one or more computer programs that can be executed and / or interpreted on a programmable system including at least one programmable processor, which can be a special purpose or general purpose programmable processor that can receive data and instructions from a storage system, at least one input device, and at least one output device, and transmit data and instructions to the storage system, the at least one input device, and the at least one output device.

[0128] The program code for implementing the method of the present disclosure may be written in any combination of one or more programming languages. These program codes may be provided to a processor or controller of a general-purpose computer, a special-purpose computer, or other programmable data processing device, so that the program code, when executed by the processor or controller, enables the functions / operations specified in the flow chart and / or block diagram to be implemented. The program code may be executed entirely on the machine, partially on the machine, partially on the machine and partially on a remote machine as a stand-alone software package, or entirely on a remote machine or server.

[0129] In the context of the present disclosure, a machine-readable medium may be a tangible medium that may contain or store a program for use by or in conjunction with an instruction execution system, device, or equipment. A machine-readable medium may be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium may include, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, device, or equipment, or any suitable combination of the foregoing. A more specific example of a machine-readable storage medium may include an electrical connection based on one or more lines, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

[0130] To provide interaction with a user, the systems and techniques described herein can be implemented on a computer having: a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to the user; and a keyboard and pointing device (e.g., a mouse or trackball) through which the user can provide input to the computer. Other types of devices can also be used to provide interaction with the user; for example, the feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user can be received in any form (including acoustic input, voice input, or tactile input).

[0131] The systems and techniques described herein may be implemented in a computing system that includes back-end components (e.g., as a data server), or a computing system that includes middleware components (e.g., an application server), or a computing system that includes front-end components (e.g., a user computer with a graphical user interface or a web browser through which a user can interact with implementations of the systems and techniques described herein), or a computing system that includes any combination of such back-end components, middleware components, or front-end components. The components of the system may be interconnected by any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include: a local area network (LAN), a wide area network (WAN), and the Internet.

[0132] A computer system may include a client and a server. The client and the server are generally remote from each other and usually interact through a communication network. The relationship of client and server is generated by computer programs running on respective computers and having a client-server relationship with each other. The server may be a cloud server, a server of a distributed system, or a server combined with a blockchain.

[0133] It should be understood that the various forms of processes shown above can be used to reorder, add or delete steps. For example, the steps recorded in this disclosure can be executed in parallel, sequentially or in different orders, as long as the desired results of the technical solutions disclosed in this disclosure can be achieved, and this document does not limit this.

[0134] The above specific implementations do not constitute a limitation on the protection scope of the present disclosure. It should be understood by those skilled in the art that various modifications, combinations, sub-combinations and substitutions can be made according to design requirements and other factors. Any modification, equivalent substitution and improvement made within the spirit and principle of the present disclosure shall be included in the protection scope of the present disclosure.

Claims

1. A debugging system for a front-end development page, the debugging system comprising: A simulation server and a debugging plug-in module, wherein the debugging plug-in module and the front-end development page are functional modules or software modules that work on the same or different physical machine devices as the simulation server; The debugging plug-in module is used to monitor the interface call request of the front-end development page, and when it is determined that the interface call request is not to be intercepted, send the interface call request to the simulation server; wherein the interface call request contains the identification information of the interface to be called; The simulation server is used to receive the interface call request sent by the debugging plug-in module, determine the target response data corresponding to the identification information of the interface to be called from the local simulation data, and return the target response data to the front-end development page; Wherein, the simulation server includes: a simulation data module, a routing module, a file service module and a file system module; The simulation data module is used to store the response data of the interface server corresponding to the target interface information downloaded by the debugging plug-in module, and store the custom response data; the custom response data includes the custom interface information and its corresponding response data; The routing module is used to store the corresponding relationship between the interface identifier and the identification information of the response data; The file service module is used to monitor the interface call request sent by the debugging plug-in module, and when the interface call request is monitored, based on the identification information of the interface to be called, query the identification information of the target response data corresponding to the identification information of the interface to be called in the routing module, and obtain the target response data from the simulation data module according to the identification information of the target response data, and return the target response data to the front-end development page; The file system module is used to monitor whether the response data stored in the simulation data module is changed, and send data change information to the routing module when the response data stored in the simulation data module is changed; The routing module is further configured to update the correspondence between the interface identifier and the identifier information of the response data when the data change information is received.

2. The system according to claim 1, wherein: The debugging plug-in module is specifically used for: Inject a target script file into the front-end development page so that the target script file creates a target proxy object for the front-end development page; and obtain an interface call request of the front-end development page monitored by the target proxy object.

3. The system according to claim 1, wherein the debugging plug-in module is further used for: Obtaining target interface information input by the user in the first interface input box, determining whether the interface server corresponding to the target interface information has been developed, and downloading and storing response data of the interface server corresponding to the target interface information when the interface server corresponding to the target interface information has been developed and a download enable switch for response data is turned on; The custom interface information input by the user in the second interface input box and the response data input in the response data input box corresponding to the second interface input box are obtained, and the interface identifier and response data corresponding to the custom interface information are stored in the debugging plug-in module.

4. The system according to claim 3, wherein: The debugging plug-in module is also used to: When request interception is enabled, based on the identification information of the interface to be called and the interface identification corresponding to the custom interface information stored in the debugging plug-in module, it is determined whether to intercept the interface call request. If so, the target response data corresponding to the identification information of the interface to be called is determined from the debugging plug-in module, and the target response data is returned to the front-end development page.

5. The system according to any one of claims 1 to 4, wherein: The front-end development page is a front-end applet development page.

6. A debugging method for a front-end development page, applied to a debugging system for a front-end development page, the debugging system comprising: Simulate server and debug plugin modules; The debugging plug-in module and the front-end development page are functional modules or software modules that work on the same or different physical machine devices as the simulation server; the method includes: The debugging plug-in module monitors the interface call request of the front-end development page, and sends the interface call request to the simulation server when it is determined that the interface call request is not to be intercepted; wherein the interface call request includes identification information of the interface to be called; The simulation server receives the interface call request sent by the debugging plug-in module, determines the target response data corresponding to the identification information of the interface to be called from the local simulation data, and returns the target response data to the front-end development page; The simulation server includes: a simulation data module, a routing module, a file service module and a file system module; the simulation server receives the interface call request sent by the debugging plug-in module, and determines the target response data corresponding to the identification information of the interface to be called from the local simulation data, and returns the target response data to the front-end development page, including: The file service module monitors the interface call request sent by the debugging plug-in module, and when the interface call request is monitored, based on the identification information of the interface to be called, queries the identification information of the target response data corresponding to the identification information of the interface to be called in the routing module, and obtains the target response data from the simulation data module according to the identification information of the target response data, and returns the target response data to the front-end development page; wherein the simulation data module stores the response data of the interface server corresponding to the target interface information downloaded by the debugging plug-in module, and the custom response data; the custom response data includes the custom interface information and its corresponding response data; the routing module stores the correspondence between the interface identification and the identification information of the response data; The method further comprises: The file system module monitors whether the response data stored in the simulation data module is changed, and sends data change information to the routing module when the response data stored in the simulation data module is changed; When receiving the data change information, the routing module updates the corresponding relationship between the interface identifier and the identifier information of the response data.

7. The method according to claim 6, wherein: The debugging plug-in module monitors the interface call request of the front-end development page, including: The debugging plug-in module injects a target script file into the front-end development page so that the target script file creates a target proxy object for the front-end development page; and obtains an interface call request of the front-end development page monitored by the target proxy object.

8. The method according to claim 6, further comprising: The debugging plug-in module obtains the target interface information input by the user in the first interface input box, determines whether the interface server corresponding to the target interface information has been developed, and downloads and stores the response data of the interface server corresponding to the target interface information when the interface server corresponding to the target interface information has been developed and the download enable switch of the response data is turned on; The debugging plug-in module obtains the custom interface information input by the user in the second interface input box and the response data input in the response data input box corresponding to the second interface input box, and stores the interface identifier and response data corresponding to the custom interface information in the debugging plug-in module.

9. The method according to claim 8, further comprising: When request interception is enabled, the debugging plug-in module determines whether to intercept the interface call request based on the identification information of the interface to be called and the interface identification corresponding to the custom interface information stored in the debugging plug-in module. If so, the target response data corresponding to the identification information of the interface to be called is determined from the debugging plug-in module, and the target response data is returned to the front-end development page.

10. An electronic device, comprising: at least one processor; as well as a memory communicatively connected to the at least one processor; wherein, The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to perform the method according to any one of claims 6 to 9.

11. A non-transitory computer-readable storage medium storing computer instructions, wherein: The computer instructions are used to cause the computer to execute the method according to any one of claims 6-9.

12. A computer program product comprising a computer program, which, when executed by a processor, implements the method according to any one of claims 6 to 9.

Images