CN111381813A - Front-end page debugging method and device, computer equipment and storage medium - Google Patents

Front-end page debugging method and device, computer equipment and storage medium Download PDF

Info

Publication number
CN111381813A
CN111381813A CN201811627583.5A CN201811627583A CN111381813A CN 111381813 A CN111381813 A CN 111381813A CN 201811627583 A CN201811627583 A CN 201811627583A CN 111381813 A CN111381813 A CN 111381813A
Authority
CN
China
Prior art keywords
end page
variables
rendering
monitoring
code
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN201811627583.5A
Other languages
Chinese (zh)
Other versions
CN111381813B (en
Inventor
徐星宇
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing ByteDance Network Technology Co Ltd
Original Assignee
Beijing ByteDance Network Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing ByteDance Network Technology Co Ltd filed Critical Beijing ByteDance Network Technology Co Ltd
Priority to CN201811627583.5A priority Critical patent/CN111381813B/en
Publication of CN111381813A publication Critical patent/CN111381813A/en
Application granted granted Critical
Publication of CN111381813B publication Critical patent/CN111381813B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/31Programming languages or programming paradigms
    • G06F8/315Object-oriented languages
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/38Creation or generation of source code for implementing user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Computing Systems (AREA)
  • Human Computer Interaction (AREA)
  • Debugging And Monitoring (AREA)
  • Stored Programmes (AREA)

Abstract

The disclosure discloses a front-end page debugging method, a front-end page debugging device, computer equipment and a storage medium. The method comprises the following steps: when the front-end page is monitored to be rendered currently, monitoring a variable causing the front-end page to be rendered in an updating manner; analyzing the dependency relationship of 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. The method can enable the monitoring data to be displayed visually, and provides effective basis for debugging of the front-end page, thereby facilitating debugging of developers.

Description

Front-end page debugging method and device, computer equipment and storage medium
Technical Field
The present disclosure relates to the field of computer technologies, and in particular, to a front-end page debugging method and apparatus, a computer device, and a computer-readable storage medium.
Background
In the process of developing a front-end page, a developer needs to debug the front-end page to detect whether the front-end page meets a target development requirement. At present, a developer can only detect whether the update change of the front-end page meets the target development requirement in a manual watching mode, but the developer does not know the update change of the front-end page caused by any reason, so that the developer cannot know the reason causing the update of the front-end page, and an effective basis cannot be conveniently provided for debugging of the front-end page.
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.
Drawings
The foregoing and/or additional aspects and advantages of the present disclosure will become apparent and readily appreciated from the following description of the embodiments, taken in conjunction with the accompanying drawings of which:
FIG. 1 is a flow diagram of a front-end page debugging method according to one embodiment of the present disclosure;
FIG. 2 is a schematic structural diagram of a front-end page debugging apparatus according to an embodiment of the present disclosure;
FIG. 3 is a schematic block diagram of a computer device according to one embodiment of the present 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".

Claims (10)

1. A front-end page debugging method is characterized by comprising the following steps:
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.
2. The front-end page debugging method of claim 1, wherein the monitoring variables that cause the front-end page to render updates comprises:
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.
3. The front-end page debugging method of claim 2, wherein the obtaining rendering code for rendering the front-end page comprises:
and acquiring the rendering code for rendering the front-end page from a progressive framework Vue.
4. The front-end page debugging method according to claim 2 or 3, wherein analyzing the dependency relationship of the variables in the front-end page according to the variables that cause the update rendering of the front-end page comprises:
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.
5. The front-end page debugging method of claim 1, wherein providing the dependency of the variables in the front-end page to a developer comprises:
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.
6. A front-end page debugging apparatus, comprising:
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.
7. The front-end page debugging device of claim 6, wherein 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.
8. The front-end page debugging device of claim 7, wherein 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.
9. A computer device, comprising: memory, processor and computer program stored on the memory and executable on the processor, the processor implementing the front-end page debugging method according to any one of claims 1 to 5 when executing the computer program.
10. A computer-readable storage medium, on which a computer program is stored, which, when being executed by a processor, implements the front-end page debugging method according to any one of claims 1 to 5.
CN201811627583.5A 2018-12-28 2018-12-28 Front-end page debugging method and device, computer equipment and storage medium Active CN111381813B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201811627583.5A CN111381813B (en) 2018-12-28 2018-12-28 Front-end page debugging method and device, computer equipment and storage medium

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201811627583.5A CN111381813B (en) 2018-12-28 2018-12-28 Front-end page debugging method and device, computer equipment and storage medium

Publications (2)

Publication Number Publication Date
CN111381813A true CN111381813A (en) 2020-07-07
CN111381813B CN111381813B (en) 2023-03-14

Family

ID=71217758

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201811627583.5A Active CN111381813B (en) 2018-12-28 2018-12-28 Front-end page debugging method and device, computer equipment and storage medium

Country Status (1)

Country Link
CN (1) CN111381813B (en)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112596738A (en) * 2020-12-28 2021-04-02 北京字跳网络技术有限公司 Method and device for determining front-end page to be tested, storage medium and electronic equipment

Citations (17)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20020124047A1 (en) * 2001-03-02 2002-09-05 M. Scott Gartner Interactive remote monitoring of client page render times
US20040187077A1 (en) * 2003-03-19 2004-09-23 International Business Machines Corporation Dynamic server page meta-engines with data sharing for dynamic content
KR20080095527A (en) * 2007-04-25 2008-10-29 삼성전자주식회사 Device of automatically extracting interface of embedded software and method thereof
US7537162B1 (en) * 2005-09-28 2009-05-26 Adobe Systems Incorporated Methods and apparatus for validating input by rendering a barcode
US20110270424A1 (en) * 2009-02-18 2011-11-03 Mitsubishi Electric Corporation Program analysis support device
US20120203889A1 (en) * 2011-02-08 2012-08-09 Joseph Carrabis Web Analytics System and Method
US20140067716A1 (en) * 2012-08-31 2014-03-06 Sander Gerber Systems and methods for measuring relationships between investments and other variables
CN104503793A (en) * 2014-12-24 2015-04-08 风腾科技(北京)有限公司 Method for running and graphically analyzing codes in code practicing software
US20150186521A1 (en) * 2013-12-31 2015-07-02 Clicktale Ltd. Method and system for tracking and gathering multivariate testing data
US9218267B1 (en) * 2013-08-14 2015-12-22 Amazon Technologies, Inc. Page rendering feedback
US20170031884A1 (en) * 2015-07-27 2017-02-02 WP Company LLC d/b/a The Washington Post Automated dependency management based on page components
CN106933722A (en) * 2017-03-06 2017-07-07 腾云天宇科技(北京)有限公司 A kind of web application monitoring method, server and system
CN106933890A (en) * 2015-12-31 2017-07-07 华为技术有限公司 A kind of processing method and processing device of static page
CN108415702A (en) * 2018-01-22 2018-08-17 北京奇艺世纪科技有限公司 A kind of mobile terminal application interface dynamic rendering intent and device
CN108717355A (en) * 2018-04-20 2018-10-30 福州芝麻智能科技有限公司 A kind of macro substitution method of monitoring interface pixel
CN108804095A (en) * 2018-04-20 2018-11-13 福州芝麻智能科技有限公司 A kind of attribute definition method of monitored picture pixel
CN108897538A (en) * 2018-06-08 2018-11-27 泰康保险集团股份有限公司 Page view display methods and device, storage medium and electric terminal

Patent Citations (17)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20020124047A1 (en) * 2001-03-02 2002-09-05 M. Scott Gartner Interactive remote monitoring of client page render times
US20040187077A1 (en) * 2003-03-19 2004-09-23 International Business Machines Corporation Dynamic server page meta-engines with data sharing for dynamic content
US7537162B1 (en) * 2005-09-28 2009-05-26 Adobe Systems Incorporated Methods and apparatus for validating input by rendering a barcode
KR20080095527A (en) * 2007-04-25 2008-10-29 삼성전자주식회사 Device of automatically extracting interface of embedded software and method thereof
US20110270424A1 (en) * 2009-02-18 2011-11-03 Mitsubishi Electric Corporation Program analysis support device
US20120203889A1 (en) * 2011-02-08 2012-08-09 Joseph Carrabis Web Analytics System and Method
US20140067716A1 (en) * 2012-08-31 2014-03-06 Sander Gerber Systems and methods for measuring relationships between investments and other variables
US9218267B1 (en) * 2013-08-14 2015-12-22 Amazon Technologies, Inc. Page rendering feedback
US20150186521A1 (en) * 2013-12-31 2015-07-02 Clicktale Ltd. Method and system for tracking and gathering multivariate testing data
CN104503793A (en) * 2014-12-24 2015-04-08 风腾科技(北京)有限公司 Method for running and graphically analyzing codes in code practicing software
US20170031884A1 (en) * 2015-07-27 2017-02-02 WP Company LLC d/b/a The Washington Post Automated dependency management based on page components
CN106933890A (en) * 2015-12-31 2017-07-07 华为技术有限公司 A kind of processing method and processing device of static page
CN106933722A (en) * 2017-03-06 2017-07-07 腾云天宇科技(北京)有限公司 A kind of web application monitoring method, server and system
CN108415702A (en) * 2018-01-22 2018-08-17 北京奇艺世纪科技有限公司 A kind of mobile terminal application interface dynamic rendering intent and device
CN108717355A (en) * 2018-04-20 2018-10-30 福州芝麻智能科技有限公司 A kind of macro substitution method of monitoring interface pixel
CN108804095A (en) * 2018-04-20 2018-11-13 福州芝麻智能科技有限公司 A kind of attribute definition method of monitored picture pixel
CN108897538A (en) * 2018-06-08 2018-11-27 泰康保险集团股份有限公司 Page view display methods and device, storage medium and electric terminal

Non-Patent Citations (5)

* Cited by examiner, † Cited by third party
Title
KELIXIN: "changemonitor" *
WEBMONITORING: "pagemon-chrome-ext" *
郑培蓓: "顾及视觉变量相似性的地图符号GPU高效渲染方法研究" *
郑芳;郑全;: "基于依赖分析的Web应用表示层测试方法研究" *
陈岩;: "轻量级响应式框架Vue.js应用分析" *

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112596738A (en) * 2020-12-28 2021-04-02 北京字跳网络技术有限公司 Method and device for determining front-end page to be tested, storage medium and electronic equipment

Also Published As

Publication number Publication date
CN111381813B (en) 2023-03-14

Similar Documents

Publication Publication Date Title
CN110489101B (en) Interface simulation method, system, medium and electronic equipment
CN111367516B (en) Application interface generation method and device and electronic equipment
CN110209315B (en) Method and device for displaying characters in user interface, electronic equipment and storage medium
CN111291244B (en) House source information display method, device, terminal and storage medium
CN109857506B (en) Method and device for realizing guide information, electronic equipment and storage medium
CN113377366B (en) Control editing method, device, equipment, readable storage medium and product
CN110287810B (en) Vehicle door motion detection method, device and computer readable storage medium
CN110489179B (en) Method, device, medium and equipment for acquiring call stack frame function signature
CN111273985A (en) Page rendering method and device, electronic equipment and computer readable storage medium
CN110865846B (en) Application management method, device, terminal, system and storage medium
CN110022493B (en) Playing progress display method and device, electronic equipment and storage medium
CN109902726B (en) Resume information processing method and device
CN112954056B (en) Method and device for processing monitoring data, electronic equipment and storage medium
CN112291121B (en) Data processing method and related equipment
CN111381813B (en) Front-end page debugging method and device, computer equipment and storage medium
CN109408387B (en) Page testing method and device
CN111177634A (en) Multi-language supporting file content loading method, device, equipment and medium
CN111324835A (en) Method and device for rendering user interface component, electronic equipment and storage medium
CN111273967A (en) Remote hook setting method and device suitable for Android system and electronic equipment
CN111767062A (en) Application configuration data updating method, device, equipment and storage medium
CN113377365B (en) Code display method, apparatus, device, computer readable storage medium and product
CN117251355A (en) Performance test method, device, equipment, computer readable storage medium and product
CN111625326B (en) Task pipeline execution method and device and electronic equipment
CN111258797B (en) Memory leak detection method, device, medium and electronic equipment
CN111309323B (en) Parameter initialization method and device and electronic equipment

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
CB02 Change of applicant information

Address after: 100041 B-0035, 2 floor, 3 building, 30 Shixing street, Shijingshan District, Beijing.

Applicant after: Tiktok vision (Beijing) Co.,Ltd.

Address before: Room B0035, 2nd floor, No. 3 Courtyard, 30 Shixing Street, Shijingshan District, Beijing, 100041

Applicant before: BEIJING BYTEDANCE NETWORK TECHNOLOGY Co.,Ltd.

Address after: 100041 B-0035, 2 floor, 3 building, 30 Shixing street, Shijingshan District, Beijing.

Applicant after: Douyin Vision Co.,Ltd.

Address before: 100041 B-0035, 2 floor, 3 building, 30 Shixing street, Shijingshan District, Beijing.

Applicant before: Tiktok vision (Beijing) Co.,Ltd.

CB02 Change of applicant information
GR01 Patent grant
GR01 Patent grant