Disclosure of Invention
The present disclosure provides a front-end page debugging method, device, computer device, and computer-readable storage medium, which can solve the technical problem that developers cannot know the reason causing the front-end page to be updated in the related art, and thus cannot conveniently provide an effective basis for debugging the front-end page.
An embodiment of a first aspect of the present disclosure provides a front-end page debugging method, including: monitoring a variable causing the front-end page to be updated and rendered when the front-end page is monitored to be currently required to be rendered; analyzing the dependency relationship of the variables in the front-end page according to the variables causing the front-end page to be updated and rendered; and providing the dependency relationship of the variables in the front-end page to a developer, wherein the dependency relationship of the variables is used for debugging the front-end page by the developer.
According to the front-end page debugging method of the embodiment of the disclosure, when the front-end page is monitored to be rendered currently, the variable causing the front-end page to be rendered in an updating way is monitored, and analyzing the dependency relationship of the variables in the front-end page according to the variables causing the front-end page to be updated and rendered, and provides the dependency relationship of the variables in the front-end page to the developer so that the developer can debug the front-end page according to the dependency relationship of the variables, namely, by monitoring the dependency of the front-end page update or the variable change, and providing the dependency of the variable to the developer, so that the developer can know what the page update or variable change is caused by the dependency relationship, the monitoring data can be visually displayed, and an effective basis is provided for debugging of a front-end page, so that debugging of developers is facilitated.
According to an embodiment of the present disclosure, the monitoring a variable that causes the front-end page to perform an update rendering includes: acquiring a rendering code for rendering the front-end page; acquiring a preset monitoring code, and inserting the monitoring code into the rendering code; monitoring, by the monitor code, a variable that causes the front-end page to be rendered updated while the rendering code is executed to render the front-end page.
According to an embodiment of the present disclosure, the obtaining rendering code for rendering the front-end page includes: and acquiring the rendering code for rendering the front-end page from a progressive framework Vue.
According to an embodiment of the present disclosure, analyzing a dependency relationship of a variable in a front-end page according to the variable causing the front-end page to perform the update rendering includes: determining other changed variables caused by the change of the variables according to the variables causing the update rendering of the front-end page by the monitoring codes; determining dependencies between the variable and the other changed variables.
According to an embodiment of the present disclosure, the providing the dependency relationship of the variable in the front-end page to the developer includes: outputting the dependency relationship of variables in the front-end page; and presenting the dependency relationship of the variables in the output front-end page in a designated display area for a developer to view.
An embodiment of a second aspect of the present disclosure provides a front-end page debugging apparatus, including: the monitoring module is used for monitoring a variable causing the front-end page to be updated and rendered when the front-end page is monitored to be currently required to be rendered; the analysis module is used for analyzing the dependency relationship of the variables in the front-end page according to the variables causing the update rendering of the front-end page; and the providing module is used for providing the dependency relationship of the variables in the front-end page for developers, wherein the dependency relationship of the variables is used for debugging the front-end page by the developers.
According to the front-end page debugging device of the embodiment of the disclosure, when the monitoring module monitors that the front-end page needs to be rendered currently, the monitoring module monitors the variable causing the update rendering of the front-end page, the analysis module analyzes the dependency relationship of the variable in the front-end page according to the variable causing the update rendering of the front-end page, and the providing module provides the dependency relationship of the variable in the front-end page to developers, so that the developers can debug the front-end page according to the dependency relationship of the variable, that is, by monitoring the dependency relationship of the update or change of the variable of the front-end page and providing the dependency relationship of the variable to the developers, the developers can know the page update or change of the variable caused by what reason through the dependency relationship, so that the monitoring data can be displayed visually, and an effective basis is provided for the debugging of the front-end page, thereby facilitating debugging of developers.
According to an embodiment of the present disclosure, the monitoring module is specifically configured to: acquiring a rendering code for rendering the front-end page; acquiring a preset monitoring code, and inserting the monitoring code into the rendering code; monitoring, by the monitor code, a variable that causes the front-end page to be rendered updated while the rendering code is executed to render the front-end page.
According to an embodiment of the present disclosure, the monitoring module is specifically configured to: and acquiring the rendering code for rendering the front-end page from a progressive framework Vue.
According to an embodiment of the present disclosure, the analysis module is specifically configured to: determining other changed variables caused by the change of the variables according to the variables causing the update rendering of the front-end page by the monitoring codes; determining dependencies between the variable and the other changed variables.
According to an embodiment of the present disclosure, the providing module is specifically configured to: outputting the dependency relationship of variables in the front-end page; and presenting the dependency relationship of the variables in the output front-end page in a designated display area for a developer to view.
An embodiment of a third aspect of the present disclosure provides a computer device, including: the debugging method comprises a memory, a processor and a computer program which is stored on the memory and can run on the processor, wherein when the processor executes the computer program, the debugging method for the front-end page is realized.
A fourth aspect of the present disclosure provides a computer-readable storage medium, on which a computer program is stored, where the computer program, when executed by a processor, implements the front-end page debugging method described in the first aspect of the present disclosure.
Additional aspects and advantages of the disclosure will be set forth in part in the description which follows and, in part, will be obvious from the description, or may be learned by practice of the disclosure.
Detailed Description
Reference will now be made in detail to the embodiments of the present disclosure, examples of which are illustrated in the accompanying drawings, wherein like or similar reference numerals refer to the same or similar elements or elements having the same or similar functions throughout. The embodiments described below with reference to the drawings are exemplary and intended to be illustrative of the present disclosure, and should not be construed as limiting the present disclosure.
A front-end page debugging method, apparatus, computer device, and computer-readable storage medium according to embodiments of the present disclosure are described below with reference to the accompanying drawings.
FIG. 1 is a flow diagram of a front-end page debugging method according to one embodiment of the present disclosure. It should be noted that the front-end page debugging method according to the embodiment of the present disclosure is applicable to the front-end page debugging apparatus according to the embodiment of the present disclosure, and the front-end page debugging apparatus may be configured on a computer device. As an example, the front-end page debugging means may be presented in the form of a plug-in to a browser or in the form of a stand-alone application.
As shown in fig. 1, the front-end page debugging method may include:
step 101, when it is monitored that the front-end page needs to be rendered currently, monitoring a variable causing the front-end page to be rendered in an updating manner.
For example, the front-end page debugging method according to the embodiment of the present disclosure is applied to a front-end page debugging device, which is presented in the form of a plug-in of a browser, when a user opens the browser, the plug-in of the browser according to the embodiment of the present disclosure may monitor whether the front-end page is opened, if so, further monitor whether the front-end page needs to be rendered currently, and if so, monitor a variable that causes the front-end page to be rendered more.
In embodiments of the present disclosure, a monitoring code may be predefined that can monitor which variable or variables cause an update of the front-end page or cause a change of another variable in the front-end page. As an example, a rendering code for rendering the front-end page may be obtained, and a preset monitoring code may be obtained and inserted into the rendering code, and when the rendering code is executed to render the front-end page, a variable that causes the front-end page to perform updated rendering may be monitored by the monitoring code.
That is to say, when it is monitored that the front-end page needs to be rendered currently, the rendering code for rendering the front-end page may be obtained, and the predefined monitoring code is obtained, and the monitoring code is inserted into the rendering code, so that when the front-end page is rendered by executing the rendering code, the variable that causes the front-end page to be rendered updated may be monitored by the monitoring code, that is, the update of the front-end page caused by the change of which variable or variables may be monitored.
It should be noted that, in the embodiment of the present disclosure, the front-end page is a page developed by a developer using the progressive framework vue. The Vue.js is a set of popular progressive frames for constructing the user interface at the front end of the webpage, and is rendered and displayed by the Vue.js library when the front end of the webpage is displayed. Js library may store, among other things, rendering code for rendering front-end pages. In this way, the rendering code for rendering the front-end page can be obtained from the vue.
In the embodiment of the present disclosure, the monitoring code is also inserted into the vue.js library, so that when the web page is loaded, the rendering code and the monitoring code can be obtained from the vue.js library, so that during the process of rendering the page, the update of the front-end page caused by the change of which variable or variables can be monitored through the monitoring code. Thus, by inserting monitoring code in the rendering code of each page, it can be monitored by the monitoring code which variable or variables change to cause an update of the front page.
And 102, analyzing the dependency relationship of the variables in the front-end page according to the variables causing the update rendering of the front-end page.
Optionally, the monitoring code determines other changed variables caused when the variable changes according to the variable causing the front-end page to perform update rendering, and determines a dependency relationship between the variable and the other changed variables.
And 103, providing the dependency relationship of the variables in the front-end page to a developer, wherein the dependency relationship of the variables is used for debugging the front-end page by the developer.
In the embodiment of the disclosure, the dependency relationship of the variable in the front-end page can be output, and the output dependency relationship of the variable in the front-end page is presented in a designated display area for a developer to view. And the developer can debug the front-end page according to the dependency relationship of the variable, so that the front-end page can meet the target development requirement.
According to the front-end page debugging method of the embodiment of the disclosure, when the front-end page is monitored to be rendered currently, the variable causing the front-end page to be rendered in an updating way is monitored, and analyzing the dependency relationship of the variables in the front-end page according to the variables causing the front-end page to be updated and rendered, and provides the dependency relationship of the variables in the front-end page to the developer so that the developer can debug the front-end page according to the dependency relationship of the variables, namely, by monitoring the dependency of the front-end page update or the variable change, and providing the dependency of the variable to the developer, so that the developer can know what the page update or variable change is caused by the dependency relationship, the monitoring data can be visually displayed, and an effective basis is provided for debugging of a front-end page, so that debugging of developers is facilitated.
Fig. 2 is a schematic structural diagram of a front-end page debugging apparatus according to an embodiment of the present disclosure. As shown in fig. 2, the front-end page debugging apparatus 200 may include: a monitoring module 210, an analysis module 220, and a providing module 230.
Specifically, the monitoring module 210 is configured to monitor a variable causing the front-end page to perform the updated rendering when it is monitored that the front-end page currently needs to perform the rendering. As an example, the monitoring module 210 is specifically configured to: the method comprises the steps of obtaining a rendering code used for rendering a front-end page, obtaining a preset monitoring code, inserting the monitoring code into the rendering code, and monitoring a variable causing the front-end page to update rendering through the monitoring code when the rendering code is executed to render the front-end page.
In an embodiment of the present disclosure, the monitoring module 210 obtains the rendering code for rendering the front-end page from the progressive framework vue.
The analysis module 220 is configured to analyze a dependency relationship of a variable in the front-end page according to the variable causing the update rendering of the front-end page. As an example, the analysis module 220 is specifically configured to: and updating the rendered variable according to the front-end page through the monitoring code, determining other changed variables caused when the variable is changed, and determining the dependency relationship between the variable and the other changed variables.
The providing module 230 is configured to provide the dependency relationship of the variable in the front-end page to the developer, where the dependency relationship of the variable is used for the developer to debug the front-end page. As one example, the providing module 230 outputs the dependencies of the variables in the front-end page and presents the dependencies of the variables in the output front-end page within a designated display area for viewing by a developer.
It should be noted that the foregoing explanation on the embodiment of the front-end page debugging method is also applicable to the front-end page debugging apparatus of this embodiment, and details are not described here.
According to the front-end page debugging device of the embodiment of the disclosure, when the monitoring module monitors that the front-end page needs to be rendered currently, the monitoring module monitors the variable causing the update rendering of the front-end page, the analysis module analyzes the dependency relationship of the variable in the front-end page according to the variable causing the update rendering of the front-end page, and the providing module provides the dependency relationship of the variable in the front-end page to developers, so that the developers can debug the front-end page according to the dependency relationship of the variable, that is, by monitoring the dependency relationship of the update or change of the variable of the front-end page and providing the dependency relationship of the variable to the developers, the developers can know the page update or change of the variable caused by what reason through the dependency relationship, so that the monitoring data can be displayed visually, and an effective basis is provided for the debugging of the front-end page, thereby facilitating debugging of developers.
In order to implement the foregoing embodiments, the present disclosure also provides a computer device, including a memory, a processor, and a computer program stored on the memory and executable on the processor, wherein the processor executes the computer program to:
monitoring a variable causing the front-end page to be updated and rendered when the front-end page is monitored to be currently required to be rendered; analyzing the dependency relationship of the variables in the front-end page according to the variables causing the front-end page to be updated and rendered; and providing the dependency relationship of the variables in the front-end page to a developer, wherein the dependency relationship of the variables is used for debugging the front-end page by the developer.
To achieve the above embodiments, the present disclosure also proposes a computer-readable storage medium having a computer program stored thereon, the computer program being executed by a processor to:
monitoring a variable causing the front-end page to be updated and rendered when the front-end page is monitored to be currently required to be rendered; analyzing the dependency relationship of the variables in the front-end page according to the variables causing the front-end page to be updated and rendered; and providing the dependency relationship of the variables in the front-end page to a developer, wherein the dependency relationship of the variables is used for debugging the front-end page by the developer.
Referring now to FIG. 3, a block diagram of a computer device 300 suitable for use in implementing embodiments of the present disclosure is shown. The computer device in the embodiments of the present disclosure may be a terminal device or a personal computer. The terminal device may include, but is not limited to, a mobile terminal such as a mobile phone, a notebook computer, a digital broadcast receiver, a PDA (personal digital assistant), a PAD (tablet computer), a PMP (portable multimedia player), a vehicle terminal (e.g., a car navigation terminal), etc., and a fixed terminal such as a digital TV, a desktop computer, etc., among others. The computer device shown in fig. 3 is only an example and should not bring any limitations to the function and scope of use of the embodiments of the present disclosure.
As shown in fig. 3, computer device 300 may include a processing means (e.g., central processing unit, graphics processor, etc.) 301 that may perform various appropriate actions and processes in accordance with a program stored in a Read Only Memory (ROM)302 or a program loaded from a storage device 308 into a Random Access Memory (RAM) 303. In the RAM 303, various programs and data necessary for the operation of the computer apparatus 300 are also stored. The processing device 301, the ROM302, and the RAM 303 are connected to each other via a bus 304. An input/output (I/O) interface 305 is also connected to bus 304.
Generally, the following devices may be connected to the I/O interface 305: input devices 306 including, for example, a touch screen, touch pad, keyboard, mouse, camera, microphone, accelerometer, gyroscope, etc.; an output device 307 including, for example, a Liquid Crystal Display (LCD), a speaker, a vibrator, and the like; storage devices 308 including, for example, magnetic tape, hard disk, etc.; and a communication device 309. The communication means 309 may allow the computer device 300 to communicate with other devices, wirelessly or by wire, for exchanging data. While fig. 3 illustrates a computer device 300 having various means, it is to be understood that not all illustrated means are required to be implemented or provided. More or fewer devices may alternatively be implemented or provided.
In particular, according to an embodiment of the present disclosure, the processes described above with reference to the flowcharts may be implemented as computer software programs. For example, embodiments of the present disclosure include a computer program product comprising a computer program embodied on a computer readable medium, the computer program comprising program code for performing the method illustrated in the flow chart. In such an embodiment, the computer program may be downloaded and installed from a network through the communication means 309, or installed from the storage means 308, or installed from the ROM 302. The computer program, when executed by the processing device 301, performs the above-described functions defined in the methods of the embodiments of the present disclosure.
It should be noted that the computer readable medium in the present disclosure can be a computer readable signal medium or a computer readable storage medium or any combination of the two. A computer readable storage medium may be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the foregoing. More specific examples of the computer readable storage medium may 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 disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the present disclosure, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. In contrast, in the present disclosure, a computer readable signal medium may comprise a propagated data signal with computer readable program code embodied therein, either in baseband or as part of a carrier wave. Such a propagated data signal may take many forms, including, but not limited to, electro-magnetic, optical, or any suitable combination thereof. A computer readable signal medium may also be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device. Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to: electrical wires, optical cables, RF (radio frequency), etc., or any suitable combination of the foregoing.
The computer readable medium may be embodied in the computer device; or may exist separately and not be incorporated into the computer device.
The computer readable medium carries one or more programs which, when executed by the computing device, cause the computing device to: acquiring at least two internet protocol addresses; sending a node evaluation request comprising the at least two internet protocol addresses to node evaluation equipment, wherein the node evaluation equipment selects the internet protocol addresses from the at least two internet protocol addresses and returns the internet protocol addresses; receiving an internet protocol address returned by the node evaluation equipment; wherein the obtained internet protocol address indicates an edge node in the content distribution network.
Alternatively, the computer readable medium carries one or more programs which, when executed by the computing device, cause the computing device to: receiving a node evaluation request comprising at least two internet protocol addresses; selecting an internet protocol address from the at least two internet protocol addresses; returning the selected internet protocol address; wherein the received internet protocol address indicates an edge node in the content distribution network.
Computer program code for carrying out operations for aspects of the present disclosure may be written in any combination of one or more programming languages, including an object oriented programming language such as Java, Smalltalk, C + +, and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The program code may execute entirely on the user's computer, partly on the user's computer, as a stand-alone software package, partly on the user's computer and partly on a remote computer or entirely on the remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer through any type of network, including a Local Area Network (LAN) or a Wide Area Network (WAN), or the connection may be made to an external computer (for example, through the Internet using an Internet service provider).
The flowchart and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present disclosure. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams and/or flowchart illustration, and combinations of blocks in the block diagrams and/or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.
The units described in the embodiments of the present disclosure may be implemented by software or hardware. Where the name of a unit does not in some cases constitute a limitation of the unit itself, for example, the first retrieving unit may also be described as a "unit for retrieving at least two internet protocol addresses".