Webpage diagnosis method, device and system
By collecting and re-rendering data before and after a webpage error, the problem of being unable to trace the operation process in existing technologies is solved, achieving more accurate error location and privacy protection.
Patent Information
- Application Number
- CN202211328718.4
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2022-10-27
- Publication Date
- 2025-12-16
- Estimated Expiration
- 2042-10-27
AI Technical Summary
Existing technologies can only obtain information at the moment of the error when a webpage is abnormal or erroneous, and cannot trace back to the operation process before the error occurred. This leads to inaccurate error location and poses a risk of leakage of sensitive user information.
Data such as page content, user actions, and network requests are collected from the period before the webpage error occurred and before the error. This data is then re-rendered in the browser to generate an image sequence to help engineers locate the error.
It enables comprehensive location of webpage errors, reduces the risk of leakage of users' sensitive information, and improves the accuracy of error location.
Smart Images

Figure CN115686904B_ABST
Abstract
Description
TECHNICAL FIELD
[0001] The present application relates to the technical field of Internet, and particularly relates to a webpage diagnosis method, device and system. BACKGROUND
[0002] At present, with the popularity of browsers, the user experience of a webpage interface, i.e. a web interface, is particularly important, but the webpage may have unpredictable abnormalities or errors during use. Therefore, how users feed back problems and how engineers diagnose problems of the webpage are real business pain points.
[0003] At present, users can feed back screenshots and error information when the current webpage has errors or abnormalities, and engineers analyze webpage abnormalities based on the screenshots and error information fed back by the users.
[0004] However, the above method only has information at the moment of errors or abnormalities, and may not accurately analyze the actual problems of the webpage.
[0005] The information disclosed in the background section of this document is only intended to increase an understanding of the general context of the present application and should not be taken as an acknowledgement or any form of suggestion that this information forms prior art that is already widely known in the art. SUMMARY
[0006] Embodiments of the present application provide a webpage diagnosis method, device and system, which can collect webpage error information and page content on the webpage within a period of time before the error occurs, user operations and other information, so that engineers can quickly locate errors in the webpage based on more comprehensive information.
[0007] In a first aspect, embodiments of the present application provide a webpage diagnosis method applied to a first device, including: obtaining a plurality of copies of a target webpage and error information when an error occurs; wherein the plurality of copies include a first copy before the error of the target webpage and a second copy when the error occurs; the plurality of copies are used to record page content information and operation information of the target webpage; the operation information indicates the operation of the user on the target webpage, and the page content information is used to generate page content; and sending the plurality of copies and the error information to a second device, so that the second device generates an image sequence based on the plurality of copies, and the image sequence is used to record respective page content of the target webpage at at least one first time and respective operation positions of the user on the target webpage at at least one second time.
[0008] In the scheme, the page content, user operation, error information and other data at different time are recorded, so that the related information of the webpage before and after the error is recorded, and then the data is rendered as a webpage, the page content, user operation, error information and other data at different time before and after the error are restored, which is beneficial to the positioning of complex errors by engineers.
[0009] In a possible implementation, the method further includes: obtaining device hardware information, wherein the device hardware information at least indicates a hardware condition of processing the target webpage in the first device; obtaining browser information, wherein the browser information includes a plug-in and / or a running environment of a browser processing the target webpage; and sending the device hardware information and the browser information to the second device, so that the second device constructs a virtual device of the first device based on the device hardware information, and generates the image sequence based on the browser information and the multiple copies on the virtual device.
[0010] In the scheme, the virtual device of the terminal device is constructed, and the browser is restored on the virtual device, so that the related information of the webpage before and after the error can be accurately restored, and the error positioning of complex problems is facilitated.
[0011] In a possible implementation, the method further includes: displaying a first interface, wherein the first interface is used to indicate uploading the multiple copies and the error information to the second device.
[0012] In the scheme, the data uploading is realized by user operation.
[0013] In a possible implementation, the multiple copies include an initial copy of the target webpage and an incremental copy of the target webpage relative to the initial copy.
[0014] In a possible implementation, the multiple copies are desensitized copies.
[0015] In the scheme, the user privacy is ensured by desensitizing the data.
[0016] In a possible implementation, the multiple copies further include network request data, and the network request data includes at least one request record, and the request record includes a network request for the target webpage and a return value of the network request, so that the second device displays the request record.
[0017] In the scheme, the network request data is recorded, so that the subsequent analysis of the network request is facilitated.
[0018] In a second aspect, the embodiments of the present application provide a webpage diagnosis method, applied to a second device, comprising: receiving a plurality of copies of a target webpage and error information when an error occurs, which are sent by a first device; wherein the plurality of copies comprise at least one copy before the target webpage has an error and a copy when the error occurs; the plurality of copies are used to record page content information and operation information of the target webpage; the operation information indicates operations of a user on the target webpage, and the page content information is used to generate page content; generating an image sequence based on the plurality of copies, the image sequence being used to record respective page content of the target webpage at at least one first time and respective operation positions of the user on the target webpage at at least one second time.
[0019] The beneficial effects of the scheme are described above and will not be repeated here.
[0020] In a possible implementation, the method further comprises: receiving device hardware information sent by the first device; wherein the device hardware information at least indicates a condition of hardware processing the target webpage in the first device; receiving browser information sent by the first device; wherein the browser information comprises plug-ins and / or running environments of a browser processing the target webpage; and the generating the image sequence based on the plurality of copies comprises:
[0021] constructing a virtual device of the first device based on the device hardware information, and generating the image sequence on the virtual device based on the browser information and the plurality of copies.
[0022] The beneficial effects of the scheme are described above and will not be repeated here.
[0023] In a possible implementation, the method further comprises: providing a first interface; wherein the first interface is used to instruct the first device to upload the plurality of copies and the error information.
[0024] In a possible implementation, the plurality of copies comprise an initial copy of the target webpage and incremental copies of the target webpage relative to the initial copy.
[0025] In a possible implementation, the plurality of copies are desensitized copies.
[0026] In a possible implementation, the plurality of copies further comprise network request data, the network request data comprising at least one request record, and the request record comprising a network request for the target webpage and a return value of the network request.
[0027] In a possible implementation, the method further includes: determining page reference information corresponding to at least one frame in the image sequence based on the multiple copies; the page reference information includes operation records, request records, and / or error information; the request records include network requests for the target webpage and return values of the network requests, and the operation records include operation positions and / or operation types; and displaying the image sequence and the page reference information corresponding to at least one frame in the image sequence.
[0028] In this solution, the image sequence and the page reference information of multiple frames in the image sequence are displayed, thereby facilitating subsequent error positioning of the webpage.
[0029] In a third aspect, based on the same concept as the method embodiments, the embodiments of the present application further provide a webpage diagnosis apparatus. The webpage diagnosis apparatus includes a plurality of modules, and each module is configured to perform each step in the webpage diagnosis method provided by the embodiments of the present application. The division of the modules is not limited herein. Those skilled in the art can clearly understand that, in actual applications, each step in the webpage diagnosis method provided by the embodiments of the present application can be completed by different modules according to needs, that is, the internal structure of the apparatus is divided into different modules to complete all or part of the functions described above. Each module in the embodiments can be integrated in one processing unit, or each unit can exist physically independently, or two or more modules can be integrated in one unit. The integrated unit can be implemented in the form of hardware or in the form of a software functional unit. In addition, the specific names of the modules are only for the purpose of mutual distinction, and are not used to limit the protection scope of the present application. The specific working process of the modules in the apparatus can refer to the corresponding process in the foregoing method embodiments, which will not be described herein.
[0030] For example, the webpage diagnosis apparatus is configured to perform the webpage diagnosis method provided in the first aspect of the embodiments of the present application. The webpage diagnosis apparatus provided by the embodiments of the present application includes:
[0031] A first obtaining module is configured to obtain multiple copies of a target webpage and error information when an error occurs. The multiple copies include at least one copy before the error of the target webpage and a copy when the error occurs. The multiple copies are used to record page content information and operation information of the target webpage. The operation information indicates an operation of a user on the target webpage, and the page content information is used to generate page content.
[0032] The uploading module is configured to send the multiple copies and the error information to a second device, so that the second device generates an image sequence based on the multiple copies, and the image sequence is used to record respective page contents of the target webpage at at least one first time and respective operation positions of the user on the target webpage at at least one second time.
[0033] In a possible implementation, the apparatus further includes:
[0034] The second obtaining module is configured to obtain device hardware information, wherein the device hardware information at least indicates a hardware condition of the first device for processing the target webpage.
[0035] The third obtaining module is configured to obtain browser information, wherein the browser information includes a plug-in and / or a running environment of a browser for processing the target webpage.
[0036] The uploading module is further configured to send the device hardware information and the browser information to the second device, so that the second device constructs a virtual device of the first device based on the device hardware information, and generates an image sequence on the virtual device based on the browser information and the multiple copies.
[0037] In a possible implementation, the apparatus further includes a display module, and wherein:
[0038] The display module is configured to display a first interface, wherein the first interface is used to indicate uploading the multiple copies and the error information to the second device.
[0039] In a possible implementation, the multiple copies include an initial copy of the target webpage and an incremental copy of the target webpage relative to the initial copy.
[0040] In a possible implementation, the multiple copies are desensitized copies.
[0041] In this solution, user privacy is ensured by desensitizing data.
[0042] By way of example, the webpage diagnosis apparatus is configured to execute the webpage diagnosis method provided in the second aspect of the present application. The webpage diagnosis apparatus provided in the present application includes:
[0043] The first interface module is configured to receive a plurality of copies of a target webpage and error information when an error occurs, which are sent by a first device; the plurality of copies include at least one copy before the target webpage has an error and a copy when the error occurs; the plurality of copies are used to record page content information and operation information of the target webpage; the operation information indicates an operation of a user on the target webpage, and the page content information is used to generate page content.
[0044] The restoring module is configured to generate an image sequence based on the plurality of copies, and the image sequence is used to record respective page content of the target webpage at at least one first time and respective operation positions of the user on the target webpage at at least one second time.
[0045] In a possible implementation, the apparatus further includes:
[0046] The second receiving module is configured to receive device hardware information sent by the first device; the device hardware information at least indicates a condition of hardware processing the target webpage in the first device;
[0047] The third receiving module is configured to receive browser information sent by the first device; the browser information includes a plug-in and / or a running environment of a browser processing the target webpage;
[0048] The restoring module is further configured to construct a virtual device of the first device based on the device hardware information, and generate an image sequence on the virtual device based on the browser information and the plurality of copies.
[0049] In a possible implementation, the apparatus further includes an interface providing module; wherein,
[0050] The interface providing module is configured to provide a first interface; the first interface is used to instruct the first device to upload the plurality of copies and error information.
[0051] In a possible implementation, the plurality of copies include an initial copy of the target webpage and an incremental copy of the target webpage relative to the initial copy.
[0052] In a possible implementation, the plurality of copies are desensitized copies.
[0053] In a possible implementation, the plurality of copies further include network request data; the network request data includes at least one request record; the request record includes a network request for the target webpage and a return value of the network request.
[0054] In a possible implementation, the apparatus further includes:
[0055] a reduction module configured to determine, based on the plurality of copies, page reference information corresponding to at least one frame in the image sequence; wherein the page reference information comprises operation records, request records and / or error information; the request records comprise network requests for the target webpage and return values of the network requests, and the operation records comprise operation positions and / or operation types;
[0056] a display module configured to display the image sequence and the page reference information corresponding to at least one frame in the image sequence.
[0057] In a fourth aspect, an embodiment of the present application provides a webpage diagnosis device, comprising: at least one memory configured to store a program; and at least one processor configured to execute the program stored in the memory, and when the program stored in the memory is executed, the processor is configured to execute the method provided in the first aspect or execute the method provided in the second aspect.
[0058] In a fifth aspect, an embodiment of the present application provides a webpage diagnosis apparatus, wherein the apparatus runs computer program instructions, and is configured to execute the method provided in the first aspect or execute the method provided in the second aspect. For example, the apparatus can be a chip or a processor.
[0059] In one example, the apparatus can include a processor which can be coupled with a memory, read instructions in the memory and execute the method provided in the first aspect or execute the method provided in the second aspect according to the instructions. The memory can be integrated in the chip or the processor, or can be independent of the chip or the processor.
[0060] In a sixth aspect, an embodiment of the present application provides a webpage diagnosis system, which can include a first device and a second device, wherein the first device is configured to execute the method provided in the first aspect, and the first device is configured to execute the method provided in the second aspect.
[0061] In a seventh aspect, an embodiment of the present application provides a computer storage medium, wherein the computer storage medium stores instructions, and when the instructions run on a computer, the computer executes the method provided in the first aspect or executes the method provided in the second aspect.
[0062] In an eighth aspect, an embodiment of the present application provides a computer program product containing instructions, and when the instructions run on a computer, the computer executes the method provided in the first aspect or executes the method provided in the second aspect. BRIEF DESCRIPTION OF DRAWINGS
[0063] Figure 1 is a schematic diagram of a webpage diagnosis method in the related art;
[0064] Figure 2 is a schematic diagram of an architecture of a web page diagnosis system provided by an embodiment of the present application.
[0065] Figure 3 is a schematic diagram of a flow of a web page diagnosis method provided by an embodiment of the present application. Figure 1
[0066] Figure 4 is a schematic diagram of an interface display of a target web page provided by an embodiment of the present application.
[0067] Figure 5a is a schematic diagram of an operation of the target web page provided by an embodiment of the present application. Figure 4 Figure 1
[0068] Figure 5b is a schematic diagram of an operation of the target web page provided by an embodiment of the present application. Figure 4 Figure 2
[0069] Figure 5c is a schematic diagram of an operation of the target web page provided by an embodiment of the present application. Figure 4 Figure 3
[0070] Figure 5d is a schematic diagram of an operation of the target web page provided by an embodiment of the present application. Figure 4 Figure 4
[0071] Figure 5e is a schematic diagram of an operation of the target web page provided by an embodiment of the present application. Figure 4
[0072] Figure 5f is a schematic diagram of an operation of the target web page provided by an embodiment of the present application. Figure 4 Figure 6
[0073] Figure 5g is a schematic diagram of image sequence display provided by an embodiment of the present application.
[0074] Figure 6 is a schematic diagram of a flow of a web page diagnosis method provided by an embodiment of the present application. Figure 2
[0075] Figure 7 is a schematic diagram of a structure of an electronic device provided by an embodiment of the present application. DETAILED DESCRIPTION
[0076] In order to make the purpose, technical solutions and advantages of the embodiments of the present application clearer, the technical solutions in the embodiments of the present application will be described below with reference to the drawings.
[0077] In the description of the embodiments of the present application, the words "exemplary", "for example", or "e.g." are used to mean serving as an example, instance, or illustration. Any embodiment or design presented as "exemplary", "for example", or "e.g." in the embodiments of the present application should not be construed as preferred or advantageous over other embodiments or designs. In fact, the use of "exemplary", "for example", or "e.g." is intended to present concepts in a concrete manner.
[0078] In the description of the embodiments of the present application, the term "and / or" is merely a description of the association relationship of the associated objects, which means that there can be three relationships, for example, A and / or B can represent the three cases of A alone, B alone, and A and B together. In addition, unless otherwise specified, the term "multiple" means two or more. For example, multiple systems refer to two or more systems, and multiple terminals refer to two or more terminals.
[0079] In addition, the terms "first" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly indicating the indicated technical features. Therefore, the features defined with "first" and "second" can explicitly or implicitly include one or more features. The terms "include", "contain", "have" and their variants mean "include but are not limited to", unless otherwise specifically emphasized.
[0080] Currently, the B / S architecture is the preferred structural system of today's application software. Among them, the B / S architecture is the software system architecture, which means Broswer-Server, adopts a three-layer architecture, namely, the presentation layer (the interface displayed to the user), the business logic layer (the operation for specific problems, which can also be said to be the operation of the data layer, the processing of data business logic), and the data access layer (the operation for specific problems, which can also be said to be the operation of the data layer, the processing of data business logic). In the B / S architecture, the user interface is completely realized through the browser, a part of the transaction logic is realized on the front end, but the main transaction logic is realized on the server side, forming the so-called three-layer architecture. In the B / S architecture system, the user sends a request to many servers distributed on the network through the browser, the server processes the request of the browser, and returns the information required by the user to the browser. And the rest such as data request, processing, result return, dynamic web page generation, access to database and execution of application program are all completed by the Web server.
[0081] Therefore, the user experience of the Web interface, that is, the webpage, is particularly important, but the webpage may occur unpredictable abnormalities or errors during use. Therefore, how users feed back problems and how engineers diagnose problems of the webpage is a real business pain point.
[0082] The current existing webpage diagnosis method mainly monitors errors or exceptions in the webpage, and returns the last frame screenshot, error information and the like when the webpage error occurs. The specific content of the implementation of this scheme is as follows:
[0083] As shown in Figure 1 When a user accesses a webpage, the webpage starts a monitoring system to monitor the webpage. When an error or exception occurs in the webpage, that is, the webpage has an error, the monitoring system notifies an information collection module to collect the webpage screenshot and error information when the error occurs, and then packs and sends these information to a server for analysis, that is, uploads the analysis. The information collection module only collects information when the webpage has an error or exception, and can only obtain some information when the webpage has an error or exception, and cannot obtain a series of operation information of the user before the error.
[0084] The above scheme has the following disadvantages.
[0085] 1. Only the screenshot and error information when the current webpage has an error or exception can be fed back, and more operations before the error cannot be traced back. Locating errors often requires a complete operation process, and only the information at the error moment is difficult to achieve good effect for locating complex problems. Engineers may not be able to reproduce the scene at that time, because complex error problems generally require a continuous operation process of the user to trigger.
[0086] 2. The network request data and the like of the user when the error occurs cannot be obtained, more information cannot be obtained as a reference, and the positioning result may be inaccurate.
[0087] 3. Since the screenshot and the like are directly fed back, some sensitive information of the user may be exposed, and there is a risk of leakage of user sensitive information.
[0088] To solve the above technical problems, the embodiment of the present application provides a webpage diagnosis method, which can collect webpage error and webpage page content, error information, user operation, network request and the like data within a period of time before the error occurs, and then re-render the webpage page content, user operation, error information, network request and the like information in the browser based on these data, so that engineers can quickly locate and modify the error or exception in the webpage based on more comprehensive information.
[0089] Figure 2 An architecture example diagram of a webpage diagnosis system to which the webpage diagnosis method provided by the embodiment of the present application is applied is shown. It should be understood that the webpage diagnosis system to which the webpage diagnosis method provided by the embodiment of the present application can be applied can also be applied to Figure 2 other webpage diagnosis systems shown in the webpage diagnosis system, which are not limited by the embodiment of the present application. As Figure 2As shown, the webpage diagnosis system comprises a terminal device 210 and an analysis device 220.
[0090] The terminal device 210 can be, but is not limited to, various personal computers, notebook computers, smart phones, tablet computers and the like, which can browse webpages. Specifically, the terminal device 210 is installed with a browser, and a user accesses a webpage through the browser. The exemplary embodiments of the terminal device 210 involved in the embodiments of the present application include, but are not limited to, electronic devices running iOS, android, Windows, Harmony OS or other operating systems. The embodiments of the present application do not make specific limitations on the type of electronic device.
[0091] The analysis device 220 can be a server. In some embodiments, the analysis device 220 can also be a terminal device such as a desktop computer, a notebook computer or a smart phone.
[0092] The terminal device 210 communicates with the analysis device 220 through a network. The network can be a wired network or a wireless network. For example, the wired network can be a cable network, a fiber network, a digital data network (DDN), etc., and the wireless network can be a telecommunication network, an intranet, the Internet, a local area network (LAN), a wide area network (WAN), a wireless local area network (WLAN), a metropolitan area network (MAN), a public switched telephone network (PSTN), a Bluetooth network, a ZigBee network, a global system for mobile communications (GSM) network, a code division multiple access (CDMA) network, a general packet radio service (CPRS) network, etc., or any combination thereof. It can be understood that the network can use any known network communication protocol to realize communication between different client layers and gateways. The network communication protocol can be various wired or wireless communication protocols, such as Ethernet, universal serial bus (USB), firewire, global system for mobile communications (GSM), general packet radio service (GPRS), code division multiple access (CDMA), wideband code division multiple access (WCDMA), time-division code division multiple access (TD-SCDMA), long term evolution (LTE), new radio (NR), Bluetooth, wireless fidelity (Wi-Fi), etc.
[0093] In the process that the terminal device 210 accesses the web page of the client by using the browser, the terminal device 210 collects the data such as the page content of the web page at different times, error information, user operations and the like in a period before the error occurs, and packs and uploads these data to the analysis device 220. The analysis device 220 can restore the page content of the web page at different times, user operations and the like in the browser, so that the engineer can comprehensively locate and modify the error or exception occurred in the web page based on more information.
[0094] It should be noted that, Figure 2 The web page diagnosis system shown is only an example and does not constitute a specific limitation. In actual application, the web page diagnosis system can include more devices than Figure 2 shown. For example, the web page diagnosis system can further include a device cluster. The device cluster is a server, and the analysis device 220 is a client. The target data and the re-rendering task are given to the device cluster. The analysis device 220 is configured to send a request to the device cluster. The device cluster renews the web page in response to the request and displays the result after re-rendering to the engineer.
[0095] Figure 3 FIG. 1 is a flow diagram of a web page analysis method provided by an embodiment of the present application. The embodiment can be applied in the web page diagnosis system described above, and can be applied in the terminal device 210 and the analysis device 220. As shown in Figure 3 The web page analysis method provided by the embodiment of the present application at least includes the following steps:
[0096] In step 301, the terminal device 210 creates a plurality of first copies of the target web page. At least one first copy is used to record at least the page content information and the operation information of the target web page. The page content information is used to generate the page content of the target web page, and the operation information indicates the operation of the user on the target web page.
[0097] In actual application, the user accesses the client of the target application by using the browser installed in the terminal device 210, so as to run the target web page in the target application in the browser and display the page content of the target web page. Then, the user can operate the page content of the target web page, so as to change the page content of the target web page.
[0098] Specifically, the terminal device 210 accesses the target webpage based on the URL (Uniform Resource Locator) of the target webpage, obtains the webpage file, parses the webpage file to obtain a DOM (Document Object Model) tree, and renders the DOM tree to display the page content of the target webpage. The DOM tree records a plurality of nodes and node information of each node, and the node information can include content to be displayed and / or resources to be requested. For example, the requested resources can be a CSS (Cascading Style Sheets) file, an internal resource of the terminal device 210 (for ease of description and distinction, referred to as a local resource), or a resource outside the terminal device 210 (for ease of description and distinction, referred to as an external resource). When requesting an internal resource, the request generated by the terminal device 210 can be referred to as an internal request; when requesting an external resource, the request generated by the terminal device 210 can be referred to as a network request. For example, in the process of rendering the DOM tree, if an external CSS file is encountered, the browser running on the terminal device 210 will additionally issue a network request to obtain the CSS file, and if an image resource is encountered, the browser will additionally issue a network request to obtain the image resource.
[0099] Subsequently, if the user performs an operation on the page content of the target webpage, the terminal device 210 can generate a network request or an internal request to request a resource and change part of the page content of the target webpage. For example, the network request can be an address for jumping to a new webpage. Assuming that the page content of the target webpage includes a tab bar and the tab bar includes a plurality of tabs, the user clicks a tab, such as a home page. At this time, a network request can be sent to request the content of the tab, and the network request can be considered as the address of the webpage to be jumped to. For example, the network request can also be content to be displayed on the target webpage. For example, the target webpage can select to query certain data. At this time, the network request can be a request for data to be queried, and the data can be displayed on the webpage afterwards.
[0100] Specifically, the user can perform an operation on the page content of the target webpage to generate an operation event, and further process the operation event to generate an internal request or a network request, and update the page content after requesting a resource. The operation event indicates operation-related information, such as an operation type and an operation position. Here, the operation event can be a click event, a movement event, an input event, a long-press sliding event, a sliding event, and the like. Correspondingly, the operation of the user can be clicking, mouse movement, mouse long-press, mouse long-press sliding, and the like.
[0101] For example, the terminal device 210 accesses the target webpage based on the URL url1 of the target webpage, and obtains a DOM tree as shown in FIG. 2B.Figure 4 The page shown. Afterwards, the user can... Figure 4 Operate on the displayed page content.
[0102] Figures 5a to 5f It shows that it can be used for Figure 4 The operations shown on the page content.
[0103] like Figure 5a As shown, the mouse can be used... Figure 4 Slide your mouse over the displayed page content to obtain the mouse movement trajectory T.
[0104] like Figure 5b As shown, if the mouse clicks the video play button in the video display area 401, the terminal device 210 can send a network request to request video resources. After that, a video display page 406 can be generated, which is used to play the video.
[0105] like Figure 5c As shown, the user can enter product A in the product input box using the keyboard and click the search button. Then, the terminal device 210 can send a network request to request product A's introduction information. After that, the product introduction display area 404 can display information such as pictures, videos and text descriptions related to product A.
[0106] like Figure 5d As shown, if the mouse clicks on the title tag2, the terminal device 210 can send an internal request to request the resources under tag2. After that, tag2 can be highlighted and the content corresponding to tag2 can be displayed in the title content display area 405.
[0107] like Figure 5e As shown, the mouse can be pressed and dragged while sliding control 402, and then the terminal device 210 can move the page.
[0108] like Figure 5f As shown, the mouse can be moved to label C2, and the terminal device 210 highlights label C2. When the mouse clicks label C2, the terminal device 210 generates a network request (including URL 2), thereby jumping to the webpage 2 indicated by C2.
[0109] During the process of the terminal device 210 displaying the page content of the target webpage and the user operating on the page content of the target webpage, relevant information of the target webpage can be recorded in a loop, including page content information, network request records, operation information, etc., thereby obtaining several first copies.
[0110] The page content information is used to generate the page content of the target webpage, which is usually a DOM tree. The DOM tree is used to record the text to be displayed, the external resources to be requested, and the internal resources to be requested. The DOM tree is a virtual tree, which can be regarded as the state of the webpage at a certain time.
[0111] The operation information can be an operation event.
[0112] The request record is used to record the network request and the return value obtained by the network request. Here, the network request can be a request generated by the terminal device 210 to request an external resource. For example, the network request can include the URL of the target webpage (usually a uniform resource locator (URL)). In addition, it can also include a request to request an external resource during the generation of the target webpage, and / or a request to request an external resource during the operation of the target webpage by the user. It should be noted that, in order to better record the actual resource request situation of the target webpage, the network request during the generation of the webpage can be recorded separately, so as to facilitate subsequent processing and analysis of the network request. It should be noted that the network request usually needs to access other devices, and in the restoration process, the return value of the network request can not be obtained, therefore, the return value of the network request can be directly recorded. For some network requests that can obtain the return value in the restoration process, the network request can be directly recorded, so that the resource can be obtained in the restoration process.
[0113] According to a possible implementation, the first copy can be a snapshot. In some possible cases, the first copy can also be a backup, and the embodiments of the present application do not intend to show the type of the copy, which can be determined according to actual conditions.
[0114] According to a possible implementation, the plurality of first copies include an initial copy of the target webpage and a plurality of incremental copies relative to the initial copy, and the serial numbers of the copies increase in the order of the creation time of the copies. The later the creation time, the larger the serial number.
[0115] In one example, the initial copy includes the URL of the target webpage and the full page content information of the target webpage. Further, the network request can also be included. Here, the full page content information indicates all the page content of the target webpage. For example, based on the full page content information, the target webpage can be restored to the state shown in the following figure. Figure 4 The page content shown in the figure.
[0116] In one example, the plurality of incremental copies are used to record the operation information, the page content change information of the target webpage, and further, the network request can also be recorded. The page content change information of the target webpage can be recorded by a virtual DOM tree, and the virtual DOM tree only records the part of the page content of the webpage that has changed.
[0117] For example, the single incremental copy can include an operation event.
[0118] For example, the single incremental copy can include page content change information.
[0119] For example, the single incremental copy can include a network request. For Figure 5b , the incremental copy includes a network request for requesting a video file.
[0120] For example, assume that an initial copy is created for the web page shown in Figure 4 , and then the user performs the operations in Figures 5a to 5f .
[0121] For Figure 4 , the initial copy includes the web page's DOM tree shown in Figure 4 .
[0122] For Figure 5a , multiple incremental copies can be created, each incremental copy for recording a movement event, the movement event including an operation type (movement) and a mouse position, and based on the movement event, the mouse position and the movement trajectory can be restored. For Figure 5a , the page content does not change, and thus the page content change information is empty.
[0123] For Figure 5b , four incremental copies can be created. The first incremental copy is for recording a click event, the click event including an operation type (click) and a click position, and based on the click event, the click position and the click operation can be restored. The second incremental copy is for recording page content change information of the video display area 401 (e.g., the video display area's DOM tree, which at least records an internal request for requesting the video display page 406, a network request for requesting a video file, etc.), and based on the page content change information, the video display page 406 shown in Figure 5b can be restored, the video file is obtained based on the network request for requesting the video file, and the video file is parsed to play the video in the video display page 406. The third incremental copy is for recording a click event on the video display page 406, the click event including an operation type (click) and a click position (the delete button "X"), and based on the click event, the click position and the click operation can be restored. The fourth incremental copy is for recording page content change information of the video display page 406 (indicating to delete the video display page 406), and based on the page content change information, the video display page 406 is deleted.
[0124] For Figure 5cIn this configuration, four incremental copies can be created. The first incremental copy records click events, including the operation type (click) and the click location (the location of the product input box). Subsequently, the click location and operation can be reconstructed based on the click events. The second incremental copy records page content change information for the product input box 403 (such as the DOM tree of the product input box 403, recording the input content, and the display style of the input content or internal requests for display styles, etc.). Subsequently, the page content change information can be reconstructed... Figure 5c The input content "Product A" is shown in the product input box 403. The third incremental copy is used to record click events, including the operation type (click) and the click location (the location of the search button in the product input box). Subsequently, the click location and operation can be reconstructed based on the click events. The fourth incremental copy is used to record page content change information in the product description display area 404 (such as the DOM tree, used to record input content, and network requests for product A's description content, etc.). Subsequently, the page content change information can be reconstructed... Figure 5c The content shown in the product input box 403, and the content displayed in the product introduction display area 404.
[0125] for Figure 5d In this approach, two incremental copies can be created. The first incremental copy records click events, including the action type (click) and the click location. Subsequently, the click location and action can be reconstructed based on the click events. The second incremental copy records page content change information (e.g., the DOM tree corresponding to the title bars (tag1, tag2, tag3), which at least records requests for highlighting tag2 and content requests under tag2). Based on this page content change information, the page content can be reconstructed. Figure 5d The highlighted tag2 and title content display area 405 show the content under tag2.
[0126] for Figure 5e Two incremental copies can be created. The first incremental copy records long-press and swipe events, including the operation type (long-press and swipe), the long-press position (the position of the swipe control), and the swipe position. Subsequently, based on the long-press and swipe events, the long-press position, the long-press operation, and the swipe operation can be reconstructed. The second incremental copy records page content change information (including the DOM tree of the swipe control 402, which at least records the page content corresponding to the swipe control 402 at different positions). Subsequently, based on the page content change information, the page content can be reconstructed. Figure 5e The changes in page content as the position of the sliding control 402 changes are shown.
[0127] for Figure 5fFor example, three incremental copies can be created, the first incremental copy is used to record the moving event, the moving event includes the operation type (moving), the moving position (label C2), and the moving position can be restored based on the moving event. The second incremental copy is used to record the page content change information (for example, the DOM tree of the tab bar (C1, C2, C3, C4), the tree is used to record at least the highlight of label C2), the highlight of C2 can be restored based on the page content change information. The third incremental copy is used to record the network request (url2) under label C2, and the webpage 2 can be loaded based on the network request (url2). Figure 5f
[0128] It is worth noting that the full page content information in the initial copy and the page content change information in the incremental copy are both page content information.
[0129] In the specific implementation, for a webpage without created copy, first, the initial copy and the serial number of the webpage are created, then the incremental copy and the serial number (continuously increasing) of the webpage are created, thereby obtaining a plurality of first copies with sequentially increasing serial numbers for the webpage.
[0130] In the actual recording process of the copy, the IndexedDB (local index database) stores the copy in time sequence, and the terminal device 210 further judges whether the IndexedDB (local index database) exceeds the storage limit. If the storage limit is exceeded, it is judged whether the serial number 0 and the serial number 1 of the website recorded by the IndexedDB last are the same. If yes, the initial copy of the serial number 0 is combined with the incremental copy of the serial number 1 to form a new initial copy of the serial number 0. If no, the initial copy of the serial number 0 is directly deleted. Then, the user opens the webpage of the target system through the terminal device 210, and the terminal device 210 judges whether the IndexedDB stores the copy of the current webpage. If yes, the incremental copy is created, and the serial number is increased according to the historical record. If no, the initial copy is created from the serial number 0, and the serial number is recorded.
[0131] Step 302, the terminal device 210 creates the second copy of the target webpage when an error occurs in the target webpage, and obtains the error record.
[0132] When the target webpage is in error, a second copy of the target webpage is created. The second copy can record the address of the target webpage, page content information, operation events, request records of network requests, etc. Here, the page content information can be page content change information. For details, see the foregoing, which will not be repeated. Notably, in embodiments of the present application, the second copy when an error occurs is used to record the entire process of error occurrence, i.e., user operations, page change information after user operations, return values after network requests, etc. need to be recorded completely. Specifically, in the case where the page does not react after user operations, the second copy is used to record operation events, and in the case where the content displayed by the page is incorrect after user operations, the second copy can record page content information. In some possible implementation manners, an additional second copy can be created to record network requests or request records of network requests; here, when return values can be obtained based on network requests, network requests can be recorded, and when return values cannot be obtained based on network requests, request records of network requests need to be recorded, thereby facilitating subsequent restoration.
[0133] The errors that can be encountered by the target webpage are described below.
[0134] For example, when a website is accessed, the problem that a network request cannot be responded to can occur, and sometimes error information 404 can occur. Generally, the reason for this can be that the accessed page does not exist, or the website address is input incorrectly, or the terminal device 220 used does not have a network. For example, for Figure 5f , the webpage 2 cannot be accessed, and the page content of the webpage 2 displays “404 Sorry, the page you accessed does not exist”; at this time, the second copy can record the network request of the webpage 2. For example, for Figure 5c , it is assumed that the pictures, videos, texts, etc. of product A cannot be displayed, and the display area 404 of the product introduction does not display pictures, videos, or texts, etc. At this time, the second copy can record the operation events of the user on the page shown in Figure 5c .
[0135] For example, the internal logic of the target webpage can have a problem. For example, for Figure 5b , it is assumed that the mouse clicks the video play button in the video display area 401, and the target webpage does not react. Correspondingly, the second copy can record the click event of the user. For example, for Figure 5d , it is assumed that the mouse can click the title tag2, but the title tag2 is not highlighted, and the title content display area 405 is not updated to the content corresponding to the tag2, but still the content corresponding to the tag1. Correspondingly, the second copy can record the click event of the user. For example, for Figure 5eIf the mouse can long press and slide the control 402 and move, the terminal device 210 does not realize page movement and the like, and correspondingly, the second copy can record the long press and slide event of the user.
[0136] It should be noted that the error record includes an error time and an error situation corresponding to the error time. For example, the position clicked by the user does not respond, the internal request generated does not respond, the network request generated does not respond, and the like. It should be noted that in the embodiments of the present application, the creation time of the second copy and the error record are performed in parallel. Alternatively, the creation time of the copy and the error time can be identical. For example, the user operation page does not respond. Alternatively, the error time is earlier than the creation time of the copy. For example, as shown in the case that the webpage 2 cannot be displayed, the error occurs first, and then the copy record of the webpage 2 that cannot be displayed is created. In actual applications, the first copy and the second copy each include a copy creation time, so that the copy corresponding to the error time can be analyzed based on the creation time and the error time, or the second copy and the error record are directly associated. Figure 5f It should be noted that in the embodiments of the present application, the creation time of the second copy and the error record are performed in parallel. Alternatively, the creation time of the copy and the error time can be identical. For example, the user operation page does not respond. Alternatively, the error time is earlier than the creation time of the copy. For example, as shown in the case that the webpage 2 cannot be displayed, the error occurs first, and then the copy record of the webpage 2 that cannot be displayed is created. In actual applications, the first copy and the second copy each include a copy creation time, so that the copy corresponding to the error time can be analyzed based on the creation time and the error time, or the second copy and the error record are directly associated.
[0137] In step 303, the terminal device 210 determines a plurality of copies and error information when the target webpage has an error based on the first copy, the second copy, and the error record that have been created.
[0138] In actual applications, data can be uploaded when an error occurs once, and thus the error information is one error record. In some possible implementation manners, data can be uploaded after multiple errors occur, and thus the error information can include a plurality of error records. Here, the plurality of copies include the second copy and a plurality of first copies in a preset time period before the second copy.
[0139] It should be noted that the copies in steps 301 and 302 include request records, and thus the plurality of copies can include network request data, and the network request data includes a plurality of request records.
[0140] According to a possible implementation manner, the terminal device 210 displays a first interface such as an upload button to instruct the user to upload data. For example, the first interface is a button. When the user clicks the button, the second copy and the first copy in a preset time period before the second copy, and the error information of the target webpage when the second copy is created can be uploaded to the analysis device 220. Here, the preset time period can be default or configured by the user. For example, the user operates the first interface to configure the time period before the second copy, and subsequently, the first copy and the second copy in the time period configured by the user are packaged.
[0141] In actual use, the multiple copies and the error information are desensitization-encrypted data. The terminal device 210 desensitization-encrypts the first copy and the second copy, to ensure user privacy and data security. Specifically, for the already recorded copy, a general sensitive data scanning is used to determine whether there is a name, a phone number, a bank card number, or other sensitive personal information. If there is sensitive data, a static data desensitization technology is used. When the sensitive data is greater than two digits, except for the first digit and the last digit, all other digits are covered by an asterisk, and in other cases, "******" is directly replaced. The desensitized copy is then encrypted by AES (Advanced Encryption Standard) to form a transmittable file.
[0142] Step 304: The terminal device 210 sends the multiple copies and the error information to the analysis device 220.
[0143] Step 305: The analysis device 220 obtains, based on the multiple copies, an image sequence and respective page reference information of at least one frame in the image sequence, the image sequence being used to record respective page content at at least one first time and respective operation positions of the user on the target webpage at at least one second time.
[0144] In the embodiments of the present application, the page content is restored based on the page content information in the multiple copies, and the operation position is restored based on the operation information, to obtain the image sequence. In actual application, as shown in FIG. 6, the image sequence can be displayed as a restored video. Figure 5g
[0145] The specific process in which the analysis device 220 restores the page content is described below.
[0146] In one example, the multiple copies include DOM trees at different times, and the analysis device 220 will render these DOM trees to restore the page content at different times. The specific conversion process is as follows:
[0147] Each node in the DOM tree is called a vNode, and each vNode includes a vid attribute and a vnode attribute, the vid attribute records the virtual id of the current node, and the vnode records the dom data of the current node. First, the virtual dom is traversed using a recursive manner, the dom data contained in each vNode is taken out and restored as a new dom tree. Second, the dom tree is recursively traversed, and each dom node is inserted into the page using methods such as append() and appendChild() in Js.
[0148] It is worth noting that in practical applications, the page content information includes full page content information and page content change information. Specifically, first, a full page content (as a picture) is generated based on the full page content information, and then the full page content is locally modified based on the page content change information, and a full page content (as a picture) is obtained again, thereby obtaining the page content at different times.
[0149] On the basis of the respective page content at the plurality of first time instants, a virtual mouse is added at the respective operation position at the at least one second time instant, thereby constructing the image sequence. It should be understood that the first time instant is the time instant of creation of the page content information in the plurality of copies. The second time instant is the time instant of the user operation recorded in the operation information in the plurality of copies.
[0150] The process of restoring the user operation is described below.
[0151] In one example, the plurality of copies includes mouse movement trajectory data, i.e., a movement event, the analysis device 220 refreshes the mouse position of the web page at certain intervals, and restores the mouse movement process. The mouse movement trajectory data is a continuous array (each array represents the mouse position), and the old trajectory is at the beginning of the array and the new trajectory is at the end of the array. The specific processing process is as follows:
[0152] The analysis device 220 takes data from the first data of the mouse movement trajectory data, and the data taken is {x: 220, y: 200}, where x represents the absolute distance of the mouse from the left boundary of the web page, and y represents the absolute distance of the mouse from the top margin of the web page. The simulated mouse is always in the form of a picture existing on the uppermost layer of the web page, and only the mouse DOM element needs to be obtained. Then, the offsetX and offsetY attributes of the mouse DOM element are obtained to update the element position. Then, it is judged whether there is still mouse movement trajectory data, and the above process is executed in a loop. If not, the mouse movement trajectory restoration is completed. In practical applications, a timer is set to execute the data in the mouse movement trajectory data at a certain interval until the mouse movement trajectory restoration is completed; wherein the interval is generally 50 milliseconds. It is worth noting that based on the mouse movement trajectory, it can be analyzed why the user moves the mouse and what content in the web page the user may need to find, so that the layout of the web page can be reasonably set and the user experience can be improved.
[0153] It should be noted that the mouse movement trajectory here can be understood as the movement trajectory of the mouse in the page content of the target web page without any operation, such as, Figure 5a The mouse movement trajectory T is shown.
[0154] Here, the page reference information can include rendering records, operation records and / or error information. Here, the operation records include operation positions and operation types, which can be obtained from the operation information recorded in the multiple copies. The rendering records are information recorded in the re-rendering process based on the page content information. It is worth noting that the operation records correspond to a frame image at the second time in the image sequence, and the error information corresponds to a frame image at the first time or the second time in the image sequence. For example, when the error information is generated in the page loading process, the error information corresponds to the first time, and the page content at the first time is the content after the page is loaded. When the error information is generated at the time of user operation, the error information corresponds to the second time of user operation.
[0155] Further, if the multiple copies include network request data, the page reference information can further include request records. Here, the request records correspond to a frame image at the first time in the image sequence. For example, when the network request is generated in the page loading process, the request record of the network request corresponds to the first time, and the page content at the first time is the content after the page is loaded. When the network request is generated in the process of user operation on the page content, and the page content changes, the request record of the network request corresponds to the first time, and the page content at the first time is the content after the page changes.
[0156] For example, it is assumed that the user operates in the order of Figure 5a 、 Figure 5b 、 Figure 5c 、 Figure 5d 、 Figure 5e and Figure 5f , and Figure 5f cannot load the web page 2. At this time, the analysis device 220 can restore Figures 5a to 5f based on the multiple copies, and can record Figures 5a to 5f into a video in time sequence, and record the request records, operation records and / or error information of a plurality of network requests corresponding to each frame in the video, so as to facilitate the user to view. More specifically, the page reference information corresponding to the web page 2 in Figure 5f includes error information and request records. The page operation information corresponding to the web page 1 in Figure 5f includes operation records, and the operation records include operation positions: the position where C2 is located and operation types: clicks.
[0157] Further, the page reference information can also display the loading time of the target web page, the time of responding to the user operation (such as the time from the user operation to the change of the page), etc.
[0158] In summary, the analysis device 220 decrypts the received multiple copies and error messages, and reconstructs the webpage according to the recording time of the multiple copies. Furthermore, the analysis device 220 can preserve the reconstructed target webpage as a video resource, while also retaining the page reference information corresponding to each frame of the video, thus facilitating subsequent viewing. Here, the video is used to reflect the changes in the target webpage's content over time, user actions, and the page content after user actions. Combining the video with the page reference information facilitates subsequent webpage error analysis and localization.
[0159] Step 306: The analysis device 220 displays the image sequence and the page reference information of the current frame in the image sequence.
[0160] like Figure 5g As shown, the analysis device 220 displays the reconstructed video formed by the image sequence, and during the display of the reconstructed video, it displays page reference information for the current frame. Here, the current frame is the current scene in the image sequence.
[0161] In one example, when the page reference information includes request records, the analysis device 220 displays the network request and the result of executing the network request in a specific area of the webpage. The specific processing procedure is as follows:
[0162] When the analysis device 220 receives the request record, it organizes and processes the network request and the return value of the executed network request into a unified format: {method:webpagediagnosis,status:webpagediagnosis,payload:webpagediagnosis,request:webpagediagnosis,response:webpagediagnosis}. Subsequently, the processed data is inserted as text into the area displaying the network request results on the webpage, facilitating subsequent analysis by engineers. Here, `method` indicates the network request method, such as GET; `status` indicates whether the network request was successful, revealing the exact reason for any failure; `payload` indicates the percentage of the protocol message containing the effective payload; `request` represents the network request parameters; and `response` represents the response information after executing the network request.
[0163] In this embodiment, the webpage content, user operations, error information, and other data are recorded in a loop at different times. This allows for the complete recording of relevant information about the webpage before and after the error occurs. This data is then re-rendered into a webpage to restore the page content, user operations, and error information at different times before and after the error, which helps engineers locate complex errors.
[0164] In order to enable engineers to quickly locate errors that occur on web pages, the analysis device 220 and the actual situation of the terminal device 210 need to be as consistent as possible. That is, the analysis device 220 needs to be restored on a device similar to the terminal device 210.
[0165] Then in the above Figure 3 Based on steps 301 to 305 shown, as follows Figure 6 As shown, it includes the following steps:
[0166] Step 601: Terminal device 210 obtains device hardware information; wherein, the device hardware information at least indicates the hardware status of the terminal device 210 that processes the target webpage.
[0167] Here, device hardware information may include the screen resolution, network speed, and machine performance of the terminal device 210. Machine performance may include several performance parameters, such as the number of CPU cores, CPU frequency, and memory capacity.
[0168] Step 602: Terminal device 210 obtains browser information; wherein, browser information includes browser plugins and / or runtime environment for processing the target webpage.
[0169] Here, browser information may include browser plugins and / or runtime environment. The runtime environment may include the operating system version, browser version, etc. Browser plugins are tools that add new functions to the browser's existing functionality. Common examples include Flash plugins, RealPlayer plugins, MMS plugins, MIDI music notation plugins, ActiveX plugins, etc. Different plugins may have different effects on browser operation, so browser plugins need to be considered.
[0170] The corresponding step 304 includes the following steps:
[0171] Step 3041: Terminal device 210 sends multiple copies, error messages, device hardware information, and browser information to analysis device 220.
[0172] It is worth noting that, in practical applications, data sent to the analysis device 220 should be encrypted to ensure data security.
[0173] Correspondingly, step 305 includes at least the following steps:
[0174] Step 3051: Analyze device 220 to construct a virtual device of the first device based on the device hardware information. On the virtual device, based on browser information and multiple copies, obtain the image sequence and the page reference information of at least one frame in the image sequence.
[0175] In actual application, the virtual device of the first device can be constructed based on the device hardware information, and the running environment of the browser can be constructed on the virtual device based on the browser information, the adapted browser, operating system and plug-in of the browser are installed, and then the page content of the multiple copies of the target webpage at different time, the operation of the user and the result of the network request are processed through the installed operating system, browser and plug-in of the browser, so that the actual situation of the target webpage can be simulated more realistically, and the webpage diagnosis can be more accurately realized.
[0176] Correspondingly, the step 306 at least includes the following steps:
[0177] The step 3061 includes analyzing the device 220 display image sequence, the page reference information of the current frame in the image sequence, the device hardware information and the browser information.
[0178] As shown in the step 3062, the device 220 displays the restored video formed by the display image sequence, the device hardware information and the browser information, and displays the page reference information of the current frame in the process of displaying the restored video. Figure 5g
[0179] In the scheme, the virtual device of the adapted terminal device is constructed, and the actual running situation of the browser restored on the virtual device, so that the related information of the webpage before and after the error can be restored more accurately, which is beneficial to the error positioning of the complex problem.
[0180] It should be noted that in actual application, for the target webpage in the client of the target application, a large number of terminal devices 210 can use the client of the target application, and the analysis device 220 receives the multiple copies and error information of the target webpage fed back by the multiple terminal devices 210, so as to obtain massive data, which is convenient for subsequent error analysis and positioning of the target webpage. It should be noted that the large number of terminal devices 210 can include mobile phones, computers and other devices, so that the performance of the terminal device 210 of the target webpage on different screen resolutions can be comprehensively analyzed.
[0181] In addition, the terminal device 210 can be referred to as a first device, and the analysis device 220 can be referred to as a second device.
[0182] In summary, in actual application, the embodiments of the present application enable the user to record the abnormal situation of the product webpage in real time and feed back to the research and development, and the engineer can understand the problem at each time point in the user operation process by playing back and restoring the method provided by the embodiments of the present application, so as to quickly locate and repair the problem and improve the user experience.
[0183] The embodiments of this application can be used for communication between internal testing and development in R&D, enabling developers to more easily locate problems without frequently borrowing testing environments, saving a lot of communication costs and increasing efficiency.
[0184] This application embodiment can organize the problems reported by users / services / maintenance / frontline staff to form a new type of software maintenance case library, which greatly reduces the workload of writing case libraries, can quickly output cases, and improve user experience.
[0185] The embodiments of this application can quickly generate new types of simulation data (i.e., videos generated after webpage restoration), allowing users to intuitively view "dynamic" data.
[0186] Based on the same concept as the method embodiments of this application, this application also provides an electronic device. This electronic device can be the aforementioned terminal device 210, or the analysis device 220. Figure 7 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application.
[0187] like Figure 7 As shown, the electronic device 700 includes a processor 701, a memory 702, and a network interface 703.
[0188] The processor 701 can be a Central Processing Unit (CPU), or other general-purpose processors, digital signal processors (DSPs), application-specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. A general-purpose processor can be a microprocessor or any conventional processor.
[0189] The memory 702 can be volatile memory or non-volatile memory, or it can include both. The non-volatile memory can be read-only memory (ROM), programmable read-only memory (PROM), erasable programmable read-only memory (EPROM), electrically erasable programmable read-only memory (EEPROM), or flash memory. The volatile memory can be random access memory (RAM), which is used as an external cache. By way of example, but not limitation, many forms of RAM are available, such as static random access memory (SRAM), dynamic random access memory (DRAM), synchronous dynamic random access memory (SDRAM), double data rate synchronous dynamic random access memory (DDR SDRAM), enhanced synchronous dynamic random access memory (ESDRAM), synchronous linked dynamic random access memory (SLDRAM), and direct rambus RAM (DR RAM).
[0190] For example, the memory 702 may store a computer program. When the processor 701 executes the computer program, it implements the functions of the terminal device 210 in the above-described webpage diagnostic method embodiment. For example, it may implement... Figure 3 Steps 301 to 304 shown; or, implementing the steps implemented by the analysis device 220 in the above-described webpage diagnostic method embodiment, for example, implementing... Figure 3 Step 305 is shown. Alternatively, when the processor 701 executes the computer program, it implements the functions of each module in the above-described device embodiment. For example, the computer program can be divided into one or more modules / units, which can be a series of computer program instruction segments capable of performing a specific function. One or more modules / units are stored in the memory 702 and executed by the processor 701 to complete the steps implemented by the terminal device 210 in the above-described webpage diagnostic method embodiment. Alternatively, the analysis device 220 in the above-described webpage diagnostic method embodiment implements the functions.
[0191] The network interface 703 is used to send and receive data, for example, to send data processed by the processor 701 to other electronic devices, or to receive data sent by other electronic devices.
[0192] Of course, in order to simplify, Figure 7 Only some of the components in the electronic device 700 related to the present application are shown in the figure, and components such as buses, input / output interfaces, etc. are omitted. In addition, the electronic device 700 can also include any other appropriate components according to specific application circumstances. In addition, the electronic device can be a desktop computer, a notebook, a palm computer, and a cloud server, etc. Those skilled in the art can understand that, Figure 7 The electronic device 700 is only an example and does not constitute a limitation on the electronic device, and can include more or fewer components than shown, or combine certain components, or different components, for example, the electronic device can also include input devices, output devices, network access devices, buses, etc. For example, the input device can be a keyboard, a mouse, etc. For example, the output device can output various information to the outside, and can include, for example, a display, a speaker, a printer, a communication network and a remote output device connected thereto, etc.
[0193] In addition to the above method, device and electronic device, the embodiments of the present application can also provide a computer program product, which includes computer program instructions, which, when executed by a processor, cause the processor to perform the steps of the web page diagnosis method of various embodiments of the present application described in the above "method" part of the specification. Wherein the computer program product can be written in any combination of one or more programming languages for executing the computer program code of the embodiments of the present application, the programming languages include object-oriented programming languages such as Java, C++, etc., and conventional procedural programming languages such as "C" language or similar programming languages. Wherein the computer program code can be in the form of source code, object code, executable file or some intermediate form, etc. The computer program code can be executed entirely on a user computing device, partially on a user device, as an independent software package, partially on a user computing device and partially on a remote computing device, or entirely on a remote computing device or server.
[0194] Moreover, embodiments of the present application can also provide a computer readable storage medium having stored thereon computer program instructions which, when executed by a processor, enable the processor to carry out the steps of the webpage diagnosing method according to various embodiments of the present disclosure described in the above "METHOD" section of this specification. The computer readable storage medium can take any of a variety of forms. The computer readable storage medium can be a readable signal medium or a readable storage medium. The readable storage medium can include, for example but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any suitable combination of the foregoing. More specific examples (a non-exhaustive list) of the readable storage medium include an electrical connection having one or more wires, a portable disc, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. It is noted that the computer readable medium contains content that can be appropriate for software that is in accordance with the law and the patent practice in the jurisdiction, for example, in some jurisdictions, the computer readable medium does not include electrical carrier signals and telecommunication signals.
[0195] In the above embodiments, the description of each embodiment has its own focus, and the parts not described or recorded in detail in a certain embodiment can be referred to the relevant description of other embodiments.
[0196] It should be understood that the size of the serial number of each step in the above embodiments does not mean the order of execution, and the execution order of each process should be determined according to its function and inherent logic, and should not constitute any limitation on the implementation process of the embodiments of the present application.
[0197] The basic principles of the present application are described above in combination with specific embodiments, but it should be pointed out that the advantages, advantages, effects and the like mentioned in the present application are only examples and not limitations, and these advantages, advantages, effects and the like cannot be considered as the must-have of each embodiment of the present disclosure. In addition, the above specific details are only for the purpose of example and for the purpose of understanding, and are not limited to the above specific details, and the above details do not limit the present disclosure to the above specific details.
[0198] The block diagrams of the devices, apparatuses, equipment, systems involved in the present disclosure are only as illustrative examples and are not intended to require or imply that the connection, arrangement, configuration must be as shown in the block diagrams. As those skilled in the art will recognize, these devices, apparatuses, equipment, systems can be connected, arranged, configured in any manner. Words such as "include", "contain", "have", and the like are open-ended words, mean "including but not limited to", and can be used interchangeably. The words "or" and "and" used herein mean the word "and / or", and can be used interchangeably unless the context clearly indicates otherwise. The word "such as" used herein means the phrase "such as but not limited to", and can be used interchangeably.
[0199] It is also necessary to point out that in the devices, apparatuses and methods of the present disclosure, each component or each step can be decomposed and / or recombined. These decompositions and / or recombinations should be considered as equivalent solutions of the present disclosure.
[0200] The above description has been given for the purpose of illustration and description. Furthermore, this description is not intended to limit the embodiments of the present disclosure to the forms disclosed herein. Although a number of example aspects and embodiments have been discussed above, those skilled in the art will recognize certain variations, modifications, changes, additions and sub-combinations thereof.
[0201] It can be understood that the various numerical numbers involved in the embodiments of the present application are only for the convenience of differentiation in the description, and are not used to limit the scope of the embodiments of the present application.
Claims
1. A web page diagnosis method characterized by comprising: The method is applied to a first device, and comprises: obtaining a plurality of copies of a target webpage and error information when an error occurs; wherein the plurality of copies comprise a first copy before the error of the target webpage and a second copy when the error occurs; the plurality of copies are used to record page content information and operation information of the target webpage; the operation information indicates operations of a user on the target webpage, and the page content information is used to generate page content; sending the plurality of copies and the error information to a second device, so that the second device generates an image sequence based on the plurality of copies, and the image sequence is used to record respective page contents of the target webpage at at least one first time and respective operation positions of the user on the target webpage at at least one second time; the method further comprises: obtaining device hardware information; wherein the device hardware information at least indicates a condition of hardware processing the target webpage in the first device; obtaining browser information; wherein the browser information comprises a plug-in and / or a running environment of a browser processing the target webpage; sending the device hardware information and the browser information to the second device, so that the second device constructs a virtual device of the first device based on the device hardware information, and generates an image sequence on the virtual device based on the browser information and the plurality of copies.
2. The method of claim 1, wherein, the method further comprises: displaying a first interface; wherein the first interface is used to indicate uploading the plurality of copies and the error information to the second device.
3. The method of claim 1, wherein, the plurality of copies comprise an initial copy of the target webpage and incremental copies of the target webpage relative to the initial copy; and / or the plurality of copies are desensitized copies; and / or, the plurality of copies further comprise network request data, and the network request data comprises at least one request record, the request record comprising a network request for the target webpage and a return value of the network request, so that the second device displays the request record.
4. A web page diagnosis method characterized by comprising: The method is applied to a second device, and comprises: receiving a plurality of copies of a target webpage and error information when an error occurs, which are sent by a first device; wherein the plurality of copies comprise at least one copy before the error of the target webpage and a copy when the error occurs; the plurality of copies are used to record page content information and operation information of the target webpage; the operation information indicates operations of a user on the target webpage, and the page content information is used to generate page content; generating an image sequence based on the plurality of copies, and the image sequence is used to record respective page contents of the target webpage at at least one first time and respective operation positions of the user on the target webpage at at least one second time; the method further comprises: receiving device hardware information sent by the first device; wherein the device hardware information at least indicates a condition of hardware processing the target webpage in the first device; receiving browser information sent by the first device; wherein the browser information comprises a plug-in and / or a running environment of a browser processing the target webpage; the generating of the image sequence based on the plurality of copies comprises: constructing a virtual device of the first device based on the device hardware information, and generating an image sequence based on the browser information and the plurality of copies on the virtual device.
5. The method of claim 4, wherein, The method further comprises: providing a first interface; wherein the first interface is used to instruct the first device to upload the plurality of copies and error information.
6. The method of claim 4, wherein, The plurality of copies comprises an initial copy of the target webpage and an incremental copy of the target webpage relative to the initial copy; and / or, The plurality of copies further comprises network request data, the network request data comprising at least one request record, the request record comprising a network request for the target webpage and a return value of the network request; and / or, The method further comprises: determining, based on the plurality of copies, page reference information corresponding to at least one frame in the image sequence; wherein the page reference information comprises operation records, request records and / or error information; the request records comprise network requests for the target webpage and return values of the network requests, and the operation records comprise operation positions and / or operation types; displaying the image sequence and the page reference information corresponding to at least one frame in the image sequence.
7. A web page diagnosis apparatus characterized by comprising: comprising a processor and a memory; wherein the memory is used to store a program; the processor is used to execute the program stored in the memory, and when the program stored in the memory is executed, the method in any one of claims 1 to 3 or the method in any one of claims 4 to 6 is executed.
8. A web page diagnosis system characterized by comprising: comprising a first device and a second device; wherein the first device is used to execute the method in any one of claims 1 to 3; and the second device is used to execute the method in any one of claims 4 to 6.
Citation Information
Patent Citations
Recording method for webpage and playback method for recorded file
CN111488259A
Methods and devices for identifying tampered webpage and inentifying hijacked web address
US20140380477A1