Debugging method and device of webpage page, storage medium and electronic equipment

Abstract

This disclosure relates to a method, apparatus, storage medium, and electronic device for debugging web pages, belonging to the field of computer technology. The method includes: generating a first interface acquisition request based on first device attribute information of a first terminal device and page attribute information of the page to be debugged, and sending the first interface acquisition request to a server; receiving a first debugging interface from the server in response to the first interface acquisition request, and determining the information to be debugged from the page to be debugged based on the first interface parameters included in the first debugging interface; loading an inline frame in the page to be debugged, and loading a script Uniform Resource Locator (URL) corresponding to the information to be debugged within the inline frame; running a script file corresponding to the URL in the inline frame to obtain the page debugging result. This disclosure solves the problem of pages failing to display correctly due to limitations and defects in related technologies.

Description

Technical Field

[0001] This disclosure relates to the field of computer technology, and more specifically, to a method for debugging web pages, a device for debugging web pages, a computer-readable storage medium, and an electronic device. Background Technology

[0002] In mobile web page development, due to the limitations of mobile phone resources, it is usually difficult to perform actual page debugging on all terminal device models on the market. In practice, it is generally necessary to select a few terminal devices with different operating systems and models for debugging.

[0003] However, due to differences between different terminal devices, there are also differences in page compatibility, resulting in incomplete debugging and pages failing to display correctly after launch.

[0004] It should be noted that the information in the background section above is only used to enhance the understanding of the background of this disclosure, and therefore may include information that does not constitute prior art known to those skilled in the art. Summary of the Invention

[0005] The purpose of this disclosure is to provide a method for debugging web pages, a device for debugging web pages, a computer-readable storage medium, and an electronic device, thereby overcoming, to at least some extent, the problem of pages failing to display correctly due to limitations and defects in related technologies.

[0006] According to one aspect of this disclosure, a method for debugging a webpage is provided, comprising:

[0007] Based on the first device attribute information of the first terminal device and the page attribute information of the page to be debugged, a first interface acquisition request is generated and sent to the server.

[0008] The server receives the first debugging interface that responds to the first interface acquisition request, and determines the debugging information to be collected from the page to be debugged based on the first interface parameters included in the first debugging interface.

[0009] Load an inline frame in the page to be debugged, and load the script Uniform Resource Locator corresponding to the information to be debugged in the inline frame;

[0010] Run the script file corresponding to the script's Uniform Resource Locator within the inline framework to obtain the page debugging results for the page to be debugged.

[0011] According to one aspect of this disclosure, a webpage debugging apparatus is provided, comprising:

[0012] The first interface acquisition request generation module is used to generate a first interface acquisition request based on the first device attribute information of the first terminal device and the page attribute information of the page to be debugged, and send the first interface acquisition request to the server.

[0013] The debugging information determination module is used to receive the first debugging interface fed back by the server in response to the first interface acquisition request, and determine the debugging information to be collected from the page to be debugged according to the first interface parameters included in the first debugging interface.

[0014] A Uniform Resource Locator (URL) loading module is used to load an inline frame in the page to be debugged, and load the script URL corresponding to the information to be debugged in the inline frame;

[0015] The script file execution module is used to run the script file corresponding to the script Uniform Resource Locator in the inline frame to obtain the page debugging result of the page to be debugged.

[0016] According to one aspect of this disclosure, a computer-readable storage medium is provided having a computer program stored thereon, which, when executed by a processor, implements the debugging method for web pages as described in any of the preceding claims.

[0017] According to one aspect of this disclosure, an electronic device is provided, comprising:

[0018] Processor; and

[0019] Memory for storing the executable instructions of the processor;

[0020] The processor is configured to execute the debugging method for the web page described in any of the above-mentioned embodiments by executing the executable instructions.

[0021] The webpage debugging method provided in this disclosure has two aspects. First, it generates a first interface acquisition request based on the first device attribute information of the first terminal device and the page attribute information of the page to be debugged, and sends the first interface acquisition request to the server. Then, it receives a first debugging interface from the server in response to the first interface acquisition request, and determines the debugging information to be collected from the page to be debugged based on the first interface parameters included in the first debugging interface. Next, it loads an inline frame in the page to be debugged and loads a script Uniform Resource Locator (URL) corresponding to the debugging information in the inline frame. Finally, it runs the script file corresponding to the URL in the inline frame to obtain the page debugging result. This means that the page can be debugged while accessing it, and the page can be optimized based on the debugging result, solving the problem in the prior art where incomplete debugging leads to the page not displaying correctly after deployment. Second, since page debugging is implemented in an inline frame, page debugging or page debugging and optimization can be achieved without affecting page access efficiency, thereby improving the user experience.

[0022] It should be understood that the above general description and the following detailed description are exemplary and explanatory only, and are not intended to limit this disclosure. Attached Figure Description

[0023] The accompanying drawings, which are incorporated in and form part of this specification, illustrate embodiments consistent with this disclosure and, together with the description, serve to explain the principles of this disclosure. It is obvious that the drawings described below are merely some embodiments of this disclosure, and those skilled in the art can obtain other drawings based on these drawings without any inventive effort.

[0024] Figure 1 The flowchart illustrates a method for debugging a web page according to an example embodiment of the present disclosure.

[0025] Figure 2 The illustration shows an example scenario of an application scenario of a web page debugging method according to an exemplary embodiment of the present disclosure.

[0026] Figure 3 The diagram schematically illustrates an example interface of an inline frame according to an exemplary embodiment of the present disclosure.

[0027] Figure 4 The diagram illustrates a specific scenario of a code snippet capturing a runtime exception according to an example embodiment of this disclosure.

[0028] Figure 5 The illustration shows a scenario example of a current page screenshot according to an exemplary embodiment of the present disclosure.

[0029] Figure 6 The illustration shows an example scenario of another current page screenshot according to an example embodiment of the present disclosure.

[0030] Figure 7 A block diagram schematically illustrates a debugging apparatus for a web page according to an exemplary embodiment of the present disclosure.

[0031] Figure 8 An electronic device for implementing the above-described debugging method for a webpage, according to an example embodiment of the present disclosure, is illustrated schematically. Detailed Implementation

[0032] Example embodiments will now be described more fully with reference to the accompanying drawings. However, example embodiments can be implemented in many forms and should not be construed as limited to the examples set forth herein; rather, these embodiments are provided to make this disclosure more comprehensive and complete, and to fully convey the concept of the example embodiments to those skilled in the art. The described features, structures, or characteristics can be combined in any suitable manner in one or more embodiments. In the following description, numerous specific details are provided to give a full understanding of embodiments of this disclosure. However, those skilled in the art will recognize that the technical solutions of this disclosure can be practiced with one or more of the specific details omitted, or other methods, components, apparatus, steps, etc., can be employed. In other instances, well-known technical solutions are not shown or described in detail to avoid obscuring various aspects of this disclosure.

[0033] Furthermore, the accompanying drawings are merely illustrative of this disclosure and are not necessarily drawn to scale. The same reference numerals in the drawings denote the same or similar parts, and therefore repeated descriptions of them will be omitted. Some block diagrams shown in the drawings are functional entities and do not necessarily correspond to physically or logically independent entities. These functional entities may be implemented in software, in one or more hardware modules or integrated circuits, or in different network and / or processor devices and / or microcontroller devices.

[0034] In mobile web development, it's often necessary to debug on different mobile devices to ensure the same code runs stably on various platforms. However, in practice, due to resource limitations on mobile devices, it's usually difficult to perform real-device debugging on many phone models. Typically, debugging is done on individual phones with different operating systems (e.g., Android, iOS) or even just a single operating system (e.g., Android). However, differences in operating systems, operating system versions, browsers, browser versions, and models can all affect page compatibility. Debugging on individual phones or single operating systems inevitably leads to incomplete debugging, resulting in pages not functioning correctly on some devices after deployment.

[0035] Based on this, this exemplary embodiment first provides a method for debugging web pages, which can run on a terminal device; of course, those skilled in the art can also run the method disclosed herein on other platforms as needed, and this exemplary embodiment does not impose any special limitations on this. Specifically, refer to... Figure 1 As shown, the debugging method for this webpage may include the following steps:

[0036] Step S110. Generate a first interface acquisition request based on the first device attribute information of the first terminal device and the page attribute information of the page to be debugged, and send the first interface acquisition request to the server.

[0037] Step S120. Receive the first debugging interface that responds to the first interface acquisition request from the server, and determine the debugging information to be collected from the page to be debugged according to the first interface parameters included in the first debugging interface;

[0038] Step S130. Load an inline frame in the page to be debugged, and load the script Uniform Resource Locator corresponding to the information to be debugged in the inline frame;

[0039] Step S140. Run the script file corresponding to the script's Uniform Resource Locator in the inline frame to obtain the page debugging result of the page to be debugged.

[0040] In the aforementioned webpage debugging method, on the one hand, a first interface acquisition request can be generated based on the first device attribute information of the first terminal device and the page attribute information of the page to be debugged, and the first interface acquisition request can be sent to the server. Then, the server's response to the first interface acquisition request is received, along with the first debugging interface. Based on the first interface parameters included in the first debugging interface, the debugging information to be collected from the page to be debugged is determined. Then, an inline frame is loaded in the page to be debugged, and a script Uniform Resource Locator corresponding to the debugging information is loaded in the inline frame. Finally, the script file corresponding to the script Uniform Resource Locator is run in the inline frame to obtain the page debugging result. That is, the page can be debugged while accessing it, and the page can be optimized based on the page debugging result. This solves the problem in the prior art where incomplete debugging leads to the page not displaying correctly after going live. On the other hand, since page debugging is implemented in an inline frame, page debugging or page debugging and optimization can be achieved without affecting page access efficiency, thereby improving the user experience.

[0041] The debugging method for web pages described in the exemplary embodiments of this disclosure will be explained and described in detail below with reference to the accompanying drawings.

[0042] First, the inventive purpose of the exemplary embodiments of this disclosure will be explained and described. Specifically, the webpage debugging method described in the exemplary embodiments of this disclosure can solve the problem in the prior art where pages cannot run normally due to differences in mobile phone operating systems, operating system versions, browsers, browser versions, and models; at the same time, the webpage debugging method described in the exemplary embodiments of this disclosure can also perform compatibility testing on different mobile phone models, thereby obtaining a better code compatibility solution and avoiding the problem of pages not displaying due to code incompatibility.

[0043] Secondly, the application scenarios of the exemplary embodiments of this disclosure will be explained and described. Specifically, the webpage debugging method described in the exemplary embodiments of this disclosure can be applied to, for example, Figure 2 In the scenario shown, the application scenario may include a first terminal device 210 and a server 220; the first terminal device can communicate with the server via a wired or wireless network. In specific applications, the first terminal device can be used to implement the webpage debugging method described in the example embodiments of this disclosure, and the server can be used to store the parameters of each page.

[0044] In one possible example embodiment, the application scenario may also include a second terminal device 230, which can also communicate with the server via a wired network or a wireless network. The second terminal device can be used to display the page debugging results, so that maintenance personnel can determine whether the corresponding page needs to be optimized based on the corresponding page debugging results; and optimize the page when it is determined that optimization is needed.

[0045] Furthermore, in a webpage debugging method provided in the exemplary embodiments of this disclosure:

[0046] In step S110, a first interface acquisition request is generated based on the first device attribute information of the first terminal device and the page attribute information of the page to be debugged, and the first interface acquisition request is sent to the server.

[0047] In this example embodiment, firstly, a first interface acquisition request is generated based on the first device attribute information of the first terminal device and the page attribute information of the page to be debugged. Specifically, this can be achieved as follows: Firstly, in response to a screen input event acting on the first display interface of the first terminal device, the page to be debugged is determined, and the page attribute information of the page to be debugged is obtained; wherein, the page attribute information includes the page browser and / or the browser version of the page browser corresponding to the page to be debugged; secondly, the first device attribute information of the first terminal device is obtained; wherein, the first device attribute information includes at least one of the first device operating system, the first system version of the first device operating system, and the first device model of the first terminal device; then, based on the page attribute information and the first device attribute information, a first interface acquisition request for the first debugging interface required for debugging the page to be debugged is generated.

[0048] In other words, in practical applications, the information included in the first interface request may include, but is not limited to, the operating system, system version, device model, browser, and browser version of the first terminal device. At the same time, the reason for collecting this information is to debug and optimize the pages of different versions of browsers on the first terminal devices with different operating systems and / or different operating versions to avoid problems such as pages not displaying correctly.

[0049] It should be noted that the page to be debugged described above may include the main page or subpages; the main page may be the main display interface of the application, and the subpages may include the secondary display interfaces of the application, etc.; the application loaded here may include a browser or other applications that need to display pages, etc., and this example does not impose any special restrictions on this.

[0050] Secondly, after receiving the first interface retrieval request, it can be sent to the server. Specifically, sending the first interface retrieval request to the server can be achieved as follows: First, check whether the preset loading events included in the page to be debugged have been triggered; wherein, the preset loading events include document object content loading events or window loading events; second, when the preset loading event is detected to be triggered, send the first interface retrieval request to the server. That is, since collecting debugging information requires requesting interfaces and loading iFrame page resources, in order to reduce resource request contention, the first interface retrieval request can be sent to the server only after the preset loading event is triggered (that is, after the entire page to be debugged and all dependent resources such as style sheets and images have been loaded); in this way, debugging of the page can be achieved without affecting the normal access of the page.

[0051] It should be noted that the preset loading events described above may include the DOMContentLoaded event (document object content loading event) or the Load event (window loading event). The difference between the DOMContentLoaded event and the Load event is that DOMContentLoaded is triggered when the HTML document is parsed, while the Load event is triggered only after all resources have been loaded. In other words, the triggering times of these two events may differ in some cases, depending on the page type. This example does not impose any special restrictions on this.

[0052] In one possible example embodiment, when detecting whether a preset loading event has been triggered, the detection can be performed at certain intervals. The interval can be determined based on the page type of the page being debugged; for example, a longer interval can be used for complex pages, and a shorter interval for simple pages. In practical applications, the interval can be set according to actual needs; this example does not impose any special restrictions.

[0053] In step S120, the server receives the first debugging interface that responds to the first interface acquisition request, and determines the debugging information to be collected from the page to be debugged based on the first interface parameters included in the first debugging interface.

[0054] In this example embodiment, firstly, the server receives a first debugging interface in response to a first interface acquisition request. Upon receiving the first interface acquisition request, the server can match information corresponding to the page to be debugged based on the first device operating system, the first system version of the first device operating system, the first device model of the first terminal device, the page browser, and the browser version included in the first interface acquisition request. Based on the matching result, it determines whether debugging of the page to be debugged is necessary. If debugging is required, a first debugging interface is generated and fed back based on the information to be debugged. If debugging is not required, the information to be debugged can be set to an empty set, and a first debugging interface can be generated and fed back. The criteria for whether debugging is required are: one, if the same matching information has already been collected once for the same user, then no further collection is needed; two, if the same matching information has been collected more than three times for different users, then no further collection is needed. The specific process for determining the same user can be based on the serial number of the first terminal device or the user name and user identifier; this example does not impose any special restrictions on this.

[0055] Secondly, based on the first interface parameters included in the first debugging interface, the debugging information to be collected from the page to be debugged is determined. Specifically, this can be achieved as follows: First, obtain the first interface parameters included in the first debugging interface and determine whether the first interface parameters are an empty set; second, if the first interface parameters are determined to be non-empty, parse the first interface parameters to determine the debugging information to be collected from the page to be debugged; wherein, the debugging information includes debugging of the execution result of the code segment to be executed and / or debugging of the page rendering result of the page to be rendered. The code segment to be executed, as described here, may include one or more, and the page to be rendered may also include one or more. In actual application, it can be determined according to the specific situation of the page; this example does not impose any special restrictions on this.

[0056] In a feasible example embodiment, to improve the efficiency of collecting debugging script results, the collection time for debugging scripts can be set within a certain time period. Only if the results fall within this time period will further collection be determined, and script collection will not be performed outside this time period. At the same time, the time period recorded here can be predicted based on historical data. The specific prediction process can be implemented through a network model or predicted by experts. This example does not impose any special restrictions on this.

[0057] In step S130, an inline frame is loaded in the page to be debugged, and the script Uniform Resource Locator corresponding to the information to be debugged is loaded in the inline frame.

[0058] In this example embodiment, firstly, an inline frame is loaded into the page to be debugged. Here, the inline frame refers to an iFrame page, which can be used as an inline frame element in HTML (HyperText Markup Language), effectively embedding another HTML page into the current page. Each iFrame browsing context has its own session history and active document. The browsing context containing the embedded content is called the parent browsing context, and the top-level browsing context (without a parent) is usually the browser window. Simultaneously, the iFrame provides a sandbox environment, isolating the page collecting debugging information from the main page. Scripts executed in the iFrame, even those that encounter errors, do not affect the main page, thus ensuring the overall controllability and stability of the page. In other words, by setting up an inline frame, the purpose is to achieve the debugging process of the page to be debugged without affecting its normal access. For a specific display scenario diagram of the inline frame, please refer to... Figure 3 As shown; where, Figure 3 In the example scene diagram shown, 301 can be a page to be debugged, and 302 can be an inline frame.

[0059] Secondly, the script URR (Uniform Resource Locator) corresponding to the information to be debugged is loaded into the inline frame. Specifically, displaying the script URR in the inline frame can be achieved in two ways: The first method is to obtain the frame URR of the inline frame and the script URR of the information to be debugged; concatenate the frame URR and the script URR to obtain a concatenated locator result, and load the concatenated locator result into the inline frame; parse the concatenated locator result in the inline frame to obtain the script URR of the information to be debugged. The second method is to establish a communication link between the inline frame and the page to be debugged; send the script URR corresponding to the information to be debugged to the inline frame based on the communication link, and load the script URR in the inline frame.

[0060] The following section will further explain and illustrate the specific implementation process of loading script URIs into inline frames. Specifically, there may be one or more script URIs described here; therefore, loading script URIs into iFrame pages includes, but is not limited to, the following two methods.

[0061] Method 1: Append the script's Uniform Resource Locator (URL) to the iFrame page's URL. For example, if the iFrame page's URL is http: / / www.a.com / index.html, and the script URLs are http: / / www.b.com / c.js and http: / / www.b.com / d.js, then the complete link appended to the iFrame (URL concatenation result) would be: http: / / www.a.com / index.html?script_url=http%3A%2F%2Fwww.b.com%2Fc.js,http%3A%2F%2Fwww.b.com%2Fd.js. Furthermore, after the iFrame page loads, the URL concatenation result can be parsed within the iFrame page, and the iFrame page's frame URL can be removed from the URL concatenation result. This allows you to obtain the URLs of the scripts that need to be loaded: http: / / www.b.com / c.js and http: / / www.b.com / d.js.

[0062] Method 2: The current page (i.e., the page to be debugged) and the iFrame page establish communication (i.e., establish a communication link). After the iFrame page finishes loading, the current page (i.e., the page to be debugged) sends the URL of the debug script to be loaded to the iFrame page. After obtaining the debug script URL, the iFrame page can further load the script.

[0063] In step S140, the script file corresponding to the script's Uniform Resource Locator is run in the inline frame to obtain the page debugging result of the page to be debugged.

[0064] Specifically, the script URM locators described here may include a first script URM corresponding to the code snippet to be executed, and a second script URM corresponding to the page to be rendered, etc. Of course, other script URM locators may also be included; this example does not impose any special restrictions on this. Based on this, running the script file corresponding to the script URM locator in an inline frame to obtain the page debugging result of the page to be debugged can be achieved in the following two ways:

[0065] Method 1: Running the script file corresponding to the script's Uniform Resource Locator (URL) within the inline frame to obtain the page debugging result of the page to be debugged may include: First, obtaining a first script file corresponding to the first URL and a second script file corresponding to a preset exception handling tool; second, adding the second script file to the first script file to obtain a script file to be run, and running the script file to be run within the inline frame to obtain the script execution result of the script file to be run; then, based on the script execution result, obtaining the first page debugging result corresponding to the code segment to be executed in the page to be debugged. Simultaneously, during the execution of the script file to be run, detecting whether the script file to be run encounters a runtime exception, and when a runtime exception is detected, capturing the exception-running code file using the preset exception handling tool; and generating the first page debugging result corresponding to the code segment to be executed in the page to be debugged based on the script execution result and the exception-running code file. In other words, when debugging involves the execution of a code snippet, exceptions can be caught by adding try-catch blocks (pre-defined exception handling tools) to the code snippet. When an exception occurs during code execution, the exception handling tool can capture the code snippet that is running abnormally, thereby generating the corresponding first-page debugging results. A specific scenario diagram of the captured abnormal code snippet can be found in the [reference needed]. Figure 4 As shown; of course, if there is no code snippet that causes an error, the first page of debug results can be generated directly.

[0066] Method 2: Running the script file corresponding to the script's Uniform Resource Locator (URL) within the inline frame to obtain the page debugging result of the page to be debugged. This may further include: first, obtaining a third script file corresponding to the second URL, and running the third script file within the inline frame to obtain the page rendering result; second, capturing a screenshot of the current page rendering result, and obtaining the second page debugging result corresponding to the page to be rendered in the page to be debugged based on the current page screenshot. That is, when debugging whether the rendered page meets expectations, to debug whether the rendered content behaves normally, the content can be rendered onto the page using a script, and a screenshot of the current page can be captured by parsing the DOM (Document Object Model) and compositing the DOM; the specific details of the captured current page screenshot can be found in [reference needed]. Figure 5 as well as Figure 6 As shown.

[0067] At this point, the entire debugging process for the page to be debugged has been completed. Furthermore, after obtaining the debugging results of the first and second pages, the debugging method for this webpage can further include: sending the debugging results of the first page corresponding to the code segment to be executed and / or the debugging results of the second page corresponding to the page to be rendered in the page to be debugged to the server. This allows the server to send the debugging results of the first and second pages to the second device via a second interface, and the second device to determine whether the page to be debugged needs optimization based on the debugging results of the first and second pages. In practical applications, after the first client sends the debugging results to the server's second interface, the server records the debugging results corresponding to the debugging script. Subsequently, the second client displays this information, and the second client views the debugging results of the debugging script in the background. By analyzing the debugging results collected by the debugging script, it is possible to further determine compatibility issues existing in the current code segment or whether the current rendering result meets expectations, so as to further optimize or adjust the solution.

[0068] In one example embodiment, determining whether the page to be debugged needs optimization based on the debugging results of the first page can be achieved as follows: The debugging results of the first page are parsed to obtain the code files with runtime errors included in the debugging results; if the code files with runtime errors are empty, it is determined that the page to be debugged does not need optimization of the code segments to be executed; if the code files with runtime errors are not empty, the compatibility of the page to be debugged is optimized based on the code files with runtime errors. This method can improve page optimization efficiency; that is, it allows direct debugging of the code files with runtime errors without needing to find the cause of the runtime error to achieve the corresponding optimization process, thereby improving page optimization efficiency.

[0069] In one example embodiment, determining whether the page to be debugged needs optimization based on the second page debugging result can be achieved as follows: First, the second page debugging result is parsed to obtain a screenshot of the current page included in the second page debugging result; second, based on the first device attribute information of the first terminal device, a standard page rendering result corresponding to the page to be rendered is obtained; then, the current page screenshot and the standard page rendering result are compared to determine whether the display result of the page to be debugged meets the expected display result; finally, if the display result of the page to be debugged meets the expected display result, no optimization of the page to be debugged is required; if the display result of the page to be debugged does not meet the expected display result, optimization of the page to be debugged is required.

[0070] In a feasible example embodiment, comparing the current page screenshot with the standard page rendering result to determine whether the display result of the page to be debugged meets the expected display result can be achieved as follows: First, calculate the first mean square error between the current page screenshot and the expected screen image, and determine the first image matching relationship between the current page screenshot and the expected screen image based on the first mean square error; then, calculate the first difference map between the current page screenshot and the expected screen image, and determine the second image matching relationship between the current page screenshot and the expected screen image based on the first difference map; finally, determine whether the display result of the page to be debugged meets the expected display result based on the first image matching relationship and the second image matching relationship.

[0071] In a feasible example embodiment, calculating the first mean square error between the current page screenshot and the expected screen image, and determining the first image matching relationship between the current page screenshot and the expected screen image based on the first mean square error, can be achieved as follows: First, obtain the first pixel value of the first pixel point included in the current page screenshot, and the second pixel value of the second pixel point in the expected screen image; second, calculate the pixel difference between the first pixel value and the second pixel value of the second pixel point corresponding to the first pixel point, and calculate the first mean square error based on the pixel difference; then, calculate the first difference relationship between the first mean square error and the first preset threshold, and obtain the first image matching relationship between the current page screenshot and the expected screen image based on the first difference relationship.

[0072] In one example embodiment, the Mean Square Error (MSE) can be represented by the mean square error. The mean square error can be used to characterize the average of the squared distances of each data point from the true value, that is, the average of the sum of squared errors. The specific formula for calculating the first mean square error is shown in formula (1) below:

[0073]

[0074] Where n is the number of pixels included in the current page screenshot and / or the expected screen image, and X csi,i X is the value of the first pixel of the i-th first pixel in the current screen image. dsi,iLet be the second pixel value of the i-th second pixel in the desired screen image. Further, after obtaining the first mean square error, the first image matching relationship can be determined based on the first mean square error. Specifically, in practical applications, when the first mean square error is less than a pre-set first preset threshold (in this example embodiment, the threshold can be set to an empirical value of 10), it is considered that the two page images (the current page screenshot and the desired screen image) may have a first image matching relationship. That is, if the absolute value of the first difference between the first mean square error and the first preset threshold is less than or equal to 0.05 or 0.1, then the existence of the first image matching relationship can be determined.

[0075] In a feasible example embodiment, calculating a first difference map between the current page screenshot and the expected screen image, and determining a second image matching relationship between the current page screenshot and the expected screen image based on the first difference map, can be achieved as follows: First, when it is determined that the first image matching relationship exists, a first difference map between the current page screenshot and the expected screen image is generated based on the pixel difference; second, the first difference map is segmented based on a preset image segmentation algorithm to obtain a foreground image and a background image included in the first difference map, and the number of non-zero pixels included in the foreground image is calculated; then, based on the number of non-zero pixels, the second image matching relationship between the current page screenshot and the expected screen image is obtained.

[0076] In one example embodiment, when it is determined that a first image matching relationship exists between the current page screenshot and the expected screen image, the two images can be considered as potentially matching images. Therefore, to further improve the accuracy of the test results, a first difference map between the current page screenshot and the expected screen image can be calculated when the existence of the first image matching relationship is determined. In the process of calculating the first difference map, the first pixel value of the first pixel point included in the current page screenshot can be subtracted from the second pixel value of the second pixel point included in the expected screen image. Then, based on the difference between the first pixel value and the second pixel value, the first difference map between the current page screenshot and the expected screen image is obtained. After obtaining the first difference map, grayscale conversion can be performed on the first difference map, and then a preset image segmentation algorithm can be used. The first difference image after grayscale processing is segmented to obtain the foreground image and background image included in the first difference image; wherein, the preset image segmentation algorithm described here can be the Otsu's algorithm (maximum inter-class variance method), or other algorithms, such as Gaussian filtering algorithm, etc., and this example does not impose any special restrictions on it; further, after obtaining the foreground image, the number of non-zero pixels included in the foreground image can be counted, and finally, based on the number of non-zero pixels, the second image matching relationship between the current page screenshot and the expected screen image is obtained; wherein, if the number of non-zero pixels is less than a preset threshold (in this example embodiment, the preset threshold is set to an empirical value of 500), it is considered that the two page images do have a matching relationship (the second image matching relationship exists).

[0077] In one possible example embodiment, the first image matching relationship and the second image matching relationship can also be calculated separately. That is, regardless of whether the first image matching relationship exists, the second image matching relationship is calculated, and finally, the corresponding test is performed based on the first image matching relationship and the second image matching relationship.

[0078] In one example embodiment, based on the first image matching relationship and the second image matching relationship, it is determined whether the display result of the page to be debugged meets the expected display result. Specifically, this can be achieved as follows: On one hand, if both the first and second image matching relationships exist, it is determined that the display result of the page to be debugged meets the expected display result; on the other hand, if either the first or second image matching relationship does not exist, it is determined that the display result of the page to be debugged does not meet the expected display result. That is, if both the first and second image matching relationships exist, it can be considered that the display effect of the current screen image displayed on the display interface of the display terminal is consistent with the desired display effect of the current screen image, and the display function of the display interface of the display terminal is considered to be without problems, requiring no debugging; if either image matching relationship does not exist, it can be considered that the display function of the display interface has a problem, and debugging is required.

[0079] Thus, the webpage debugging method described in the exemplary embodiments of this disclosure has been fully implemented. Based on the foregoing description, it can be understood that the webpage debugging method described in the exemplary embodiments of this disclosure has at least the following advantages: by collecting the debugging result information corresponding to the debugging script and analyzing the debugging result information, further compatibility or solution adjustments can be made to the code, avoiding the inability of the page to run normally due to compatibility issues with certain mobile phones after the page goes live. This allows for earlier and faster detection of problems, providing a better and more stable page browsing experience for more users.

[0080] This disclosure also provides an example embodiment of a web page debugging device. Specifically, refer to... Figure 7 As shown, the debugging device for this webpage may include a first interface acquisition request generation module 710, a debugging information determination module 720, a Uniform Resource Locator loading module 730, and a script file execution module 740. Wherein:

[0081] The first interface acquisition request generation module 710 can be used to generate a first interface acquisition request based on the first device attribute information of the first terminal device and the page attribute information of the page to be debugged, and send the first interface acquisition request to the server.

[0082] The debugging information determination module 720 can be used to receive the first debugging interface fed back by the server in response to the first interface acquisition request, and determine the debugging information to be collected from the page to be debugged according to the first interface parameters included in the first debugging interface.

[0083] The Uniform Resource Locator (URL) loading module 730 can be used to load an inline frame in the page to be debugged, and load the script URL corresponding to the information to be debugged in the inline frame.

[0084] The script file execution module 740 can be used to run the script file corresponding to the script Uniform Resource Locator in the inline frame to obtain the page debugging result of the page to be debugged.

[0085] In one exemplary embodiment of this disclosure, generating a first interface acquisition request based on the first device attribute information of the first terminal device and the page attribute information of the page to be debugged includes: responding to a screen input event acting on a first display interface of the first terminal device, determining the page to be debugged, and acquiring the page attribute information of the page to be debugged; wherein the page attribute information includes a page browser and / or a browser version of the page browser corresponding to the page to be debugged; acquiring the first device attribute information of the first terminal device; wherein the first device attribute information includes at least one of a first device operating system of the first terminal device, a first system version of the first device operating system, and a first device model of the first terminal device; and generating a first interface acquisition request for a first debugging interface required for debugging the page to be debugged based on the page attribute information and the first device attribute information.

[0086] In one exemplary embodiment of this disclosure, sending the first interface acquisition request to the server includes: detecting whether a preset loading event included in the page to be debugged is triggered; wherein the preset loading event includes a document object content loading event or a window loading event; when the preset loading event is detected to be triggered, the first interface acquisition request is sent to the server.

[0087] In one exemplary embodiment of this disclosure, determining the debugging information to be collected from the page to be debugged based on the first interface parameters included in the first debugging interface includes: obtaining the first interface parameters included in the first debugging interface and determining whether the first interface parameters are an empty set; when it is determined that the first interface parameters are not empty, parsing the first interface parameters to determine the debugging information to be collected from the page to be debugged; wherein, the debugging information includes debugging of the execution result of the code segment to be executed and / or debugging of the page rendering result of the page to be rendered.

[0088] In one exemplary embodiment of this disclosure, loading the script Uniform Resource Locator (URL) corresponding to the information to be debugged into the inline frame includes: obtaining the frame URL of the inline frame and the script URL of the information to be debugged; concatenating the frame URL and the script URL to obtain a URL concatenation result, and loading the URL concatenation result into the inline frame; and parsing the URL concatenation result in the inline frame to obtain the script URL of the information to be debugged.

[0089] In one exemplary embodiment of this disclosure, loading the script Uniform Resource Locator corresponding to the information to be debugged in the inline frame further includes: establishing a communication link between the inline frame and the page to be debugged; sending the script Uniform Resource Locator corresponding to the information to be debugged to the inline frame based on the communication link, and loading the script Uniform Resource Locator in the inline frame.

[0090] In one exemplary embodiment of this disclosure, the script Uniform Resource Locator (URL) includes a first URL corresponding to the code segment to be executed; wherein, running the script file corresponding to the URL in the inline frame to obtain the page debugging result of the page to be debugged includes: obtaining the first script file corresponding to the first URL and a second script file corresponding to a preset exception handling tool; adding the second script file to the first script file to obtain a script file to be run, and running the script file to be run in the inline frame to obtain the script execution result of the script file to be run; and obtaining the first page debugging result corresponding to the code segment to be executed in the page to be debugged based on the script execution result.

[0091] In one exemplary embodiment of this disclosure, the debugging device for the webpage further includes:

[0092] The code file capture module can be used to detect whether the script file to be run has a running error during the running process, and when the script file to be run has a running error, the code file with the running error is captured by the preset error capture tool.

[0093] The first page debugging result generation module can be used to generate the first page debugging result corresponding to the code segment to be executed in the page to be debugged, based on the script execution result and the code file with the execution error.

[0094] In one exemplary embodiment of this disclosure, the script Uniform Resource Locator further includes a second script Uniform Resource Locator corresponding to the page to be rendered; wherein, running the script file corresponding to the script Uniform Resource Locator in the inline frame to obtain the page debugging result of the page to be debugged further includes: obtaining a third script file corresponding to the second script Uniform Resource Locator, running the third script file in the inline frame to obtain the page rendering result; capturing a screenshot of the current page of the page rendering result, and obtaining the second page debugging result corresponding to the page to be rendered in the page to be debugged based on the current page screenshot.

[0095] In one exemplary embodiment of this disclosure, the debugging device for the webpage further includes:

[0096] The page optimization module can be used to send the first page debugging result corresponding to the code segment to be executed in the page to be debugged and / or the second page debugging result corresponding to the page to be rendered in the page to be debugged to the server, so that the server sends the first page debugging result and the second page debugging result to the second device through the second interface, and the second device determines whether the page to be debugged needs to be optimized based on the first page debugging result and the second page debugging result.

[0097] In one exemplary embodiment of this disclosure, determining whether the page to be debugged needs optimization based on the debugging result of the first page includes: parsing the debugging result of the first page to obtain the code file with runtime exceptions included in the debugging result of the first page; if the code file with runtime exceptions is an empty set, then it is determined that the page to be debugged does not need to optimize the code segment to be executed; if the code file with runtime exceptions is not empty, then the compatibility of the page to be debugged is optimized based on the code file with runtime exceptions.

[0098] In one exemplary embodiment of this disclosure, determining whether the page to be debugged needs optimization based on the second page debugging result includes: parsing the second page debugging result to obtain a screenshot of the current page included in the second page debugging result; obtaining a standard page rendering result corresponding to the page to be rendered based on the first device attribute information of the first terminal device; comparing the current page screenshot and the standard page rendering result to determine whether the display result of the page to be debugged meets the expected display result based on the comparison result; if the display result of the page to be debugged meets the expected display result, then no optimization of the page to be debugged is required; if the display result of the page to be debugged does not meet the expected display result, then optimization of the page to be debugged is required.

[0099] The specific details of each module in the debugging device of the aforementioned web page have been described in detail in the debugging method of the corresponding web page, so they will not be repeated here.

[0100] It should be noted that although several modules or units for the device used to perform actions have been mentioned in the detailed description above, this division is not mandatory. In fact, according to embodiments of this disclosure, the features and functions of two or more modules or units described above can be embodied in one module or unit. Conversely, the features and functions of one module or unit described above can be further divided and embodied by multiple modules or units.

[0101] Furthermore, although the steps of the method in this disclosure are described in a specific order in the accompanying drawings, this does not require or imply that the steps must be performed in that specific order, or that all the steps shown must be performed to achieve the desired result. Additional or alternative steps may be omitted, multiple steps may be combined into one step, and / or a step may be broken down into multiple steps.

[0102] In an exemplary embodiment of this disclosure, an electronic device capable of implementing the above-described method is also provided.

[0103] Those skilled in the art will understand that various aspects of this disclosure can be implemented as a system, method, or program product. Therefore, various aspects of this disclosure can be specifically implemented in the following forms: a completely hardware implementation, a completely software implementation (including firmware, microcode, etc.), or a combination of hardware and software aspects, collectively referred to herein as a "circuit," "module," or "system."

[0104] The following reference Figure 8 To describe an electronic device 800 according to such an embodiment of the present disclosure. Figure 8 The electronic device 800 shown is merely an example and should not impose any limitation on the functionality and scope of use of the embodiments disclosed herein.

[0105] like Figure 8 As shown, the electronic device 800 is manifested in the form of a general-purpose computing device. The components of the electronic device 800 may include, but are not limited to: at least one processing unit 810, at least one storage unit 820, a bus 830 connecting different system components (including storage unit 820 and processing unit 810), and a display unit 840.

[0106] The storage unit stores program code that can be executed by the processing unit 810, causing the processing unit 810 to perform the steps described in the "Exemplary Methods" section of this specification according to various exemplary embodiments of this disclosure. For example, the processing unit 810 can perform actions such as... Figure 1 Step S110: Generate a first interface acquisition request based on the first device attribute information of the first terminal device and the page attribute information of the page to be debugged, and send the first interface acquisition request to the server; Step S120: Receive the first debugging interface fed back by the server in response to the first interface acquisition request, and determine the debugging information to be collected from the page to be debugged based on the first interface parameters included in the first debugging interface; Step S130: Load an inline frame in the page to be debugged, and load the script Uniform Resource Locator corresponding to the debugging information in the inline frame; Step S140: Run the script file corresponding to the script Uniform Resource Locator in the inline frame to obtain the page debugging result of the page to be debugged.

[0107] Storage unit 820 may include a readable medium in the form of a volatile storage unit, such as random access memory (RAM) 8201 and / or cache memory 8202, and may further include a read-only memory (ROM) 8203.

[0108] The storage unit 820 may also include a program / utility 8204 having a set (at least one) of program modules 8205, including but not limited to: an operating system, one or more application programs, other program modules, and program data, each or some combination of these examples may include an implementation of a network environment.

[0109] Bus 830 can represent one or more of several types of bus structures, including a memory cell bus or memory cell controller, a peripheral bus, a graphics acceleration port, a processing unit, or a local bus using any of the various bus structures.

[0110] Electronic device 800 can also communicate with one or more external devices 900 (e.g., keyboard, pointing device, Bluetooth device, etc.), and with one or more devices that enable a user to interact with electronic device 800, and / or with any device that enables electronic device 800 to communicate with one or more other computing devices (e.g., router, modem, etc.). This communication can be performed via input / output (I / O) interface 850. Furthermore, electronic device 800 can also communicate with one or more networks (e.g., local area network (LAN), wide area network (WAN), and / or public networks, such as the Internet) via network adapter 860. As shown, network adapter 860 communicates with other modules of electronic device 800 via bus 830. It should be understood that, although not shown in the figures, other hardware and / or software modules can be used in conjunction with electronic device 800, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, and data backup storage systems.

[0111] From the above description of the embodiments, those skilled in the art will readily understand that the exemplary embodiments described herein can be implemented by software or by combining software with necessary hardware. Therefore, the technical solutions according to the embodiments of this disclosure can be embodied in the form of a software product, which can be stored in a non-volatile storage medium (such as a CD-ROM, USB flash drive, external hard drive, etc.) or on a network, including several instructions to cause a computing device (such as a personal computer, server, terminal device, or network device, etc.) to execute the methods according to the embodiments of this disclosure.

[0112] In exemplary embodiments of this disclosure, a computer-readable storage medium is also provided, on which a program product capable of implementing the methods described above is stored. In some possible implementations, various aspects of this disclosure may also be implemented as a program product including program code that, when the program product is run on a terminal device, causes the terminal device to perform the steps of the various exemplary embodiments of this disclosure described in the "Exemplary Methods" section above.

[0113] The program product for implementing the above-described method according to embodiments of the present disclosure may employ a portable compact disc read-only memory (CD-ROM) and include program code, and may run on a terminal device, such as a personal computer. However, the program product of the present disclosure is not limited thereto. In this document, the readable storage medium may be any tangible medium containing or storing a program that may be used by or in conjunction with an instruction execution system, apparatus, or device.

[0114] The program product may employ any combination of one or more readable media. A readable medium may be a readable signal medium or a readable storage medium. A readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples of readable storage media (a non-exhaustive list) include: an electrical connection having one or more wires, a portable disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination thereof.

[0115] Computer-readable signal media may include data signals propagated in baseband or as part of a carrier wave, carrying readable program code. Such propagated data signals may take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. A readable signal medium may also be any readable medium other than a readable storage medium, capable of sending, propagating, or transmitting programs for use by or in conjunction with an instruction execution system, apparatus, or device.

[0116] The program code contained on the readable medium may be transmitted using any suitable medium, including but not limited to wireless, wired, optical fiber, RF, etc., or any suitable combination thereof.

[0117] Program code for performing the operations of this disclosure can be written in any combination of one or more programming languages, including object-oriented programming languages ​​such as Java and C++, and conventional procedural programming languages ​​such as C or similar languages. The program code can execute entirely on the user's computing device, partially on the user's computing device, as a standalone software package, partially on the user's computing device and partially on a remote computing device, or entirely on a remote computing device or server. In cases involving remote computing devices, the remote computing device can be connected to the user's computing device via any type of network, including a local area network (LAN) or a wide area network (WAN), or it can be connected to an external computing device (e.g., via the Internet using an Internet service provider).

[0118] Furthermore, the above figures are merely illustrative of the processes included in the method according to exemplary embodiments of this disclosure and are not intended to be limiting. It is readily understood that the processes shown in the above figures do not indicate or limit the temporal order of these processes. Additionally, it is readily understood that these processes may be executed synchronously or asynchronously, for example, in multiple modules.

[0119] Other embodiments of this disclosure will readily occur to those skilled in the art upon consideration of the specification and practice of the invention described herein. This application is intended to cover any variations, uses, or adaptations of this disclosure that follow the general principles of this disclosure and include common knowledge or customary techniques in the art not invented by this disclosure. The specification and embodiments are to be considered exemplary only, and the true scope and spirit of this disclosure are indicated by the claims.

Claims

1. A method for debugging a webpage, characterized in that, include: Based on the first device attribute information of the first terminal device and the page attribute information of the page to be debugged, a first interface acquisition request is generated and sent to the server. The first interface acquisition request includes at least one of the following: the operating system, system version, device model, browser, and browser version of the first terminal device; The server receives the first debugging interface that responds to the first interface acquisition request, and determines the debugging information to be collected from the page to be debugged based on the first interface parameters included in the first debugging interface. The information to be debugged includes debugging the execution results of the code segment to be executed and / or debugging the page rendering results of the page to be rendered; An inline frame is loaded into the page to be debugged, and a script Uniform Resource Locator corresponding to the information to be debugged is loaded into the inline frame; the inline frame includes an iFrame page, which is used to embed another HTML page into the current page; Run the script file corresponding to the script's Uniform Resource Locator in the inline framework to obtain the page debugging result of the page to be debugged; The script Uniform Resource Locator (URL) corresponding to the information to be debugged is loaded in the following way: the frame URL of the inline frame and the script URL of the information to be debugged are obtained; the frame URL and the script URL are concatenated to obtain the URL concatenation result, and the URL concatenation result is loaded in the inline frame; the URL concatenation result is parsed in the inline frame to obtain the script URL of the information to be debugged.

2. The method for debugging web pages according to claim 1, characterized in that, Based on the first device attribute information of the first terminal device and the page attribute information of the page to be debugged, a first interface acquisition request is generated, including: In response to a screen input event acting on the first display interface of the first terminal device, a page to be debugged is determined, and page attribute information of the page to be debugged is obtained; wherein, the page attribute information includes the page browser corresponding to the page to be debugged and / or the browser version of the page browser; Obtain first device attribute information of the first terminal device; wherein, the first device attribute information includes at least one of the first device operating system of the first terminal device, the first system version of the first device operating system, and the first device model of the first terminal device; Based on the page attribute information and the first device attribute information, a first interface acquisition request for the first debugging interface required for debugging the page to be debugged is generated.

3. The method for debugging web pages according to claim 1, characterized in that, Sending the first interface acquisition request to the server includes: Detect whether the preset loading events included in the page to be debugged are triggered; wherein, the preset loading events include document object content loading events or form loading events; When the preset loading event is detected to be triggered, the first interface acquisition request is sent to the server.

4. The method for debugging web pages according to claim 1, characterized in that, Based on the first interface parameters included in the first debugging interface, determine the debugging information to be collected from the page to be debugged, including: Obtain the first interface parameters included in the first debugging interface, and determine whether the first interface parameters are an empty set; When the first interface parameter is determined to be non-empty, the first interface parameter is parsed to determine the debugging information to be collected from the page to be debugged; wherein, the debugging information includes debugging of the execution result of the code segment to be executed and / or debugging of the page rendering result of the page to be rendered.

5. The method for debugging web pages according to claim 1, characterized in that, Loading the script Uniform Resource Locator corresponding to the information to be debugged in the inline framework further includes: Establish a communication link between the inline frame and the page to be debugged; Based on the communication link, the script Uniform Resource Locator corresponding to the information to be debugged is sent to the inline frame, and the script Uniform Resource Locator is loaded in the inline frame.

6. The method for debugging web pages according to claim 1, characterized in that, The script Uniform Resource Locator includes a first script Uniform Resource Locator corresponding to the code segment to be executed; Specifically, running the script file corresponding to the script's Uniform Resource Locator within the inline framework to obtain the page debugging results for the page to be debugged includes: Obtain the first script file corresponding to the first script's Uniform Resource Locator and the second script file corresponding to the preset exception handling tool; Add the second script file to the first script file to obtain the script file to be run, and run the script file to be run in the inline frame to obtain the script execution result of the script file to be run. Based on the script execution result, the first page debugging result corresponding to the code segment to be executed in the page to be debugged is obtained.

7. The method for debugging web pages according to claim 6, characterized in that, The debugging method for the webpage also includes: During the execution of the script file to be run, it is detected whether the script file to be run has a running error, and when the script file to be run has a running error is detected, the code file of the running error is captured by the preset error capture tool; Based on the script execution result and the code file with the execution error, generate the first page debugging result corresponding to the code segment to be executed in the page to be debugged.

8. The method for debugging web pages according to claim 1, characterized in that, The script Uniform Resource Locator also includes a second script Uniform Resource Locator corresponding to the page to be rendered; The process of running the script file corresponding to the script's Uniform Resource Locator within the inline framework to obtain the page debugging result of the page to be debugged also includes: Obtain the third script file corresponding to the second script's Uniform Resource Locator, and run the third script file in the inline frame to obtain the page rendering result; Capture a screenshot of the current page rendering result, and obtain the second page debugging result corresponding to the page to be rendered in the page to be debugged based on the current page screenshot.

9. The method for debugging web pages according to claim 1, characterized in that, The debugging method for the webpage also includes: The debugging results of the first page corresponding to the code segment to be executed in the page to be debugged and / or the debugging results of the second page corresponding to the page to be rendered in the page to be debugged are sent to the server, so that the server sends the first page debugging results and the second page debugging results to the second device through the second interface, and the second device determines whether the page to be debugged needs to be optimized based on the first page debugging results and the second page debugging results.

10. The method for debugging web pages according to claim 9, characterized in that, Determining whether the page to be debugged needs optimization based on the debugging results of the first page includes: The debugging results of the first page are parsed to obtain the code file containing the runtime exception included in the debugging results of the first page; If the code file that caused the runtime error is an empty set, then it is determined that the page to be debugged does not need to be optimized for the code segment to be executed; If the code file that caused the runtime error is not empty, then the compatibility of the page to be debugged will be optimized based on the code file that caused the runtime error.

11. The method for debugging web pages according to claim 9, characterized in that, Based on the debugging results of the second page, determine whether the page to be debugged needs optimization, including: The debugging results of the second page are parsed to obtain the screenshot of the current page included in the debugging results of the second page; Based on the first device attribute information of the first terminal device, obtain the standard page rendering result corresponding to the page to be rendered; The current page screenshot is compared with the standard page rendering result to determine whether the display result of the page to be debugged meets the expected display result based on the comparison result; If the display result of the page to be debugged meets the expected display result, then there is no need to optimize the page to be debugged; if the display result of the page to be debugged does not meet the expected display result, then the page to be debugged needs to be optimized.

12. A webpage debugging device, characterized in that, include: The first interface acquisition request generation module is used to generate a first interface acquisition request based on the first device attribute information of the first terminal device and the page attribute information of the page to be debugged, and send the first interface acquisition request to the server. The first interface acquisition request includes at least one of the following: the operating system, system version, device model, browser, and browser version of the first terminal device; The debugging information determination module is used to receive the first debugging interface fed back by the server in response to the first interface acquisition request, and determine the debugging information to be collected from the page to be debugged according to the first interface parameters included in the first debugging interface. The information to be debugged includes debugging the execution results of the code segment to be executed and / or debugging the page rendering results of the page to be rendered; A Uniform Resource Locator (URL) loading module is used to load an inline frame in the page to be debugged, and load a script URL corresponding to the information to be debugged in the inline frame; the inline frame includes an iFrame page, which is used to embed another HTML page into the current page; The script file execution module is used to run the script file corresponding to the script Uniform Resource Locator in the inline frame to obtain the page debugging result of the page to be debugged; The script Uniform Resource Locator (URL) corresponding to the information to be debugged is loaded in the following way: the frame URL of the inline frame and the script URL of the information to be debugged are obtained; the frame URL and the script URL are concatenated to obtain the URL concatenation result, and the URL concatenation result is loaded in the inline frame; the URL concatenation result is parsed in the inline frame to obtain the script URL of the information to be debugged.

13. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by the processor, it implements the debugging method for web pages according to any one of claims 1-11.

14. An electronic device, characterized in that, include: processor; as well as Memory for storing the executable instructions of the processor; The processor is configured to execute the debugging method for a webpage according to any one of claims 1-11 by executing the executable instructions.

Images