CN112433929A - Webpage debugging method and device, computer equipment and storage medium - Google Patents
Webpage debugging method and device, computer equipment and storage medium Download PDFInfo
- Publication number
- CN112433929A CN112433929A CN201910787611.8A CN201910787611A CN112433929A CN 112433929 A CN112433929 A CN 112433929A CN 201910787611 A CN201910787611 A CN 201910787611A CN 112433929 A CN112433929 A CN 112433929A
- Authority
- CN
- China
- Prior art keywords
- webpage
- debugging
- fragment
- file
- target
- 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.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 95
- 239000012634 fragment Substances 0.000 claims abstract description 93
- 238000012544 monitoring process Methods 0.000 claims abstract description 74
- 230000002159 abnormal effect Effects 0.000 claims abstract description 56
- 230000008569 process Effects 0.000 claims abstract description 54
- 230000002452 interceptive effect Effects 0.000 claims abstract description 18
- 230000000007 visual effect Effects 0.000 claims description 23
- 238000004590 computer program Methods 0.000 claims description 21
- 230000003993 interaction Effects 0.000 claims description 12
- 238000004088 simulation Methods 0.000 claims description 3
- 230000006870 function Effects 0.000 description 9
- 230000005856 abnormality Effects 0.000 description 8
- 238000009877 rendering Methods 0.000 description 7
- 238000010586 diagram Methods 0.000 description 5
- 238000005516 engineering process Methods 0.000 description 4
- 230000005540 biological transmission Effects 0.000 description 3
- 238000011161 development Methods 0.000 description 2
- 230000003068 static effect Effects 0.000 description 2
- 230000001360 synchronised effect Effects 0.000 description 2
- 238000012360 testing method Methods 0.000 description 2
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000012795 verification Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/36—Preventing errors by testing or debugging software
- G06F11/3604—Software analysis for verifying properties of programs
- G06F11/3612—Software analysis for verifying properties of programs by runtime analysis
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/36—Preventing errors by testing or debugging software
- G06F11/362—Software debugging
- G06F11/3644—Software debugging by instrumenting at runtime
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
- G06F16/986—Document structures and storage, e.g. HTML extensions
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Computer Hardware Design (AREA)
- Quality & Reliability (AREA)
- Databases & Information Systems (AREA)
- Software Systems (AREA)
- Data Mining & Analysis (AREA)
- Debugging And Monitoring (AREA)
Abstract
The application relates to a webpage debugging method, a webpage debugging system, a computer device and a storage medium. The method comprises the following steps: sending a webpage debugging request to a server; receiving a debugging webpage and a script debugging module returned by a server according to a webpage debugging request, wherein the script debugging module comprises webpage data, a monitoring file and a webpage fragment generation file; running a webpage fragment generating file to obtain a variable name of webpage data; operating a web page fragment generation file to correspondingly fill web page data into web page fragment codes according to variable names to generate web page fragment codes corresponding to target web pages, wherein the web page fragment codes comprise expected styles, labels and interactive information of the target web pages; and running the monitoring file, and displaying corresponding abnormal information on the debugging webpage when monitoring that the process of generating the webpage fragment code corresponding to the target webpage is abnormal.
Description
Technical Field
The present application relates to the field of computer technologies, and in particular, to a method and an apparatus for debugging a web page, a computer device, and a storage medium.
Background
In the development process, debugging is a necessary process, and after no problem is ensured through debugging, a program or a webpage and the like can be issued to a user for normal use. Generally, the generation process of the web page is as follows: the terminal initiates a webpage request through a browser like a server, the server returns a generated HTML file to the browser after receiving the request, the HTML file comprises a document structure and document contents of the whole HTML, that is, the browser receives a complete HTML file, and the browser can analyze the HTML file, and render the HTML file after analyzing to obtain a visual webpage which can be seen by a user. In this mode, the browser only takes the result, and the server returns what browser analyzes what, so the browser is confronted with only two situations, one is to receive the HTML page which is expected to be needed and can be loaded correctly, and the other is to generate the needed HTML page normally because of the abnormality of the server, so the server generally returns a uniform default abnormal page to analyze the browser, such as a common error page of 500 system abnormalities.
In the conventional technology, if the normal HTML cannot be generated due to an abnormality, debugging needs to be performed at the server. When the server is debugged, a log debugging scheme can be adopted, a code for printing a log is added to a target position of the server, and the desired data is output at the server terminal; or the logs are generated into log files to be viewed so as to debug. The code can be added at the server, the result which the code wants to debug and output is printed out through the console of the browser, and when the code of the server goes wrong, the code and the corresponding error information can be output together at the console of the browser, so that the printed output of the server can be conveniently seen at the browser.
However, in both of the above solutions, the log needs to be printed on the server, which means that the log printing codes need to be invaded on the original service codes, and sometimes these codes may also need to be deleted, thereby increasing the complexity of debugging invisibly. Moreover, technicians cannot accurately locate data required by the technicians each time in the process of debugging the print log, that is, sometimes after a part of data is printed, other data is found to be possibly required, the technicians have to go back to the code to continuously print other required data, that is, only what data is required to be printed is temporarily thought, and all data cannot be acquired, so that the methods cannot achieve 'once and for all', the complexity and complexity of debugging are increased, the server-side log debugging method is to print log information to a terminal of a server side, the printed data is in a character string form, if some large objects are met, the printed data is a long character string, the readability is very poor, and therefore, the debugging complexity degree is increased in the server-side debugging method, the debugging efficiency is reduced.
Disclosure of Invention
In view of the foregoing, it is desirable to provide a method, an apparatus, a computer device, and a storage medium for debugging a web page, which can improve debugging efficiency.
A method of debugging a web page, the method comprising:
sending a webpage debugging request to a server;
receiving a debugging webpage and a script debugging module returned by the server according to the webpage debugging request, wherein the script debugging module comprises webpage data, a monitoring file and a webpage fragment generation file;
running the webpage fragment generating file to obtain the variable name of the webpage data;
the webpage fragment generation file is operated to correspondingly fill the webpage data into the webpage fragment codes according to the variable names, so that webpage fragment codes corresponding to target webpages are generated, and the webpage fragment codes contain the styles, labels and interaction information of the expected target webpages;
and running the monitoring file, and displaying corresponding abnormal information on the debugging webpage when monitoring that the process of generating the webpage fragment code corresponding to the target webpage is abnormal.
A web page debugging apparatus, the apparatus comprising:
the request sending module is used for sending a webpage debugging request to the server;
the file receiving module is used for receiving debugging webpage data and a script debugging module which are returned by the server according to the webpage debugging request, wherein the script debugging module comprises webpage data, a monitoring file and a webpage fragment generation file;
the webpage fragment generating module is used for operating the webpage fragment generating file to obtain the variable name of the webpage data; the webpage fragment generation file is operated to correspondingly fill the webpage data into the webpage fragment codes according to the variable names, so that webpage fragment codes corresponding to target webpages are generated, and the webpage fragment codes contain the styles, labels and interaction information of the expected target webpages;
and the abnormity monitoring module is used for displaying corresponding abnormal information on the debugging webpage when monitoring that the process of generating the webpage fragment code corresponding to the target webpage is abnormal.
A computer device comprising a memory, the memory storing a computer program, a processor implementing the following steps when the processor executes the computer program:
sending a webpage debugging request to a server;
receiving a debugging webpage and a script debugging module returned by the server according to the webpage debugging request, wherein the script debugging module comprises webpage data, a monitoring file and a webpage fragment generation file;
running the webpage fragment generating file to obtain the variable name of the webpage data;
the webpage fragment generation file is operated to correspondingly fill the webpage data into the webpage fragment codes according to the variable names, so that webpage fragment codes corresponding to target webpages are generated, and the webpage fragment codes contain the styles, labels and interaction information of the expected target webpages;
and running the monitoring file, and displaying corresponding abnormal information on the debugging webpage when monitoring that the process of generating the webpage fragment code corresponding to the target webpage is abnormal.
A computer-readable storage medium, on which a computer program is stored which, when executed by a processor, carries out the steps of:
sending a webpage debugging request to a server;
receiving a debugging webpage and a script debugging module returned by the server according to the webpage debugging request, wherein the script debugging module comprises webpage data, a monitoring file and a webpage fragment generation file;
running the webpage fragment generating file to obtain the variable name of the webpage data;
the webpage fragment generation file is operated to correspondingly fill the webpage data into the webpage fragment codes according to the variable names, so that webpage fragment codes corresponding to target webpages are generated, and the webpage fragment codes contain the styles, labels and interaction information of the expected target webpages;
and running the monitoring file, and displaying corresponding abnormal information on the debugging webpage when monitoring that the process of generating the webpage fragment code corresponding to the target webpage is abnormal.
In the webpage debugging method, the device, the computer equipment and the storage medium, the terminal sends the webpage debugging request to the server through the browser, and receives the blank debugging web page and script debugging module returned by the server, the browser on the terminal can run the script debugging module to generate a complete debugging web page, because the debugging webpage is generated by the script debugging module in a simulation way, when an abnormity occurs in the generation process of the debugging webpage, the monitoring file contained in the script debugging module can monitor and display the abnormal information on a visual debugging webpage, and can carry out accurate breakpoint debugging on abnormal information on a visualized debugging webpage through a debugging tool carried by the browser, the scheme can carry out breakpoint debugging on a code output by a server side, this means that the debugging process does not need to write any code, and all data can be obtained only by breakpoint debugging of the console carried by the browser. Because the breakpoint debugging mode is very simple, the breakpoint is only needed to be set on the corresponding code on the browser console, the code can execute the position of the breakpoint, any data in front of the breakpoint can be checked at the moment, and the data of the abnormal position required by a technician can be acquired at any time. And the breakpoint reading data belongs to the function provided by the self-contained debugging console of the browser, so that technicians can conveniently read various complex object data by means of the capability of the browser, and the browser has good reading experience. Meanwhile, according to the technical scheme of generating the debugging webpage through conventional server rendering, only some wrong state codes are returned generally when an exception occurs, the HTML page may display some specific wrong pages or blank pages, but in the scheme, when the HTML page rendering is abnormal, wrong information is directly output to the HTML page to serve as a prompt, so that debugging personnel can read the error information, the debugging difficulty of the mobile browser is greatly reduced, codes which need to be subjected to the HTML page rendering process at the server originally are executed on the browser, and equivalently, the codes at the browser end and the server end can be debugged at one end of the browser, so that the debugging efficiency is greatly improved, and the debugging cost is reduced.
Drawings
FIG. 1 is a diagram of an application environment of a method for debugging a web page in one embodiment;
FIG. 2 is a flowchart illustrating a method for debugging a web page in one embodiment;
FIG. 3 is a block diagram showing the structure of a debugging apparatus for a web page in one embodiment;
FIG. 4 is a diagram illustrating an internal structure of a computer device according to an embodiment.
Detailed Description
In order to make the objects, technical solutions and advantages of the present application more apparent, the present application is described in further detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative of the present application and are not intended to limit the present application.
The webpage debugging method provided by the application can be applied to the application environment shown in fig. 1. Wherein, the terminal 102 communicates with the server 104 through the network. The terminal 102 may send a webpage debugging request to the server 104 through the network, receive a debugging webpage and a script debugging module returned by the server 104, and execute the script debugging module to generate a complete HTML. The terminal 102 may be, but not limited to, various personal computers, notebook computers, smart phones, tablet computers, and portable wearable devices, and the server 104 may be implemented by an independent server or a server cluster formed by a plurality of servers.
In an embodiment, as shown in fig. 2, a method for debugging a web page is provided, which is described by taking the method as an example applied to the terminal in fig. 1, and includes the following steps:
The webpage debugging request refers to that a terminal initiates a request for acquiring a webpage to be debugged through a browser, a link parameter can be carried in the webpage debugging request, an entered debugging webpage can be adjusted by changing a parameter value of the link parameter, and the terminal can enter the debugging webpage under different debugging modes by sending webpage debugging requests carrying different link parameter values to a server.
In one embodiment, sending a web page debugging request to a server includes: acquiring a debugging parameter value corresponding to a debugging mode; taking the debugging parameter value as the parameter value of the link parameter contained in the webpage debugging request; and sending the webpage debugging request with the link parameter value as the debugging parameter value to the server.
The terminal can enter debugging web pages in different debugging modes by changing parameter values in the web page debugging request when the terminal sends the web page debugging request to the server through the browser. Here, a plurality of link parameters may be set, for example, two link parameters may be set, one link parameter is ip for debugging a specific server, and the other link parameter is env (abbreviation of environment) for debugging a specific environment. And if any one of the two parameters exists and the transmission value is correct, the debugging mode is entered, otherwise, the debugging mode is not entered. When both parameters occur simultaneously, the ip priority is greater than env. For example, for a normal link http:// i.xxx.com/m/index.html, if debugging a page on a certain server is specified, http:// i.xxx.com/m/index.htmlip ═ 10.1.2.3 can be accessed, and similarly, if it is desired to specify what environment to debug, for example, a test environment, http:// i.xxx/m/index.htmlnv ═ test can be accessed.
In one embodiment, sending a web page debugging request to a server includes: when the debugging environment is a formal environment, acquiring formal debugging parameter values corresponding to a debugging mode of the formal environment; acquiring an encrypted character string corresponding to the formal debugging parameter value; taking the encrypted character string as a parameter value of a link parameter contained in the webpage debugging request; and sending the webpage debugging request with the link parameter value as the encrypted character string to a server.
When the debugging environment is a formal environment, more encryption measures need to be taken to ensure that the debugging environment is not easy to be used by non-company staff. Therefore, when the debugging environment is the formal environment, the parameter values of the debugging model corresponding to the formal environment, that is, the formal debugging parameter values, and the encrypted character strings corresponding to the formal debugging parameter values can be acquired. The encryption character string is defined by technical personnel through pre-editing, is usually used for internal development and use, and can normally access and enter a debugging mode only after the encryption character string passes the verification, so the technical personnel can enter the debugging mode in the formal environment by setting the link parameter into the form of the encryption character string. For example, to debug the formal environment, http:// i.xxx.com/m/index.htmlenv ═ d80c.. ad2db7f35 can be accessed, and the env parameter value of the link is set to the corresponding encrypted string, so that the browser can access the debugging web page in the formal environment.
And step 204, operating the web page segment generation file to correspondingly fill the web page data into the web page segment codes according to the variable names, and generating web page segment codes corresponding to the target web pages, wherein the web page segment codes comprise the expected styles, labels and interactive information of the target web pages.
And after receiving a webpage debugging request sent by the terminal through the browser, the server returns a corresponding debugging webpage and a corresponding script debugging module according to the link parameters in the webpage debugging request. In the webpage debugging method, in a debugging mode, the server side does not directly return the generated HTML to be rendered to the browser like the technical scheme in the traditional technology, but returns a blank debugging webpage and a script debugging module with the webpage generating function to the browser. The script debugging module is a code module which is edited and packaged in advance, has a webpage generating function and contains webpage data, a monitoring file and a webpage fragment generating file which are returned by the server. The web page data is dynamic data returned by the server. The webpage data can be processed dynamic data directly returned by the server, or dynamic data acquired from the server by running a data acquisition file contained in a script debugging module after the terminal acquires the script debugging module returned by the server.
In one embodiment, the script debugging module further comprises a data acquisition file; the method further comprises the steps of operating the data acquisition file, and calling the data acquisition interface to acquire the webpage data of the debugging webpage from the server side.
When the terminal runs the data acquisition file through the browser, the data acquisition interface can be called to acquire webpage data of the debugging webpage from the server, the webpage data are generally dynamic data, and after the terminal acquires the data from the server through the browser, the acquired data can be further inserted into static HTML, so that blank HTML returned by the server has dynamic data. The blank HTML page returned by the server can be regarded as an HTML page which only has a basic frame but does not have specific data, values of all variables contained in the blank HTML page are all null, and the terminal needs to run a data acquisition file through a browser to acquire data from the server for filling.
The webpage fragment generation file is mainly used for generating webpage fragment codes corresponding to the target webpage. Specifically, the terminal may operate the web segment generation file through the browser to obtain variable names of variables included in the web page data, and correspondingly fill the web page data into the web segment codes according to the names of the variable names, so as to generate the web segment codes corresponding to the target web page. The web page segment code corresponding to the target web page refers to a code that can be recognized and analyzed by the browser to generate a visual web page. The web page fragment code includes a style, a label and interaction information of an expected target web page, that is, the web page fragment code includes an expected display situation of expected web page data on the target web page, such as which position of each data in the expected web page data is displayed on the target web page, a font size, a color, a display name, and the like, and also defines interaction information on the target web page, including a display position of an interaction button, a name of the interaction button, a jump link corresponding to the interaction button, and the like.
The monitoring file is used for monitoring an abnormal condition occurring in the webpage generation process, namely for monitoring the process of correspondingly filling the webpage data into the webpage fragment codes according to the variable names by the operation webpage fragment generation file to generate the webpage fragment codes corresponding to the target webpage, namely monitoring the generation process of the webpage fragment codes corresponding to the target webpage. If the generation process of the webpage segment code corresponding to the target webpage is abnormal, a normal target webpage cannot be generated, and the monitoring file displays abnormal information corresponding to the abnormality in the generation process on the debugging webpage. Because the generation process of the webpage segment code corresponding to the target webpage is executed on the browser of the terminal, when an abnormality occurs, the monitoring file can directly render the abnormal information and display visual abnormal prompt information on the current debugging webpage, wherein the abnormal prompt information can be displayed in a visual popup mode. Meanwhile, specific abnormal information including abnormal nodes, abnormal reasons, specific problems and the like can be displayed on the debugging webpage, so that developers can quickly debug the abnormal nodes and quickly solve the abnormal problems.
In one embodiment, the method further comprises: when monitoring that the process of generating the webpage segment codes corresponding to the target webpage is not abnormal, displaying successful prompt information and a preview interactive button on the debugging webpage; and clicking a preview interactive button, and skipping from the debugging webpage to the visualized target webpage.
The operation monitoring file can monitor the generation process of the webpage segment codes corresponding to the target webpage, and when monitoring that the abnormity occurs, abnormal prompt popup windows can be directly displayed on the currently displayed debugging webpage. When the abnormality is not monitored, namely when the abnormality is not monitored in the generation process, successful prompt information and a preview interactive button can be displayed on the debugging webpage, the successful prompt information can be a successful prompt popup window, the preview interactive button can be clicked to close, and the debugging webpage can jump to a visual target webpage.
In one embodiment, the method further comprises: when monitoring that the process of generating the webpage segment codes corresponding to the target webpage is not abnormal, generating corresponding success prompt information by operating a monitoring file; adding a webpage segment code corresponding to the target webpage into the debugging webpage to obtain final target webpage data; and analyzing the target webpage data through the browser to generate a visual target webpage, and displaying success prompt information on the target webpage.
When the operation monitoring file monitors the generation process of the webpage segment codes corresponding to the target webpage, if the abnormity is not monitored, the corresponding success prompt information can be generated through the operation monitoring file, the webpage segment codes corresponding to the target webpage can be added into the debugging webpage, so that the final target webpage data can be obtained, the target webpage data can be analyzed through the browser, a visual target webpage is generated, the success prompt information is displayed on the target webpage, the success prompt information can be a successful prompt popup window, and the webpage can be closed by clicking. That is to say, when the operation monitoring file does not monitor that the process of generating the webpage segment code corresponding to the target webpage is abnormal, the visualized target webpage can be displayed in at least two ways. The first method is that a preview button is clicked to jump to a target webpage, and the specific implementation mode is as follows: and displaying success prompt information and a preview interactive button on the debugging webpage, and skipping from the currently displayed debugging webpage to a visual target webpage by clicking the preview interactive button. The second is to directly display the target webpage, and the specific implementation manner is as follows: and when the abnormality is not monitored, the currently displayed debugging webpage automatically skips and displays a visual target webpage, and successful prompt information is displayed on the target webpage. Other display modes may be selected, and are not illustrated here.
In one embodiment, the webpage fragment generation file and the monitoring file contained in the script debugging module are files which are used by the server to simulate execution by JS according to the JS language characteristics in the execution process and the monitoring process of the self-generated webpage fragment.
Before the server returns the script debugging module to the terminal, the server converts the execution process and the monitoring process of the web page fragment of the target webpage into the language format of JS according to the characteristics of the JS language, namely, the execution codes written by various programming languages such as JAVA, PYTHON, PHP and the like can be converted into the format of the JS language, which is a uniform format process, so that the monitoring file and the web page fragment generation file contained in the script debugging module returned to the terminal can be identified and operated by a browser.
The script debugging module can be JS (JavaScript) codes, and since JavaScript returned by the server needs to simulate the process of generating an HTML document in the debugging mode, the HTML mainly comprises a DOM node, the browser can generate the DOM nodes by using the JS, and a character string returned by the browser is a DOM node, or a DOM node is a character string. HTML is a character string, each DOM node in the HTML can also be regarded as a character string, so that a complete HTML file can be formed only by splicing a series of character strings together. And the data in each DOM node can be transmitted in a parameter transmission mode, the character string and the data are spliced together to form a new character string through a function parameter transmission mode, the new character string is the expected DOM node, the function is called to obtain the function of the generation node, and the function can be packaged into a character string mode for subsequent use. Writing the process of generating the node into the script JS, transmitting the dynamic data requested from the server into the function of the generating node, and rendering the required data by the node to obtain the HTML webpage which is finally expected to contain the dynamic data, namely the target webpage.
In one embodiment, after displaying the corresponding exception information, the method further includes: positioning the abnormity according to the abnormity information to determine a corresponding abnormity node; and carrying out visual breakpoint debugging on the abnormal node through a debugging tool.
After the terminal receives the script debugging module returned by the server, the generation process of the HTML can be simulated through the script debugging module, and when an exception occurs in the HTML generation process, the exception corresponding to the exception information displayed on the visual debugging webpage can be debugged at a fixed point through a self-contained debugging tool of the browser. The debugging method can debug the debugging web pages under all environments, and can also realize that the browser can send a request to access the debugging web pages under any environment at any time to carry out visual debugging when the debugging web pages are abnormal.
If the technical scheme of generating and debugging the webpage at the server side adopted in the traditional technology is adopted, the log needs to be printed at the server side, which means that the codes for printing the log need to be invaded in the original service codes, and sometimes the codes need to be deleted, so that the complexity is increased. Moreover, by means of debugging the code print log, the data required for determination cannot be accurately positioned every time, and a part of the data may be printed, but other data is found to be required, so that the situation that the other required data has to be printed in the code is caused, that is, the data is printed only by considering what data is required temporarily, and all the data cannot be acquired, so that the methods cannot be 'once and for all'. Meanwhile, the object data readability of the debugging method is poor, log information is printed to a terminal of a server in a server log debugging mode, the printed data is in a character string form, if some large objects are met, a string of long character strings is printed, and readability is very poor. In the webpage debugging method, the terminal sends a webpage debugging request to the server through the browser and receives a blank debugging webpage and a script debugging module returned by the server, the browser on the terminal can run the script debugging module to generate a complete debugging webpage, because the debugging webpage is generated by the script debugging module in a simulation way, when an abnormity occurs in the generation process of the debugging webpage, the monitoring file contained in the script debugging module can monitor and display the abnormal information on a visual debugging webpage, and can carry out accurate breakpoint debugging on abnormal information on a visualized debugging webpage through a debugging tool carried by the browser, the scheme can carry out breakpoint debugging on a code output by a server side, this means that the debugging process does not need to write any code, and all data can be obtained only by breakpoint debugging of the console carried by the browser. Because the breakpoint debugging mode is very simple, the breakpoint is only needed to be set on the corresponding code on the browser console, the code can execute the position of the breakpoint, any data in front of the breakpoint can be checked at the moment, and the data of the abnormal position required by a technician can be acquired at any time. And the breakpoint reading data belongs to the function provided by the self-contained debugging console of the browser, so that technicians can conveniently read various complex object data by means of the capability of the browser, and the browser has good reading experience. Meanwhile, according to the technical scheme of generating the debugging webpage through conventional server rendering, only some wrong state codes are returned generally when an exception occurs, the HTML page may display some specific wrong pages or blank pages, but in the scheme, when the HTML page rendering is abnormal, wrong information is directly output to the HTML page to serve as a prompt, so that debugging personnel can read the error information, the debugging difficulty of the mobile browser is greatly reduced, codes which need to be subjected to the HTML page rendering process at the server originally are executed on the browser, and equivalently, the codes at the browser end and the server end can be debugged at one end of the browser, so that the debugging efficiency is greatly improved, and the debugging cost is reduced.
It should be understood that, although the steps in the flowchart of fig. 2 are shown in order as indicated by the arrows, the steps are not necessarily performed in order as indicated by the arrows. The steps are not performed in the exact order shown and described, and may be performed in other orders, unless explicitly stated otherwise. Moreover, at least a portion of the steps in fig. 2 may include multiple sub-steps or multiple stages that are not necessarily performed at the same time, but may be performed at different times, and the order of performance of the sub-steps or stages is not necessarily sequential, but may be performed in turn or alternately with other steps or at least a portion of the sub-steps or stages of other steps.
In one embodiment, as shown in fig. 3, there is provided a web page debugging apparatus including: the device comprises a request sending module, a file receiving module, a web page segment generating module and an abnormity monitoring module, wherein:
the request sending module 301 is configured to send a webpage debugging request to a server.
The file receiving module 302 is configured to receive debugging web page data and a script debugging module returned by the server according to the web page debugging request, where the script debugging module includes web page data, a monitoring file, and a web page segment generation file.
The web page fragment generating module 303 is configured to run a web page fragment generating file to obtain a variable name of the web page data; and operating the web page fragment generation file to correspondingly fill the web page data into the web page fragment codes according to the variable names to generate the web page fragment codes corresponding to the target web page, wherein the web page fragment codes comprise the expected style, label and interactive information of the target web page.
And the anomaly monitoring module 304 is configured to display corresponding anomaly information on the debugging web page when it is monitored that an anomaly occurs in the process of generating the web page segment code corresponding to the target web page.
In an embodiment, the request sending module 301 is further configured to obtain a debugging parameter value corresponding to a debugging mode; taking the debugging parameter value as the parameter value of the link parameter contained in the webpage debugging request; and sending the webpage debugging request with the link parameter value as the debugging parameter value to the server.
In an embodiment, the request sending module 301 is further configured to, when the debugging environment is a formal environment, obtain a formal debugging parameter value corresponding to a debugging mode of the formal environment; acquiring an encrypted character string corresponding to the formal debugging parameter value; taking the encrypted character string as a parameter value of a link parameter contained in the webpage debugging request; and sending the webpage debugging request with the link parameter value as the encrypted character string to a server.
In one embodiment, the request sending module 301 is further configured to obtain that the execution process and the monitoring process of generating the webpage fragment by the server according to the JS language characteristic are converted into the file simulating the execution with JS.
In an embodiment, the anomaly monitoring module 304 is further configured to locate an anomaly according to the anomaly information to determine a corresponding anomaly node; and carrying out visual breakpoint debugging on the abnormal node through a debugging tool.
In an embodiment, the anomaly monitoring module 304 is further configured to display a success prompt message and a preview interaction button on the debugging web page when it is monitored that no anomaly occurs in the process of generating the web page segment code corresponding to the target web page; and clicking a preview interactive button, and skipping from the debugging webpage to the visualized target webpage.
In an embodiment, the anomaly monitoring module 304 is further configured to generate a corresponding success prompt message by running a monitoring file when it is monitored that no anomaly occurs in the process of generating the webpage segment code corresponding to the target webpage; adding a webpage segment code corresponding to the target webpage into the debugging webpage to obtain final target webpage data; and analyzing the target webpage data through the browser to generate a visual target webpage, and displaying success prompt information on the target webpage.
In an embodiment, the web page fragment generating module 303 is further configured to run a data obtaining file, and call a data obtaining interface to obtain the web page data of the debugging web page from the server.
For specific limitations of the web page debugging apparatus, reference may be made to the above limitations of the web page debugging method, which is not described herein again. All or part of the modules in the webpage debugging device can be realized by software, hardware and a combination thereof. The modules can be embedded in a hardware form or independent from a processor in the computer device, and can also be stored in a memory in the computer device in a software form, so that the processor can call and execute operations corresponding to the modules.
In one embodiment, a computer device is provided, which may be a terminal, and its internal structure diagram may be as shown in fig. 4. The computer device includes a processor, a memory, a network interface, a display screen, and an input device connected by a system bus. Wherein the processor of the computer device is configured to provide computing and control capabilities. The memory of the computer device comprises a nonvolatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of an operating system and computer programs in the non-volatile storage medium. The network interface of the computer device is used for communicating with an external terminal through a network connection. The computer program is executed by a processor to implement a method of debugging a web page. The display screen of the computer equipment can be a liquid crystal display screen or an electronic ink display screen, and the input device of the computer equipment can be a touch layer covered on the display screen, a key, a track ball or a touch pad arranged on the shell of the computer equipment, an external keyboard, a touch pad or a mouse and the like.
Those skilled in the art will appreciate that the architecture shown in fig. 4 is merely a block diagram of some of the structures associated with the disclosed aspects and is not intended to limit the computing devices to which the disclosed aspects apply, as particular computing devices may include more or less components than those shown, or may combine certain components, or have a different arrangement of components.
In one embodiment, a computer device is provided, comprising a memory and a processor, the memory having a computer program stored therein, the processor implementing the following steps when executing the computer program: sending a webpage debugging request to a server; receiving a debugging webpage and a script debugging module returned by a server according to a webpage debugging request, wherein the script debugging module comprises webpage data, a monitoring file and a webpage fragment generation file; running a webpage fragment generating file to obtain a variable name of webpage data; operating a web page fragment generation file to correspondingly fill web page data into web page fragment codes according to variable names to generate web page fragment codes corresponding to target web pages, wherein the web page fragment codes comprise expected styles, labels and interactive information of the target web pages; and running the monitoring file, and displaying corresponding abnormal information on the debugging webpage when monitoring that the process of generating the webpage fragment code corresponding to the target webpage is abnormal.
In one embodiment, after displaying the corresponding exception information, the processor when executing the computer program further performs the steps of: positioning the abnormity according to the abnormity information to determine a corresponding abnormity node; and carrying out visual breakpoint debugging on the abnormal node through a debugging tool.
In one embodiment, the script debugging module further comprises a data acquisition file; the processor, when executing the computer program, further performs the steps of: and operating the data acquisition file, and calling a data acquisition interface to acquire the webpage data of the debugging webpage from the server. In one embodiment, the processor, when executing the computer program, further performs the steps of: when monitoring that the process of generating the webpage segment codes corresponding to the target webpage is not abnormal, displaying successful prompt information and a preview interactive button on the debugging webpage; and clicking a preview interactive button, and skipping from the debugging webpage to the visualized target webpage.
In one embodiment, the processor, when executing the computer program, further performs the steps of: when monitoring that the process of generating the webpage segment codes corresponding to the target webpage is not abnormal, generating corresponding success prompt information by operating a monitoring file; adding a webpage segment code corresponding to the target webpage into the debugging webpage to obtain final target webpage data; and analyzing the target webpage data through the browser to generate a visual target webpage, and displaying success prompt information on the target webpage.
In one embodiment, sending a web page debugging request to a server includes: acquiring a debugging parameter value corresponding to a debugging mode; taking the debugging parameter value as the parameter value of the link parameter contained in the webpage debugging request; and sending the webpage debugging request with the link parameter value as the debugging parameter value to the server.
In one embodiment, sending a web page debugging request to a server includes: when the debugging environment is a formal environment, acquiring formal debugging parameter values corresponding to a debugging mode of the formal environment; acquiring an encrypted character string corresponding to the formal debugging parameter value; taking the encrypted character string as a parameter value of a link parameter contained in the webpage debugging request; and sending the webpage debugging request with the link parameter value as the encrypted character string to a server.
In one embodiment, the web page fragment generation file and the monitoring file contained in the script debugging module are files which are used by the server to simulate execution by JS through converting an execution process and a monitoring process of self-generated web page fragments according to JS language characteristics.
In one embodiment, a computer-readable storage medium is provided, having a computer program stored thereon, which when executed by a processor, performs the steps of: sending a webpage debugging request to a server; receiving a debugging webpage and a script debugging module returned by a server according to a webpage debugging request, wherein the script debugging module comprises webpage data, a monitoring file and a webpage fragment generation file; running a webpage fragment generating file to obtain a variable name of webpage data; operating a web page fragment generation file to correspondingly fill web page data into web page fragment codes according to variable names to generate web page fragment codes corresponding to target web pages, wherein the web page fragment codes comprise expected styles, labels and interactive information of the target web pages; and running the monitoring file, and displaying corresponding abnormal information on the debugging webpage when monitoring that the process of generating the webpage fragment code corresponding to the target webpage is abnormal. In one embodiment, the script debugging module further comprises a data acquisition file; the computer program when executed by the processor further realizes the steps of: and operating the data acquisition file, and calling a data acquisition interface to acquire the webpage data of the debugging webpage from the server.
In one embodiment, the computer program when executed by the processor further performs the following steps after displaying the corresponding exception information: positioning the abnormity according to the abnormity information to determine a corresponding abnormity node; and carrying out visual breakpoint debugging on the abnormal node through a debugging tool.
In one embodiment, the computer program when executed by the processor further performs the steps of: when monitoring that the process of generating the webpage segment codes corresponding to the target webpage is not abnormal, displaying successful prompt information and a preview interactive button on the debugging webpage; and clicking a preview interactive button, and skipping from the debugging webpage to the visualized target webpage.
In one embodiment, the computer program when executed by the processor further performs the steps of: when monitoring that the process of generating the webpage segment codes corresponding to the target webpage is not abnormal, generating corresponding success prompt information by operating a monitoring file; adding a webpage segment code corresponding to the target webpage into the debugging webpage to obtain final target webpage data; and analyzing the target webpage data through the browser to generate a visual target webpage, and displaying success prompt information on the target webpage.
In one embodiment, sending a web page debugging request to a server includes: acquiring a debugging parameter value corresponding to a debugging mode; taking the debugging parameter value as the parameter value of the link parameter contained in the webpage debugging request; and sending the webpage debugging request with the link parameter value as the debugging parameter value to the server.
In one embodiment, sending a web page debugging request to a server includes: when the debugging environment is a formal environment, acquiring formal debugging parameter values corresponding to a debugging mode of the formal environment; acquiring an encrypted character string corresponding to the formal debugging parameter value; taking the encrypted character string as a parameter value of a link parameter contained in the webpage debugging request; and sending the webpage debugging request with the link parameter value as the encrypted character string to a server.
In one embodiment, the web page fragment generation file and the monitoring file contained in the script debugging module are files which are used by the server to simulate execution by JS through converting an execution process and a monitoring process of self-generated web page fragments according to JS language characteristics.
It will be understood by those skilled in the art that all or part of the processes of the methods of the embodiments described above can be implemented by hardware related to instructions of a computer program, which can be stored in a non-volatile computer-readable storage medium, and when executed, can include the processes of the embodiments of the methods described above. Any reference to memory, storage, database, or other medium used in the embodiments provided herein may include non-volatile and/or volatile memory, among others. Non-volatile memory can include read-only memory (ROM), Programmable ROM (PROM), Electrically Programmable ROM (EPROM), Electrically Erasable Programmable ROM (EEPROM), or flash memory. Volatile memory can include Random Access Memory (RAM) or external cache memory. By way of illustration and not limitation, RAM is available in a variety of forms such as Static RAM (SRAM), Dynamic RAM (DRAM), Synchronous DRAM (SDRAM), Double Data Rate SDRAM (DDRSDRAM), Enhanced SDRAM (ESDRAM), Synchronous Link DRAM (SLDRAM), Rambus Direct RAM (RDRAM), direct bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM).
The technical features of the above embodiments can be arbitrarily combined, and for the sake of brevity, all possible combinations of the technical features in the above embodiments are not described, but should be considered as the scope of the present specification as long as there is no contradiction between the combinations of the technical features.
The above examples only express several embodiments of the present application, and the description thereof is more specific and detailed, but not construed as limiting the scope of the invention. It should be noted that, for a person skilled in the art, several variations and modifications can be made without departing from the concept of the present application, which falls within the scope of protection of the present application. Therefore, the protection scope of the present patent shall be subject to the appended claims.
Claims (10)
1. A method of debugging a web page, the method comprising:
sending a webpage debugging request to a server;
receiving a debugging webpage and a script debugging module returned by the server according to the webpage debugging request, wherein the script debugging module comprises webpage data, a monitoring file and a webpage fragment generation file;
running the webpage fragment generating file to obtain the variable name of the webpage data;
the webpage fragment generation file is operated to correspondingly fill the webpage data into the webpage fragment codes according to the variable names, so that webpage fragment codes corresponding to target webpages are generated, and the webpage fragment codes contain the styles, labels and interaction information of the expected target webpages;
and running the monitoring file, and displaying corresponding abnormal information on the debugging webpage when monitoring that the process of generating the webpage fragment code corresponding to the target webpage is abnormal.
2. The method according to claim 1, further comprising, after the displaying the corresponding exception information on the debugging webpage:
positioning the abnormity according to the abnormity information to determine a corresponding abnormity node;
and carrying out visual breakpoint debugging on the abnormal node through a debugging tool.
3. The method of claim 1, further comprising:
when monitoring that the process of generating the webpage segment codes corresponding to the target webpage is not abnormal, displaying successful prompt information and a preview interactive button on the debugging webpage;
and clicking the preview interactive button, and skipping from the debugging webpage to a visual target webpage.
4. The method of claim 1, further comprising:
when monitoring that the process of generating the webpage segment codes corresponding to the target webpage is not abnormal, generating corresponding success prompt information by operating the monitoring file;
adding the webpage segment code corresponding to the target webpage into the debugging webpage to obtain final target webpage data;
and analyzing the target webpage data through a browser to generate a visual target webpage, and displaying the success prompt information on the target webpage.
5. The method of claim 1, wherein sending the web page debugging request to the server comprises:
acquiring a debugging parameter value corresponding to a debugging mode;
taking the debugging parameter value as a parameter value of a link parameter contained in the webpage debugging request;
and sending the webpage debugging request with the link parameter value as the debugging parameter value to a server.
6. The method of claim 1, wherein sending the web page debugging request to the server comprises:
when the debugging environment is a formal environment, acquiring formal debugging parameter values corresponding to a debugging mode of the formal environment;
acquiring an encrypted character string corresponding to the formal debugging parameter value;
taking the encrypted character string as a parameter value of a link parameter contained in the webpage debugging request;
and sending the webpage debugging request with the link parameter value as the encrypted character string to a server.
7. The method according to claim 1, wherein the web page fragment generation file and the monitoring file contained in the script debugging module are files for converting the execution process and the monitoring process of the self-generated web page fragment into simulation execution with JS by the server according to the JS language characteristics.
8. A web page debugging apparatus, comprising:
the request sending module is used for sending a webpage debugging request to the server;
the file receiving module is used for receiving debugging webpage data and a script debugging module which are returned by the server according to the webpage debugging request, wherein the script debugging module comprises webpage data, a monitoring file and a webpage fragment generation file;
the webpage fragment generating module is used for operating the webpage fragment generating file to obtain the variable name of the webpage data; the webpage fragment generation file is operated to correspondingly fill the webpage data into the webpage fragment codes according to the variable names, so that webpage fragment codes corresponding to target webpages are generated, and the webpage fragment codes contain the styles, labels and interaction information of the expected target webpages;
and the abnormity monitoring module is used for displaying corresponding abnormal information on the debugging webpage when monitoring that the process of generating the webpage fragment code corresponding to the target webpage is abnormal.
9. A computer device comprising a memory and a processor, the memory storing a computer program, wherein the processor implements the steps of the method of any one of claims 1 to 7 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, carries out the steps of the method of any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910787611.8A CN112433929A (en) | 2019-08-26 | 2019-08-26 | Webpage debugging method and device, computer equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910787611.8A CN112433929A (en) | 2019-08-26 | 2019-08-26 | Webpage debugging method and device, computer equipment and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112433929A true CN112433929A (en) | 2021-03-02 |
Family
ID=74690379
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910787611.8A Pending CN112433929A (en) | 2019-08-26 | 2019-08-26 | Webpage debugging method and device, computer equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112433929A (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113688056A (en) * | 2021-09-09 | 2021-11-23 | 京东科技控股股份有限公司 | Breakpoint debugging control method and related equipment |
| CN117076333A (en) * | 2023-10-16 | 2023-11-17 | 成都无糖信息技术有限公司 | Vulnerability verification method based on script breakpoint and browser automation |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104750793A (en) * | 2015-03-12 | 2015-07-01 | 小米科技有限责任公司 | Method and device for generating page tables |
| CN106933890A (en) * | 2015-12-31 | 2017-07-07 | 华为技术有限公司 | A kind of processing method and processing device of static page |
| US9959192B1 (en) * | 2015-09-15 | 2018-05-01 | Google Llc | Debugging interface for inserted elements in a resource |
| CN108287784A (en) * | 2017-01-09 | 2018-07-17 | 腾讯科技（深圳）有限公司 | A kind of webpage adjustment method and device |
| CN110147292A (en) * | 2019-04-15 | 2019-08-20 | 平安普惠企业管理有限公司 | Monitoring method, device, storage medium and the computer equipment of webpage exception |
-
2019
- 2019-08-26 CN CN201910787611.8A patent/CN112433929A/en active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104750793A (en) * | 2015-03-12 | 2015-07-01 | 小米科技有限责任公司 | Method and device for generating page tables |
| US9959192B1 (en) * | 2015-09-15 | 2018-05-01 | Google Llc | Debugging interface for inserted elements in a resource |
| CN106933890A (en) * | 2015-12-31 | 2017-07-07 | 华为技术有限公司 | A kind of processing method and processing device of static page |
| CN108287784A (en) * | 2017-01-09 | 2018-07-17 | 腾讯科技（深圳）有限公司 | A kind of webpage adjustment method and device |
| CN110147292A (en) * | 2019-04-15 | 2019-08-20 | 平安普惠企业管理有限公司 | Monitoring method, device, storage medium and the computer equipment of webpage exception |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113688056A (en) * | 2021-09-09 | 2021-11-23 | 京东科技控股股份有限公司 | Breakpoint debugging control method and related equipment |
| CN117076333A (en) * | 2023-10-16 | 2023-11-17 | 成都无糖信息技术有限公司 | Vulnerability verification method based on script breakpoint and browser automation |
| CN117076333B (en) * | 2023-10-16 | 2024-02-23 | 成都无糖信息技术有限公司 | Vulnerability verification method based on script breakpoint and browser automation |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111061526B (en) | Automatic test method, device, computer equipment and storage medium | |
| CN109901834B (en) | Document page generation method, device, computer equipment and storage medium | |
| US10613971B1 (en) | Autonomous testing of web-based applications | |
| CN108304498B (en) | Webpage data acquisition method and device, computer equipment and storage medium | |
| US10523784B2 (en) | Capturing and replaying application sessions using resource files | |
| US10108535B2 (en) | Web application test script generation to test software functionality | |
| US20080126931A1 (en) | System and method for recording and reproducing user operation | |
| CN107145440B (en) | Application program testing method and device and computer equipment | |
| US9003235B2 (en) | Indicating coverage of web application testing | |
| CN107783899A (en) | The method of testing of the H5 pages, device and computer equipment in application program | |
| KR20080053293A (en) | Initial server-side content rendering for client-script web pages | |
| CN111782505B (en) | Train system simulation test method, device, computer equipment and storage medium | |
| CN111736811A (en) | Form data verification method, system, server and user terminal | |
| CN112433929A (en) | Webpage debugging method and device, computer equipment and storage medium | |
| CN114253537A (en) | Form generation method and device, electronic equipment and storage medium | |
| CN111966587A (en) | Data acquisition method, device and equipment | |
| CN111431767A (en) | Multi-browser resource synchronization method and device, computer equipment and storage medium | |
| CN109976683B (en) | Data printing method, device, equipment and storage medium | |
| JP5151696B2 (en) | Program to rewrite uniform resource locator information | |
| CN114461533A (en) | Method, system, electronic device and storage medium for automatic testing of Web page | |
| CN110232018A (en) | Interface test method, device, computer equipment | |
| CN115470152B (en) | Test code generation method, test code generation device, and storage medium | |
| CN110865943A (en) | Interface testing method and device, computer equipment and storage medium | |
| CN113900641B (en) | Template generation method and device, computer equipment and storage medium | |
| CN111083007B (en) | Test method, test device, computer equipment and storage medium |
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 |