Micro-frontend-based page debugging method and device, storage medium and electronic equipment

Abstract

The present disclosure relates to the technical field of Internet, and provides a micro-frontend-based page debugging method, a micro-frontend-based page debugging device, a computer storage medium and an electronic device, wherein the micro-frontend-based page debugging method comprises: in response to a page debugging request for a sub-application, obtaining a to-be-debugged page script corresponding to the sub-application from a sub-application end; determining a parent application to which the sub-application belongs, and obtaining a page description file of the parent application from a parent application end; generating a to-be-debugged page description file according to the to-be-debugged page script and the page description file; returning the to-be-debugged page description file to a client end, so as to enable the client end to load a page corresponding to the to-be-debugged page description file, and determine a page debugging result of the sub-application according to the page. The present disclosure can simplify the page debugging steps of the sub-application, and improve the page debugging efficiency of the sub-application.

Description

TECHNICAL FIELD

[0001] The present disclosure relates to the technical field of Internet, and particularly relates to a page debugging method based on micro-frontend, a page debugging device based on micro-frontend, a computer storage medium and an electronic device. BACKGROUND

[0002] Micro-frontend is an architecture similar to micro-service, which applies the concept of micro-service to the browser side, that is, the web application is changed from a single application to multiple small front-end applications, and each small front-end application can also be independently run, independently developed, independently deployed, or aggregated into a parent application.

[0003] At present, when the page of a sub-application needs to be debugged, the host configuration is usually manually modified by the R&D personnel of the sub-application to point the domain name to the to-be-debugged page in the local development environment. However, the debugging process usually faces the situation of needing to access multiple environments at the same time, and thus the R&D personnel need to switch the host configuration back and forth, which is complicated and tedious to operate.

[0004] Therefore, there is an urgent need in the art to develop a new page debugging method and device based on micro-frontend.

[0005] It should be noted that the information disclosed in the above background section is only used to strengthen the understanding of the background of the present disclosure. SUMMARY

[0006] The purpose of the present disclosure is to provide a page debugging method based on micro-frontend, a page debugging device based on micro-frontend, a computer storage medium and an electronic device, thereby at least to some extent avoiding the problem of complicated and tedious page debugging process of sub-application in the related art.

[0007] Other characteristics and advantages of the present disclosure will become apparent from the following detailed description, or will be learned by practice of the present disclosure.

[0008] According to a first aspect of the present disclosure, a micro-frontend-based page debugging method is provided, applied to a proxy server, the proxy server being configured to forward data between a sub-application end, a client end and a parent application end, the sub-application end being a terminal on which a sub-application is installed, the parent application end being a terminal on which a parent application is installed, the sub-application running in an environment provided by the parent application, the method comprising: in response to a page debugging request for the sub-application, obtaining a to-be-debugged page script corresponding to the sub-application from the sub-application end; determining a parent application to which the sub-application belongs, and obtaining a page description file of the parent application from the parent application end; generating a to-be-debugged page description file according to the to-be-debugged page script and the page description file; and returning the to-be-debugged page description file to the client end, so that the client end loads a page corresponding to the to-be-debugged page description file and determines a page debugging result of the sub-application according to the page.

[0009] In an example embodiment of the present disclosure, the obtaining of the to-be-debugged page script corresponding to the sub-application from the sub-application end comprises: determining a target storage address of the to-be-debugged page script corresponding to the sub-application according to a preconfigured correspondence between each sub-application and a storage address of a to-be-debugged page script thereof; the target storage address being located in the sub-application end; and obtaining the to-be-debugged page script from the target storage address.

[0010] In an example embodiment of the present disclosure, the determining of the parent application to which the sub-application belongs comprises: determining the parent application to which the sub-application belongs according to a preconfigured correspondence between sub-applications and parent applications.

[0011] In an example embodiment of the present disclosure, the obtaining of the page description file of the parent application from the parent application end comprises: establishing a communication connection with the parent application end; and obtaining the page description file from the parent application end after the communication connection is established.

[0012] In an example embodiment of the present disclosure, the establishing of the communication connection with the parent application end comprises: obtaining a network address of the parent application end; and establishing the communication connection with the parent application end according to the network address.

[0013] In an example embodiment of the present disclosure, the generating of the to-be-debugged page description file according to the to-be-debugged page script and the page description file comprises: injecting the to-be-debugged page script into a header of the page description file to obtain the to-be-debugged page description file.

[0014] In the example embodiments of the present disclosure, the page description file is in HTML format.

[0015] According to a second aspect of the present disclosure, a micro-frontend-based page debugging apparatus is provided, comprising: a script acquisition module configured to acquire, in response to a page debugging request for the sub-application, a page script to be debugged corresponding to the sub-application from a side of the sub-application; a description file acquisition module configured to determine a parent application to which the sub-application belongs, and acquire a page description file of the parent application from a side of the parent application; a script injection module configured to generate a page description file to be debuged according to the page script to be debuged and the page description file; and a page loading module configured to return the page description file to be debuged to the client side, so that the client side loads a page corresponding to the page description file to be debuged, and determines a page debugging result of the sub-application according to the page.

[0016] According to a third aspect of the present disclosure, a computer storage medium is provided, which stores a computer program, and the computer program is executed by a processor to implement the micro-frontend-based page debugging method according to the first aspect.

[0017] According to a fourth aspect of the present disclosure, an electronic device is provided, comprising: a processor; and a memory configured to store executable instructions of the processor; wherein the processor is configured to execute the micro-frontend-based page debugging method according to the first aspect by executing the executable instructions.

[0018] According to the above technical solutions, the micro-frontend-based page debugging method, the micro-frontend-based page debugging apparatus, the computer storage medium and the electronic device provided in the example embodiments of the present disclosure have at least the following advantages and positive effects:

[0019] In the technical solution provided in some embodiments of the present disclosure, by configuring a proxy server as an intermediate bridge, data forwarding is performed between a client, a sub-application and a parent application, and when a page debugging request for a sub-application is received, the following steps are automatically performed: obtaining, from the sub-application side, a to-be-debugged page script corresponding to the sub-application; determining a parent application to which the sub-application belongs, and obtaining, from the parent application side, a page description file of the parent application; generating a to-be-debugged page description file according to the to-be-debugged page script and the page description file; returning the to-be-debugged page description file to the client, so that the client loads a page corresponding to the to-be-debugged page description file, and determines a page debugging result of the sub-application according to the page. On the one hand, the technical problem that the debugging process is complicated and complex due to the need for a developer to frequently switch configurations to obtain debugging required files from different addresses in the related art can be solved, the debugging steps are simplified, and the debugging efficiency is improved. On the other hand, compared with the solution in the prior art in which a normal page access process for a sub-application or a page debugging process for the sub-application needs to be performed through a parent application side of a parent application installed, the present disclosure can distribute the two processes to different subjects to perform, so that the normal page access process for the sub-application and the page debugging process for the sub-application can be isolated, and the page debugging of the sub-application can be quickly and conveniently performed without affecting the normal access of the user side to the sub-application page.

[0020] It should be understood that the foregoing general description and the following detailed description are only exemplary and explanatory, and are not limiting to the present disclosure. BRIEF DESCRIPTION OF DRAWINGS

[0021] The accompanying drawings, which are incorporated into and form part of the specification, illustrate embodiments consistent with the present disclosure and, together with the specification, serve to explain the principles of the present disclosure. Obviously, the drawings in the following description are only some embodiments of the present disclosure, and other drawings can be obtained by those skilled in the art without creative labor on the basis of these drawings.

[0022] Figure 1 A flowchart of a page debugging method based on micro-frontends in an embodiment of the present disclosure is shown;

[0023] Figure 2 A flowchart of obtaining a to-be-debugged page script in an embodiment of the present disclosure is shown;

[0024] Figure 3 A flowchart of obtaining a page description file of a parent application in an embodiment of the present disclosure is shown;

[0025] Figure 4Fig. 1 shows a schematic diagram of the overall flow of the micro-frontend-based page debugging method in the embodiments of the present disclosure;

[0026] Figure 5 Fig. 2 shows a schematic diagram of the structure of the micro-frontend-based page debugging apparatus in the exemplary embodiments of the present disclosure;

[0027] Figure 6 Fig. 3 shows a schematic diagram of the structure of the electronic device in the exemplary embodiments of the present disclosure. DETAILED DESCRIPTION

[0028] Example implementations will now be described more fully with reference to the accompanying drawings. Example implementations can be implemented in any

[0029] In this specification, the use of the phrases "one", "a", "the", and "said” is used to mean that there is one or more of the elements / components / etc.; the use of the phrases “include” and “comprise” is used to mean an open-ended inclusion, and that additional elements / components / etc. can be present beyond those listed; the use of the phrases “first” and “second” etc. is merely used as labels, and does not limit the quantities of their objects.

[0030] In addition, the accompanying drawings are merely schematic illustrations of the present disclosure, and are not necessarily drawn to scale. The same reference numerals in the drawings represent the same or similar parts, and thus repeated description thereof will be omitted. Some of the block diagrams shown in the drawings are functional entities, and do not necessarily have to correspond to physically or logically independent entities.

[0031] Currently, the related micro-frontend debugging solutions generally include the following two:

[0032] Solution 1: Configure the production environment address of the sub-application (usually the address of the page script that has been debugged and determined to be online) in the parent application, and the R&D personnel of the sub-application configure the host to point the domain name resolution to the development environment address of the sub-application (i.e. the address of the page script to be debugged).

[0033] Scheme 2: Introduce the import-map-overrides plug-in in the parent application, and configure the relevant information of the sub-application. After the developers of the sub-application access the parent application through the browser, the loading address of the sub-application is modified to the address of the local development environment by the resource mapping function provided by the import-map-overrides, and then the page is refreshed.

[0034] However, the above-mentioned scheme 1 has the following defects: on the one hand, for the developers of the sub-application, since the development process may need to access multiple environments such as development environment and production environment, they need to manually switch the host configuration back and forth, which is tedious. Further, this way is not universal and cannot be applied to the scenario that the development environment uses 80 port and the production environment uses 8080 port. On the other hand, for the developers of the parent application, they also need to cooperate with the developers of the sub-application to configure and debug.

[0035] The above-mentioned scheme 2 has the following defects: for the developers of the sub-application, the following operations need to be frequently performed during debugging: opening the browser-opening the debugging tool-manually modifying the resource address-refreshing the browser, the whole process is very tedious. For the developers of the parent application, they need to cooperate with the developers of the sub-application to configure, and need to inject the import-map-overrides plug-in in the parent application. After injecting the plug-in, the user can only use part of the functions of the parent application.

[0036] In an embodiment of the present disclosure, a micro-frontend-based page debugging method is first provided, which at least to some extent overcomes the defect that the page debugging process of the sub-application in the prior art is tedious and complex.

[0037] Figure 1 A flowchart of the micro-frontend-based page debugging method in the embodiment of the present disclosure is shown, and the execution subject of the micro-frontend-based page debugging method can be a proxy server.

[0038] Reference Figure 1 The micro-frontend-based page debugging method according to one embodiment of the present disclosure includes the following steps:

[0039] Step S110, in response to a page debugging request for a sub-application, obtaining a to-be-debugged page script corresponding to the sub-application from the sub-application side;

[0040] Step S120, determining a parent application to which the sub-application belongs, and obtaining a page description file of the parent application from the parent application side;

[0041] Step S130, generating a page description file to be debugged according to the page script to be debugged and the page description file;

[0042] Step S140, returning the page description file to be debugged to the client, so that the client loads the page corresponding to the page description file to be debugged, and determines the page debugging result of the sub-application according to the page.

[0043] In Figure 1 In the technical solution provided by the embodiment, the proxy server is configured as an intermediate bridge to forward data between the client, the sub-application end and the parent application end, and when receiving a page debugging request for the sub-application, the following steps are automatically executed: obtaining the page script to be debugged corresponding to the sub-application from the sub-application end; determining the parent application to which the sub-application belongs, and obtaining the page description file of the parent application from the parent application end; generating a page description file to be debugged according to the page script to be debugged and the page description file; returning the page description file to be debugged to the client, so that the client loads the page corresponding to the page description file to be debugged, and determines the page debugging result of the sub-application according to the page. On the one hand, it can solve the technical problem that the related art requires the developer to frequently switch configurations to obtain the debugging required files from different addresses, which causes the debugging process to be complicated and complex, simplifies the debugging steps, and improves the debugging efficiency. On the other hand, compared with the prior art, whether it is a normal page access process for the sub-application or a page debugging process for the sub-application, the scheme needs to be executed by the parent application end of the parent application installed. The present disclosure can distribute the two processes to different subjects to execute, so as to isolate the normal page access process for the sub-application and the page debugging process for the sub-application, and realize the page debugging of the sub-application quickly and conveniently without affecting the normal access of the user end to the sub-application page.

[0044] The specific implementation process of each step in the following Figure 1 is described in detail:

[0045] First, the terms involved in the present disclosure are explained:

[0046] The front end refers to the front-end part of the website, which runs on the PC (Personal Computer) end, mobile end and other browsers to display the web page to the user for browsing.

[0047] Micro-Frontends is an architecture similar to microservices, which applies the concept of microservices to the browser side, that is, to transform a web application from a single monolithic application into a plurality of small front-end applications aggregated into one application. Each front-end application can also be independently run, independently developed, and independently deployed. Micro-frontends is not simply a front-end framework or tool, but a set of architecture systems.

[0048] Page debugging is a process of loading an execution result of a page description file in a browser to determine whether the execution result is consistent with an expected display effect, and locating and finding a root cause of a problem when the display effects are inconsistent, and finally solving the problem.

[0049] The parent application in the present disclosure includes a front-end running application for providing various services, such as instant messaging applications, payment applications, and the like. The child application is a program running and displaying pages in the parent application, which is developed based on a front-end-oriented language (such as JavaScript) and implements services in a Hyper Text Markup Language (HTML) page, such as various small programs that can run with the help of the parent application.

[0050] The parent application end in the present disclosure is a terminal in which the parent application is installed, and the child application end is a terminal in which the child application is installed.

[0051] The proxy server in the present disclosure is provided through a pre-developed compilation plug-in. The function of the proxy server is to forward data between the child application end, the client, and the parent application end.

[0052] Specifically, a compilation plug-in can be pre-developed, and the following content can be pre-configured in the compilation plug-in: first, the network address of the child application end in which each child application is installed; second, the network address of the parent application end in which each parent application is installed; third, the parent application to which each child application belongs; and fourth, the correspondence between each child application and the storage address of the page script to be debugged thereof.

[0053] Further, the above-mentioned compilation plug-in can be deployed to the child application end. After the compilation plug-in is deployed to the child application end, the compilation plug-in can provide the above-mentioned proxy server, and further, the following steps S110-S140 can be executed through the proxy server:

[0054] In step S110, in response to a page debugging request for a child application, a page script to be debugged corresponding to the child application is obtained from the child application end.

[0055] In this step, the R&D personnel of the sub-application can send a page debugging request for the sub-application to the proxy server through the browser, and the page debugging request can include the identification (such as ID (identification), name, etc., which can be set by the actual situation, and the present disclosure does not make special limitations thereon) of the sub-application, so that the proxy server can determine which sub-application needs to be page debugged after receiving the page debugging request, and then the corresponding to-be-debugged page script of the sub-application can be obtained.

[0056] The to-be-debugged page script can be an updated page (for example, a new display element is added or a related display element is deleted) obtained by the R&D personnel after updating the original page of the sub-application, that is, the updated page corresponding to the original page, but since the display effect of the updated page is unknown, it needs to be debugged to determine whether the display effect is consistent with the expectation.

[0057] Specifically, after receiving the above page debugging request, the proxy server can first obtain the storage address of the to-be-debugged page script on the sub-application side, and then the above to-be-debugged page script can be obtained from the storage address. Specifically, reference can be made to Figure 2 Figure 2 A flowchart for obtaining the to-be-debugged page script in the embodiment of the present disclosure is shown, including steps S201-S202:

[0058] In step S201, according to the pre-configured corresponding relationship between each sub-application and the storage address of its to-be-debugged page script, the target storage address of the to-be-debugged page script corresponding to the sub-application is determined.

[0059] In this step, since the pre-stored corresponding relationship between each sub-application and the storage address of its to-be-debugged page script in the above compilation plug-in is known, the proxy server can request the above compilation plug-in to find the above corresponding relationship, and determine the storage address of the to-be-debugged page script on the sub-application side.

[0060] In step S202, the to-be-debugged page script is obtained from the target storage address.

[0061] In this step, after obtaining the above storage address, the proxy server can download or copy the above to-be-debugged page script from the above storage address to obtain the above to-be-debugged page script.

[0062] Next, referring to Figure 1 In step S120, the parent application to which the sub-application belongs is determined, and the page description file of the parent application is obtained from the parent application side.

[0063] ​In this step, after receiving the page debugging request, the parent application to which the sub-application belongs can be determined, and then the page description file of the parent application can be obtained from the parent application end where the parent application is installed.

[0064] Specifically, since the parent application to which the sub-application belongs is pre-stored in the compiling plug-in, the proxy server can request the compiling plug-in to determine the parent application to which the sub-application belongs.

[0065] After determining the parent application to which the sub-application belongs, the parent application end where the parent application is installed can be determined, and then the page description file of the parent application can be obtained based on the steps in the parent application end. Figure 3 Figure 3 Figure 3 A flowchart for obtaining the page description file of the parent application in the embodiment of the present disclosure is shown, including steps S301-S302.

[0066] In step S301, a communication connection is established with the parent application end.

[0067] In this step, since the network addresses of multiple different parent application ends are pre-configured in the compiling plug-in, the proxy server can request the compiling plug-in to obtain the network addresses of the parent application end through the compiling plug-in, where the network address can be an IP address (Internet Protocol Address).

[0068] After obtaining the network address of the parent application end, the proxy server can establish a communication connection with the parent application end. For example, the proxy server can first send a connection request to the parent application end, and attach its own network address in the header of the connection request. Then, after receiving the connection request, the parent application end can perform authentication and other verification operations, and establish a communication connection with the proxy server after the authentication is passed. If the verification fails, the connection request can be rejected to ensure the data security of the parent application end.

[0069] In step S302, after the communication connection is established, the page description file is obtained from the parent application end.

[0070] In this step, after the proxy server establishes a communication connection with the parent application end, the proxy server can pull the page description file of the parent application from the parent application end. The page description file can be in HTML format.

[0071] ​​The HTML (Hyper Text Markup Language) file is a markup language and is a necessary tool for webpage production. The structure of the HTML (Hyper Text Markup Language) file includes a "header" part and a "body" part. The "header" part provides information about the webpage, and the "body" part provides specific content of the webpage.

[0072] Next, referring to Figure 1 In step S130, a page description file to be debugged is generated according to the page script to be debugged and the page description file.

[0073] In this step, after the page script to be debugged is obtained in step S110 and the page description file of the parent application is obtained in step S120, the page description file to be debugged can be generated according to the page script to be debugged and the page description file.

[0074] Specifically, the page script to be debugged can be injected into the header (i.e., the head tag) of the page description file to generate the page description file to be debugged.

[0075] In step S140, the page description file to be debugged is returned to the client to enable the client to load a page corresponding to the page description file to be debugged and determine the page debugging result of the sub-application according to the page.

[0076] In this step, after the page description file to be debugged is generated, the page description file to be debugged can be returned to the client to enable the client to load a page corresponding to the page description file to be debugged. Then, the relevant R&D personnel can compare the display effect of the page with the expected display effect to determine the page debugging result of the sub-application.

[0077] It should be noted that, in the process of page debugging of the sub-application, when the user end needs to access the sub-application, the user end can normally send a request to the parent application end, and then the parent application end can obtain the original page version according to the storage address of the original page version (of the sub-application) pre-configured therein, and then inject the original page version into the page description file of the parent application to generate a final page description file and return it to the user end. It can be seen that the normal access process of the user end to the sub-application is executed through the parent application end, and the above page debugging process of the sub-application is executed through the proxy server, which are different execution subjects. Therefore, the present disclosure can isolate the page debugging process of the sub-application and the normal access process of the user to the sub-application, so as to quickly and conveniently debug the sub-application without affecting the normal access of the user end to the sub-application page.

[0078] Reference Figure 4 , Figure 4 The overall flowchart of the page debugging method based on micro-frontend in the embodiment of the present disclosure is shown, referring to Figure 4 :

[0079] The client browser can access the proxy server to send a page debugging request for the sub-application to the proxy server;

[0080] After receiving the page debugging request, the proxy server can find the storage address of the page script to be debugged in the sub-application end from the compiling plug-in, and then obtain the page script to be debugged from the storage address. On the other hand, the proxy server can find the network address of the parent application end from the compiling plug-in, and then obtain the page description file corresponding to the parent application from the network address.

[0081] Then, the proxy server can inject the page script to be debugged into the head tag of the page description file to obtain a page description file to be debugged.

[0082] The proxy server can return the page description file to be debugged to the client browser to display the display effect corresponding to the page script to be debugged on the client browser.

[0083] Based on the above technical scheme, by configuring a proxy server as an intermediate bridge, data forwarding is performed between the client, the sub-application and the parent application, and when a page debugging request for the sub-application is received, the following steps are automatically performed: obtaining the to-be-debugged page script corresponding to the sub-application from the sub-application side; determining the parent application to which the sub-application belongs, and obtaining the page description file of the parent application from the parent application side; generating a to-be-debugged page description file according to the to-be-debugged page script and the page description file; returning the to-be-debugged page description file to the client, so that the client loads a page corresponding to the to-be-debugged page description file, and determines the page debugging result of the sub-application according to the page. On the one hand, it can solve the technical problem of complicated debugging process caused by the need for developers to frequently switch configurations to obtain debugging required files from different addresses in the related art, simplify the debugging steps, and improve the debugging efficiency. On the other hand, compared with the scheme in the prior art in which either the normal page access process of the sub-application or the page debugging process of the sub-application needs to be executed by the parent application side of the installed parent application, the present disclosure can distribute the two processes to different subjects to execute, so that the normal page access process of the sub-application and the page debugging process of the sub-application can be isolated, and the page debugging of the above-mentioned sub-application can be quickly and conveniently performed without affecting the normal access of the user side to the sub-application page.

[0084] The present disclosure also provides a micro-frontend-based page debugging device, Figure 5 The structure of the micro-frontend-based page debugging device in the exemplary embodiments of the present disclosure is shown in the schematic diagram; as Figure 5 As shown, the micro-frontend-based page debugging device 500 can include a script obtaining module 510, a description file obtaining module 520, a script injection module 530 and a page loading module 540. Among them:

[0085] The script obtaining module 510 is configured to obtain the to-be-debugged page script corresponding to the sub-application from the sub-application side in response to a page debugging request for the sub-application;

[0086] The description file obtaining module 520 is configured to determine the parent application to which the sub-application belongs, and obtain the page description file of the parent application from the parent application side;

[0087] The script injection module 530 is configured to generate a to-be-debugged page description file according to the to-be-debugged page script and the page description file;

[0088] The page loading module 540 is configured to return the page description file to be debugged to the client, so that the client loads a page corresponding to the page description file to be debugged, and determines a page debugging result of the sub-application according to the page.

[0089] In an example embodiment of the present disclosure, the script obtaining module 510 is configured to:

[0090] According to a pre-configured corresponding relationship between each sub-application and a storage address of a page script to be debugged of the sub-application, a target storage address of the page script to be debugged corresponding to the sub-application is determined; the target storage address is located in the sub-application end; and the page script to be debugged is obtained from the target storage address.

[0091] In an example embodiment of the present disclosure, the description file obtaining module 520 is configured to:

[0092] According to a pre-configured corresponding relationship between the sub-application and the parent application, the parent application to which the sub-application belongs is determined.

[0093] In an example embodiment of the present disclosure, the description file obtaining module 520 is configured to:

[0094] A communication connection is established with the parent application end; and after the communication connection is established, the page description file is obtained from the parent application end.

[0095] In an example embodiment of the present disclosure, the description file obtaining module 520 is configured to:

[0096] A network address of the parent application end is obtained; and according to the network address, a communication connection is established with the parent application end.

[0097] In an example embodiment of the present disclosure, the script injection module 530 is configured to:

[0098] The page script to be debugged is injected into a header of the page description file, to obtain a page description file to be debugged.

[0099] In an example embodiment of the present disclosure, the page description file is in an HTML format.

[0100] The specific details of each module in the above micro-frontend-based page debugging apparatus have been described in detail in the corresponding micro-frontend-based page debugging method, and thus will not be described here again.

[0101] It should be noted that although several modules or units of devices for action execution are mentioned in the foregoing detailed description, such division is not mandatory. Indeed, features and functionalities of two or more modules or units described above can be embodied in one module or unit according to embodiments of the present disclosure. Conversely, features and functionalities of one module or unit described above can be further divided into embodied by multiple modules or units.

[0102] Moreover, although various steps of the methods in the present disclosure are described in a particular order in the accompanying drawings, this is not required or implied that the steps must be performed in this particular order, or that all of the illustrated steps must be performed to achieve the desired result. Additionally or alternatively, certain steps can be omitted, multiple steps can be combined into one step, one step can be broken down into multiple steps, etc.

[0103] From the above description of the embodiments, those skilled in the art will readily appreciate that the example embodiments described herein can be implemented by software and / or by hardware coupled with software. Accordingly, the technical solutions according to the embodiments of the present disclosure can be embodied in the form of a software product. The software product can be stored in a non-volatile storage medium (which can be a CD-ROM, a USB flash disk, a mobile hard disk, etc.) or a network, and includes a number of instructions to make a computing device (which can be a personal computer, a server, a mobile terminal, or a network device, etc.) execute the methods according to the embodiments of the present disclosure.

[0104] The present application also provides a computer readable storage medium, which can be included in the electronic device described in the above embodiments, or can exist separately without being assembled into the electronic device.

[0105] The computer readable storage medium can be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any suitable combination of the above. More specific examples of the computer readable storage medium can include, but are not limited to, an electrical connection having one or more wires, a portable computer diskette, 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 above. In the present disclosure, the computer readable storage medium can be any tangible medium that contains or stores a program that can be used by or in connection with an instruction execution system, apparatus, or device.

[0106] The computer readable storage medium can also be distributed among computer systems connected through a network and executed on a distributed manner. Also, functional programs, codes, and code segments for accomplishing the various purposes of some embodiments of the present disclosure can be easily derived by programmers skilled in the art to which the present disclosure pertains.

[0107] The program code mentioned anywhere in the present specification includes any type of computer code, including source code, object code, interpreted code, etc. The program code implements the steps of the methods disclosed in the embodiments of the present disclosure.

[0108] In addition, an electronic device capable of implementing the above method is also provided in the embodiments of the present disclosure.

[0109] Those skilled in the art can understand that each aspect of the present disclosure can be implemented as a system, a method or a program product. Therefore, each aspect of the present disclosure can be specifically implemented as a form of entirely hardware, entirely software (including firmware, microcode, etc.) or a combination of hardware and software, which can be collectively referred to as "circuitry", "module" or "system".

[0110] The electronic device 600 according to this embodiment of the present disclosure will be described below with reference to Figure 6 Figure 6 The electronic device 600 shown is merely an example and should not bring any limitation to the functions and use range of the embodiments of the present disclosure.

[0111] As shown in Figure 6 , the electronic device 600 is in the form of a general computing device. The components of the electronic device 600 can include, but are not limited to, the at least one processing unit 610, the at least one storage unit 620, the bus 630 connecting different system components (including the storage unit 620 and the processing unit 610), and the display unit 640.

[0112] The storage unit stores program code which can be executed by the processing unit 610, so that the processing unit 610 performs the steps according to various exemplary embodiments of the present disclosure described in the "Exemplary Methods" part of the present specification. For example, the processing unit 610 can execute the steps of the method according to the various exemplary embodiments of the present disclosure as shown in Figure 1 ​As shown in the figure, the method comprises the following steps: step S110, in response to a page debugging request for a sub-application, obtaining a to-be-debugged page script corresponding to the sub-application from a sub-application side; step S120, determining a parent application to which the sub-application belongs, and obtaining a page description file of the parent application from a parent application side; step S130, generating a to-be-debugged page description file according to the to-be-debugged page script and the page description file; and step S140, returning the to-be-debugged page description file to the client side, so as to enable the client side to load a page corresponding to the to-be-debugged page description file and determine a page debugging result of the sub-application according to the page.

[0113] The storage unit 620 can include a readable medium in the form of volatile storage such as random access memory (RAM) 6201 and / or cache memory 6202, and can further include a non-volatile storage such as read-only memory (ROM) 6203.

[0114] The storage unit 620 can also include a program / utility 6204 having a set (at least one) of program modules 6205 such as an operating system, one or more application programs, other program modules, and program data, each of which gives the electronic device 600 the ability to function in a networked environment, either as a client or a server, in some embodiments or a combination thereof.

[0115] The bus 630 can represent one or more of several types of bus structures, including a storage bus or bus controller, a peripheral bus, an accelerated graphics port, and a local bus using any of a variety of bus architectures.

[0116] The electronic device 600 can also communicate with one or more external devices 700 such as a keyboard or pointing device, a Bluetooth device, etc., and can communicate with one or more devices that enable a user to interact with the electronic device 600. The electronic device 600 can also communicate with one or more devices that enable the electronic device 600 to communicate with one or more other computing devices. Such communication can be facilitated by an input / output (I / O) interface 650. The electronic device 600 can also communicate with one or more networks, such as a local area network (LAN), a wide area network (WAN), and / or the public network, such as the Internet, through a network adapter 660. As depicted, the network adapter 660 is in communication with the other modules of the electronic device 600 through the bus 630. It should be appreciated that other hardware and / or software modules can be used in conjunction with the electronic device 600, including but not limited to microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, and data archival storage systems, etc.

[0117] Other embodiments of the disclosure will be apparent to those skilled in the art from consideration of the specification and practice of the features disclosed herein. It is intended that the specification and examples be considered as exemplary only, with a true scope and spirit of the disclosure being indicated by the following claims.

Claims

1. A micro-frontend-based page debugging method, characterized in that, The application is applied to a proxy server used for forwarding data between a sub-application end, a client end and a parent application end, the sub-application end is a terminal installing a sub-application, the parent application end is a terminal installing a parent application, the sub-application runs in an environment provided by the parent application, and the method comprises: In response to a page debugging request for the sub-application, obtaining a to-be-debugged page script corresponding to the sub-application from the sub-application end; Determining a parent application to which the sub-application belongs, and obtaining a page description file of the parent application from the parent application end; Generating a to-be-debugged page description file according to the to-be-debugged page script and the page description file; Returning the to-be-debugged page description file to the client end, so that the client end loads a page corresponding to the to-be-debugged page description file and determines a page debugging result of the sub-application according to the page.

2. The method of claim 1, wherein, The obtaining of the to-be-debugged page script corresponding to the sub-application from the sub-application end comprises: According to a pre-configured corresponding relationship between each sub-application and a storage address of a to-be-debugged page script thereof, determining a target storage address of the to-be-debugged page script corresponding to the sub-application; the target storage address is located in the sub-application end; Obtaining the to-be-debugged page script from the target storage address.

3. The method of claim 1, wherein, The determination of the parent application to which the sub-application belongs comprises: According to a pre-configured corresponding relationship between a sub-application and a parent application, determining the parent application to which the sub-application belongs.

4. The method of claim 1, wherein, The obtaining of the page description file of the parent application from the parent application end comprises: Establishing a communication connection with the parent application end; After the communication connection is established, obtaining the page description file from the parent application end.

5. The method of claim 4, wherein, The establishment of the communication connection with the parent application end comprises: Obtaining a network address of the parent application end; According to the network address, establishing the communication connection with the parent application end.

6. The method according to any one of claims 1 to 5, characterized in that, The generation of the to-be-debugged page description file according to the to-be-debugged page script and the page description file comprises: Injecting the to-be-debugged page script into a header of the page description file to obtain the to-be-debugged page description file.

7. The method of claim 6, wherein, The page description file is in an HTML format.

8. A micro-frontend based page debugging apparatus, characterized in that, The device is used for forwarding data between a sub-application end, a client end and a parent application end, the sub-application end is a terminal installing a sub-application, the parent application end is a terminal installing a parent application, the sub-application runs in an environment provided by the parent application, and the device comprises: A script obtaining module, configured to obtain a to-be-debugged page script corresponding to the sub-application from the sub-application end in response to a page debugging request for the sub-application; A description file obtaining module, configured to determine a parent application to which the sub-application belongs, and obtain a page description file of the parent application from the parent application end; The script injection module is configured to generate a page description file to be debugged according to the page script to be debugged and the page description file. The page loading module is configured to return the page description file to be debugged to the client, so that the client loads a page corresponding to the page description file to be debugged, and determines a page debugging result of the sub-application according to the page.

9. A computer storage medium having stored thereon a computer program, characterized in that The computer program is executed by a processor to implement the micro-frontend-based page debugging method in any one of claims 1-7.

10. An electronic device, comprising: comprise: a processor; and a memory for storing executable instructions of the processor; wherein the processor is configured to implement the micro-frontend-based page debugging method in any one of claims 1-7 by executing the executable instructions.

Images