Embedded frame page debugging method and device, equipment, medium and product
By establishing a message listening component in the parent page and the embedded frame page, the message communication is realized, and debugging instructions are directly sent on the parent page, the problem of low debugging efficiency of cross-domain iframe pages is solved, and simplified operations and efficient debugging are achieved.
Patent Information
- Application Number
- CN202411572022.5
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-11-06
- Publication Date
- 2025-02-14
AI Technical Summary
In front-end development, debugging of cross-domain iframe pages is limited by browser security policies. The existing methods require building a system in the same domain, and the operation steps are cumbersome, resulting in low debugging efficiency.
By establishing a message listening component in the parent page and the embedded frame page, the message communication between the parent page and the embedded frame page is realized, debugging instructions are sent directly from the parent page, instructing the embedded frame tag to perform debugging operations, and complete page debugging.
There is no need to build a system in the same domain, simplify operation steps and improve the debugging efficiency of embedded frame pages.
Smart Images

Figure CN119440997A_ABST
Abstract
Description
Technical Field
[0001] The present application belongs to the field of data processing technology, and in particular, relates to a method, device, equipment, medium and product for debugging an embedded frame page. Background Art
[0002] In front-end development, in order to perform security checks and troubleshoot errors, it is often necessary to debug inline frame (iframe) pages. However, due to the limitations of browser security policies, debugging cross-domain iframe pages has always been a difficult problem.
[0003] In the existing method, a same-domain system is generally built to convert the cross-domain iframe into a same-domain iframe for debugging.
[0004] However, this method requires building a same-domain system corresponding to the cross-domain iframe, and its operation steps are relatively cumbersome, resulting in low debugging efficiency. Summary of the invention
[0005] The embodiments of the present application provide a method, apparatus, device, medium and product for debugging an iframe page, which can improve the debugging efficiency of the iframe page.
[0006] In one aspect of an embodiment of the present application, a method for debugging an iframe page is provided, the method comprising:
[0007] Obtaining an iframe tag list of a parent page, wherein the iframe tag list includes iframe tags and tag identification information of each iframe page corresponding to the parent page, and the iframe tags are used to control and debug the iframe page;
[0008] Establishing a message monitoring component in the parent page and each iframe page, the message monitoring component is used for message communication between the parent page and the iframe page;
[0009] According to the identification information of each tag, the parent page sends a page debugging instruction to each iframe tag in the iframe tag list through a message monitoring component;
[0010] Each iframe tag responds to the page debugging instruction sent by the parent page and respectively performs page debugging operations on the corresponding iframe page to obtain page debugging information corresponding to each iframe page;
[0011] The parent page receives the page debugging information corresponding to each iframe page through the message monitoring component to form a page debugging result.
[0012] In one aspect of an embodiment of the present application, a debugging device for an iframe page is provided, the device comprising:
[0013] A list acquisition module, used to acquire an iframe tag list of a parent page, wherein the iframe tag list includes iframe tags and tag identification information of each iframe page corresponding to the parent page, and the iframe tags are used to control and debug the iframe page;
[0014] An event establishment module is used to establish a message monitoring component module in the parent page and each iframe page, and the message monitoring component is used to communicate messages between the parent page and the iframe page;
[0015] The instruction sending module is used for sending page debugging instructions to each iframe tag in the iframe tag list through the message monitoring component according to the identification information of each tag;
[0016] The page debugging module is used for each iframe tag to respond to the page debugging instruction sent by the parent page, respectively perform page debugging operations on the corresponding iframe pages, and obtain page debugging information corresponding to each iframe page;
[0017] The result generation module is used for the parent page to receive the page debugging information corresponding to each iframe page through the message monitoring component to form the page debugging result.
[0018] In one aspect of an embodiment of the present application, an electronic device is provided, which includes: a memory and a program or instruction stored in the memory and executable on a processor, wherein when the program or instruction is executed by the processor, a method for debugging an embedded frame page as provided in any aspect of the above-mentioned embodiment of the present application is implemented.
[0019] In one aspect of an embodiment of the present application, a readable storage medium is provided, on which a program or instruction is stored. When the program or instruction is executed by a processor, a debugging method for an embedded frame page as provided in any aspect of the above-mentioned embodiment of the present application is implemented.
[0020] In one aspect of an embodiment of the present application, a computer program product is provided. When instructions in the computer program product are executed by a processor of an electronic device, the electronic device executes a method for debugging an embedded frame page as provided in any aspect of the above-mentioned embodiment of the present application.
[0021] In the debugging method of the iframe page provided in the embodiment of the present application, a message listening component is established in the parent page and each iframe page, so that message communication is performed between the parent page and the iframe page through the message listening component. Then, a page debugging instruction is sent to the iframe tag of each iframe page through the parent page. The page debugging operation is performed through the iframe tag, and the page debugging information is collected. Finally, the page debugging information corresponding to the iframe page is received by the parent page to constitute the page debugging result. In this way, the embodiment of the present application realizes message communication between the parent page and the iframe page by establishing a message listening component. The page debugging instruction can be sent directly from the parent page to instruct the iframe tag to perform the page debugging operation and complete the debugging of the iframe page. There is no need to rebuild a same-domain system corresponding to the cross-domain iframe, so that the operation steps can be simplified and the debugging efficiency of the iframe page can be improved. BRIEF DESCRIPTION OF THE DRAWINGS
[0022] In order to more clearly illustrate the technical solution of the embodiments of the present application, the following is a brief introduction to the drawings required for use in the embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without any creative work.
[0023] Figure 1 It is a flowchart of a first method for debugging an iframe page provided in an embodiment of the present application;
[0024] Figure 2 It is a flowchart of a second method for debugging an iframe page provided in an embodiment of the present application;
[0025] Figure 3 It is a flowchart of a third method for debugging an iframe page provided in an embodiment of the present application;
[0026] Figure 4 is a flowchart of a fourth method for debugging an iframe page provided in an embodiment of the present application;
[0027] Figure 5 is a flowchart of a fifth method for debugging an iframe page provided in an embodiment of the present application;
[0028] Figure 6 It is a structural schematic diagram of a debugging device for an iframe page provided in an embodiment of the present application;
[0029] Figure 7 It is a structural schematic diagram of a debugging device for an embedded frame page provided in an embodiment of the present application. DETAILED DESCRIPTION
[0030] The features and exemplary embodiments of each aspect of the present application will be described in detail below. In order to make the purpose, technical solutions and advantages of the present application clearer, the present application will be further described in detail below in conjunction with the accompanying drawings and specific embodiments. It should be understood that the specific embodiments described herein are only intended to explain the present application, rather than to limit the present application. For those skilled in the art, the present application can be implemented without the need for some of these specific details. The following description of the embodiments is only to provide a better understanding of the present application by illustrating the examples of the present application.
[0031] It should be noted that, in this article, relational terms such as first and second, etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, the elements defined by the statement "include..." do not exclude the presence of other identical elements in the process, method, article or device including the elements.
[0032] It should be noted that the acquisition, storage, use, and processing of data in the technical solution of this application are in compliance with the relevant provisions of national laws and regulations.
[0033] It should be noted that in the embodiments of the present application, certain software, components, models and other existing solutions in the industry may be mentioned, and they should be regarded as exemplary. Their purpose is only to illustrate the feasibility of implementing the technical solution of the present application, but it does not mean that the applicant has or will necessarily use the solution.
[0034] In the existing method, a same-domain system is generally built to convert the cross-domain iframe into a same-domain iframe for debugging. However, this method requires building a same-domain system corresponding to the cross-domain iframe, and its operation steps are relatively cumbersome, resulting in low debugging efficiency.
[0035] The purpose of the present application is to provide a debugging method, device, equipment, medium and product for an iframe page. In the debugging method for an iframe page provided in an embodiment of the present application, a message listening component is established in a parent page and each iframe page, so that message communication is performed between the parent page and the iframe page through the message listening component. Then, a page debugging instruction is sent to the iframe tag of each iframe page through the parent page. The page debugging operation is performed through the iframe tag, and the page debugging information is collected. Finally, the page debugging information corresponding to the iframe page is received by the parent page to constitute a page debugging result. In this way, the embodiment of the present application realizes message communication between the parent page and the iframe page by establishing a message listening component. The page debugging instruction can be sent directly from the parent page to instruct the iframe tag to perform the page debugging operation and complete the debugging of the iframe page. There is no need to rebuild a same-domain system corresponding to the cross-domain iframe, so that the operation steps can be simplified and the debugging efficiency of the iframe page can be improved.
[0036] The following describes specific embodiments of the method, device, equipment, medium and product for debugging the embedded frame page provided by the embodiments of the present application.
[0037] First, a specific embodiment of the debugging method of the embedded frame page provided by the embodiment of the present application is introduced. Figure 1 As shown, a flow chart of a method for debugging an inline frame page is provided. The method for debugging an inline frame page is applied to a browser. The browser includes a parent page and an inline frame page corresponding to the parent page. The method for debugging an inline frame page may include the following S101 to S105.
[0038] S101, obtaining an iframe tag list of a parent page, wherein the iframe tag list includes iframe tags and tag identification information of each iframe page corresponding to the parent page, and the iframe tags are used to control and debug the iframe pages.
[0039] In this embodiment, the parent page includes at least one iframe page, each iframe page has a corresponding iframe tag and tag identification information of the iframe tag, wherein the iframe tag list includes the iframe tags of each iframe page and tag identification information of the iframe tags.
[0040] By obtaining all iframe tags contained in the parent page and their corresponding tag identification information, the iframe tags can be used to debug each embedded frame page in the parent page later.
[0041] As an example, the browser traverses and searches for all iframe tags through the document object model structure of the parent page, and records the tag identification information of each iframe tag, wherein the tag identification information may be an ID, a class name, or an index position, etc., for uniquely identifying each iframe tag.
[0042] Then, each iframe tag and the corresponding tag identification information are stored in a list for subsequent use.
[0043] S102: Establish a message monitoring component in the parent page and each iframe page, where the message monitoring component is used to perform message communication between the parent page and the iframe page.
[0044] In this embodiment, the message monitoring component is a channel for message communication between the parent page and the iframe page. By establishing the message monitoring component, two-way communication between the parent page and the iframe page can be achieved to send page debugging instructions and receive page debugging information.
[0045] As an example, the browser creates a message listening component in the parent page to listen to messages from the iframe page and send messages to the iframe page. A message listening component is also created in each iframe page to listen to messages from the parent page and send messages to the parent page.
[0046] Specifically, a message listening component can be created using cross-document communication technologies such as postMessage to implement message transmission between the parent page and the iframe page, so as to ensure that the message listening component can correctly parse and process received messages, including page debugging instructions and page debugging information.
[0047] S103: According to the identification information of each tag, the parent page sends a page debugging instruction to each iframe tag in the iframe tag list through a message monitoring component.
[0048] In this embodiment, the page debugging instruction is used to instruct the iframe page to trigger the page debugging operation. For example, the page debugging instruction can be an instruction to check page elements. The parent page sends a specific page debugging instruction to each iframe page through the message monitoring component, which can trigger it to perform the corresponding debugging operation.
[0049] As an example, the parent page determines the target iframe page to send the page debugging instruction according to the tag identification information included in the iframe tag list, then constructs a message containing the page debugging instruction, and sends the message to the target iframe tag corresponding to the target iframe page through the message monitoring component.
[0050] S104, each iframe tag executes a page debugging operation on a corresponding iframe page in response to a page debugging instruction sent by the parent page, and obtains page debugging information corresponding to each iframe page.
[0051] In this embodiment, the page debugging operation is used to represent the debugging behavior corresponding to the page debugging instruction, and the page debugging information is used to represent the result obtained after executing the page debugging operation. By executing the debugging operation in the iframe page through the iframe tag, the corresponding page debugging information can be collected.
[0052] As an example, after receiving the debugging instruction from the parent page, the target iframe tag parses the instruction and performs corresponding debugging operations. Specifically, the debugging operations may include checking page elements, obtaining page performance data, capturing page exceptions, etc.
[0053] During the debugging process, relevant page debugging information is collected, such as page element information, performance data, exception information, etc. Finally, the collected page debugging information is encapsulated into a message and sent to the parent page through the message listening component.
[0054] S105, the parent page receives the page debugging information corresponding to each iframe page through a message monitoring component to form a page debugging result.
[0055] In this embodiment, the parent page collects and organizes the page debugging information of all iframe pages through the message monitoring component, thereby forming a complete page debugging result.
[0056] As an example, the message monitoring component of the parent page receives messages from each iframe page, parses the message and extracts the page debugging information therein, and associates the page debugging information with the corresponding iframe page according to the tag identification information of the iframe tag.
[0057] Finally, the page debugging information of all iframe pages is integrated together to form a complete page debugging result. At the same time, the page debugging result can be displayed in a certain area of the parent page for developers to view and analyze.
[0058] Through this embodiment, a message listening component is established in the parent page and each iframe page, so that message communication is performed between the parent page and the iframe page through the message listening component. Then, a page debugging instruction is sent to the iframe tag of each iframe page through the parent page. The page debugging operation is performed through the iframe tag, and the page debugging information is collected. Finally, the page debugging information corresponding to the iframe page is received by the parent page to constitute the page debugging result. In this way, the embodiment of the present application realizes message communication between the parent page and the iframe page by establishing a message listening component. The page debugging instruction can be sent directly from the parent page to instruct the iframe tag to perform the page debugging operation and complete the debugging of the iframe page. There is no need to rebuild a same-domain system corresponding to the cross-domain iframe, so that the operation steps can be simplified and the debugging efficiency of the iframe page can be improved.
[0059] As an optional embodiment, the page debugging instructions include at least one of hypertext markup language tag information collection instructions, first error information collection instructions for code execution errors and static resource loading errors, second error information collection instructions for data request errors, and style debugging instructions for page tag elements.
[0060] In this embodiment, the tag information collection instruction is used to collect tag information in a Hypertext Markup Language (HTML) document. The HTML document is composed of a series of tags, which define the structure and content of the iframe page. The tag information collection instruction can be used to parse the HTML document and extract the tag information therein, such as tag name, tag attributes, and hierarchical relationship between tags.
[0061] The first error information collection instruction is used to collect code running errors and static resource loading errors. Specifically, when errors occur when a scripting language such as JavaScript is running in a browser, the first error information collection instruction can capture these errors and collect related first error information. The first error information may include the error type, error description, file name, line number, and column number where the error occurred, etc.
[0062] When static resources (such as images, CSS files, etc.) may have errors during loading, such as file not found, network timeout, etc. The first error information collection instruction can monitor the loading status of these resources and collect related second error information when loading fails. The second error information may include resource type, static resource locator, error description, etc.
[0063] The second error information collection instruction is used to capture and collect errors in asynchronous data request processes such as Ajax or Axios. When sending a data request to the server, the request may fail due to network problems, server errors, or incorrect request parameters. The second error information collection instruction can capture these failed requests and collect related third error information, which may include request resource locator, request method, request parameters, etc.
[0064] Style debugging instructions are mainly used to debug the style of tag elements in web pages. Through style debugging instructions, developers can view and modify the style attributes of tag elements in real time, such as color, font, margin, border, etc.
[0065] Through this embodiment, the page debugging instructions cover multiple aspects such as HTML tag information collection, code running and static resource loading error collection, data request error collection, and page tag element style debugging, etc. It can provide developers with a comprehensive and powerful web page debugging tool, which helps to improve the efficiency and quality of web page development.
[0066] As an optional embodiment, the page debugging instruction is a tag information collection instruction of a hypertext markup language, and the page debugging information includes hypertext markup language tag information, cascading style information and domain name information;
[0067] like Figure 2 As shown, S104 may specifically include the following S201-S204:
[0068] S201, in response to a tag information collection instruction sent by a parent page, obtaining a main tag of a corresponding iframe page, where the main tag is used to define various page tag elements visible to a user in the iframe page;
[0069] S202, adding a target operation event to the main tag of the iframe page;
[0070] S203, monitoring the iframe page after adding the target operation event, and determining whether there is an operation that triggers a target page tag element, where the target page tag element is any one of the page tag elements of the iframe page;
[0071] S204, when there is an operation to trigger the target page tag element, obtaining the hypertext markup language tag information, cascading style information and domain name information corresponding to the target page tag element.
[0072] In this embodiment, the body tag is used to define the main content of the web page. Specifically, all the content between the start tag of the body tag and the end tag of the body tag, such as text, pictures, links, tables and forms, are regarded as the main content of the web page.
[0073] The target operation event is used to characterize the event corresponding to the triggering behavior. For example, the target operation event can be a click event (click), a double-click event (dblclick), a hover event (mouseover / mouseout), an input event (input), etc.
[0074] HyperText Markup Language (HTML) tag information is the basic element that constitutes HTML documents. It is a specific code in HTML language used to mark and define web page content and its structure; Cascading Style Sheets (CSS) is used to define and control the appearance and layout of web page content; domain name information is used to represent the electronic location of the embedded frame page.
[0075] As an example, the iframe tag responds to the tag information collection instruction sent by the parent page, obtains the main tag of the iframe page, and adds a target operation event to the main tag of the iframe page. Specifically, the addEventListener method of JavaScript can be used to bind an event processing function to the main tag of the iframe page.
[0076] Then, the iframe page is continuously monitored to detect whether there is any operation behavior that triggers the target page tag element of the iframe page. Specifically, an event bubbling mechanism can be adopted, and all events triggered on the page tag element will eventually bubble to the main tag.
[0077] Once it is detected that an operation has triggered the target page tag element, the HTML tag information and CSS style information of the target page tag element are collected, and the domain name information of the current iframe page is collected at the same time. Among them, the HTML tag information is stored in the outerHTML attribute of the target page tag element, and the CSS style information is stored in the style attribute of the target page tag element.
[0078] Through this embodiment, a target operation event is added to the main tag of the iframe page, thereby implementing monitoring of the iframe page. In the case of triggering the operation of the target page tag element, the hypertext markup language tag information, cascading style information and domain name information are directly collected. In this way, the iframe page can be debugged directly without rebuilding a same-domain system corresponding to the cross-domain iframe, which can simplify the operation steps and improve the debugging efficiency of the iframe page.
[0079] As an optional embodiment, the page debugging instruction is a first error information collection instruction for code running errors and static resource loading errors;
[0080] like Figure 3 As shown, S104 may specifically include the following S301-S303:
[0081] S301, in response to a first error information collection instruction sent by a parent page, monitoring a page error event of an iframe page, and determining whether an operation that triggers a page error event exists in the iframe page;
[0082] S302, in the case where there is an operation that triggers a page error event, determining an error object type;
[0083] S303: Obtain page debugging information corresponding to the iframe page according to the error object type.
[0084] In this embodiment, the page error event includes two types: code running error and static resource loading error. The error object type is used to indicate whether the page error event belongs to a code running error or a static resource loading error.
[0085] As an example, the iframe tag responds to the first error information collection instruction sent by the parent page and starts monitoring page error events (error events) using JavaScript.
[0086] When the iframe page does trigger a page error event, the page error event will be captured and further analyzed to determine whether the page error event is a code execution error or a static resource loading error.
[0087] Finally, according to whether the page error event is a code running error or a static resource loading error, the corresponding page debugging information is collected.
[0088] Through this embodiment, the page error event of the iframe page is monitored to collect the corresponding page debugging information when the code runs wrong and the static resource loads wrong. In this way, the iframe page can be debugged directly without rebuilding a same-domain system corresponding to the cross-domain iframe, which can simplify the operation steps and improve the debugging efficiency of the iframe page.
[0089] As an optional embodiment, the error object type includes at least one of a code running error and a static resource loading error, and the page debugging information includes at least one of code running error information, static resource locator information, and static resource tag information;
[0090] S303 may specifically include:
[0091] When the error object type is a code execution error, obtain the code execution error information corresponding to the embedded frame page;
[0092] When the error object type is a static resource loading error, the static resource locator information and the static resource tag information corresponding to the iframe page are obtained.
[0093] In this embodiment, when a code execution error occurs in an iframe page, the iframe tag will capture the error event and start collecting code execution error information related to the code execution error. Specifically, the information may include a detailed description of the error, the line number of the code where the error occurs, the function or file where the error occurs, the call stack of the program when the error occurs, etc. Finally, the collected code execution error information is organized into a structured data format and sent to the parent page through the message listening component.
[0094] When a static resource loading error occurs on an iframe page, the iframe tag will capture this error event and start collecting page debugging information related to the static resource loading error. Specifically, it can include static resource locators, resource types, and HTML tag information that attempts to load resources. Finally, the collected static resource locators, resource types, and HTML tag information that attempts to load resources are organized into a structured data format and sent to the parent page through the message listening component.
[0095] Through this embodiment, the page error event of the iframe page is monitored to collect the corresponding page debugging information when the code runs wrong and the static resource loads wrong. In this way, the iframe page can be debugged directly without rebuilding a same-domain system corresponding to the cross-domain iframe, which can simplify the operation steps and improve the debugging efficiency of the iframe page.
[0096] As an optional embodiment, the page debugging instruction is a second error information collection instruction of a data request error, and the page debugging information includes data request failure information, data request parameter information, and data request locator information;
[0097] like Figure 4 As shown, S104 may specifically include the following S401-S403:
[0098] S401, in response to a second error information collection instruction sent by a parent page, obtaining a default error handling mechanism of an iframe page;
[0099] S402, modifying the default error handling mechanism to obtain a proxy error handling mechanism, where the proxy error handling mechanism is used to intercept data request errors;
[0100] S403, obtaining data request failure information, data request parameter information and data request locator information when a data request error occurs through a proxy error handling mechanism.
[0101] In this embodiment, the default error handling mechanism is used to represent a preset mechanism for executing a default operation when a data request error occurs on an iframe page.
[0102] The proxy error handling mechanism is used to describe the modified mechanism for collecting data request error information when a data request error occurs on an iframe page.
[0103] The data request failure information is used to indicate the relevant information corresponding to the failure to successfully obtain the required information when trying to obtain data through the network or other means. Specifically, the data request failure information may include the specific reason for the failure (such as network problems, server errors, etc.), the specific time when the error occurred, etc.
[0104] The data request parameter information is used to represent the data submitted by the client to the server when the client and the server communicate, and is used to describe the client's requirements in detail so that the server can understand and properly process these requests. Specifically, the data request parameter information may include the HTTP method, request header, request body, etc. of the request.
[0105] The data request locator information is used to indicate the unique location of the data request in the network. Specifically, the data request locator information may include a unique ID of the data request, a session ID, or any identifier that can be associated with a specific request and a user.
[0106] As an example, iframe pages usually have their own default error handling mechanism, such as a global onerror event handler or an error callback function set for a specific request. These mechanisms are responsible for performing some basic actions by default when an error occurs, such as displaying an error message, logging, etc.
[0107] When the iframe tag receives the second error information collection instruction sent by the parent page, it will identify and obtain these default error handling mechanisms.
[0108] Then, based on the acquired default error handling mechanism, the iframe tag will create a new proxy function. Specifically, this proxy function will instruct to perform some additional operations, such as logging error information. And the default error handling mechanism in the iframe will be replaced with the newly created proxy function, thus obtaining the proxy error handling mechanism.
[0109] When an error occurs in a data request, the proxy error handling mechanism will be triggered. At this time, the proxy error handling mechanism will first capture and record detailed data request failure information. At the same time, the proxy error handling mechanism also needs to record data request parameter information, which helps to diagnose and reproduce the problem later. In addition, the proxy error handling mechanism also needs to record data request locator information, which helps to quickly locate related error records in the log system.
[0110] Finally, the proxy error handling mechanism passes all the collected information to the parent page through the message listening component so that the parent page can perform further processing or display it to the user.
[0111] Through this embodiment, the default error handling mechanism is modified to obtain a proxy error handling mechanism. Thus, through the proxy error handling mechanism, the data request failure information, data request parameter information and data request locator information are collected when a data request error occurs. Thus, the debugging of the iframe page is directly realized without rebuilding a same-domain system corresponding to the cross-domain iframe, which can simplify the operation steps and improve the debugging efficiency of the iframe page.
[0112] As an optional embodiment, the page debugging instruction is a style debugging instruction of a page tag element, the page debugging information includes current style information of a target page tag element, and the target page tag element is any one of the page tag elements of the iframe page;
[0113] like Figure 5 As shown, S104 may specifically include the following S501-S504:
[0114] S501, in response to a style debugging instruction sent by a parent page, obtaining a body tag of an iframe page, where the body tag is used to define various page tag elements visible to a user in the iframe page;
[0115] S502, adding a context menu event to the main tag of the iframe page;
[0116] S503, when a context menu event is triggered, displaying a list menu, wherein the list menu includes a debug page label element control;
[0117] S504, in response to the triggering operation on the debug page tag element control, obtaining the current style information of the target page tag element.
[0118] In this embodiment, the context menu event (contextmenu event) refers to an event triggered when the user clicks the right button of the mouse or long presses the screen in a specific area. This event allows developers to capture the user's right-click operation and perform corresponding operations in the event processing function, such as popping up a custom list menu.
[0119] The debug page label element control is a button, input box or other interactive element used to indicate viewing or modifying the page label element style.
[0120] The target page label element is used to represent the page label element clicked by the user when the context menu event is triggered.
[0121] The current style information is used to represent the current style setting of the target page tag element. For example, the current style information may include the element's calculated style, inline style, CSS class name, etc.
[0122] As an example, the iframe tag responds to the style debugging instruction sent by the parent page and obtains the main tag inside it through JavaScript. After obtaining the main tag, a contextmenu event listener is added to it through JavaScript. This means that when the user right-clicks the mouse anywhere in the iframe page, a customized list menu can be triggered.
[0123] At the same time, the behavior of the context menu is predefined in JavaScript, such as which options are displayed when the context menu is triggered, how to trigger the selected option, etc., so that the user can correctly display the list menu when the context menu event is triggered. For example, when the context menu event is triggered, a list menu containing a debug page label element control can be dynamically displayed near the location where the user clicks the right button, and the corresponding option is triggered when the control in the list menu is double-clicked.
[0124] Finally, in response to the user selecting the behavior of triggering the debug page tag element control from the list menu, the corresponding target page tag element is determined and the current style information of the target page tag element is obtained.
[0125] Through this embodiment, a context menu event is added to the main tag of the iframe page, so that the current style information of the target page tag element is collected by triggering the context menu event. In this way, the iframe page can be debugged directly without rebuilding a same-domain system corresponding to the cross-domain iframe, which can simplify the operation steps and improve the debugging efficiency of the iframe page.
[0126] As an optional embodiment, the page debugging instruction is a style debugging instruction of a page tag element;
[0127] After S105, the debugging method of the embedded frame page may further include:
[0128] The parent page displays the current style information of the target page tag element in the embedded frame page;
[0129] In response to the user's editing operation on the current style information, obtaining modified style information after editing the current style information;
[0130] The parent page sends the modified style information to the corresponding iframe tag through the message listening component;
[0131] The iframe tag sets the target page tag element according to the modified style information.
[0132] In this embodiment, the modified style information is used to represent the style information obtained after the user modifies the current style information.
[0133] As an example, the parent page obtains the current style information of the target page tag element in the iframe page through the message listening component, and displays the obtained current style information in a visual way on the parent page, such as through a table, form or panel, so that the user can intuitively see the current style.
[0134] At the same time, the parent page provides a user-friendly editing interface that allows users to modify the displayed style information. Specifically, it can include controls such as text boxes, color selectors, and drop-down menus for adjusting CSS properties such as color, font size, margins, etc. The user's editing operations on the style information are captured through event listeners, and the modified style information stored in the state management is updated in real time.
[0135] Finally, the parent page sends the modified style information as a message to the iframe tag through the message listening component. The message should contain the user's complete modified style information so that the iframe tag can accurately identify and apply these style changes. After receiving the modified style information, the iframe tag updates the style of the target page tag element according to the modified style information.
[0136] Through this embodiment, the parent page responds to the user's editing operation on the current style information, obtains the modified style information after the current style information is edited, and sends the modified style information to the corresponding iframe tag, so as to modify the target page tag element of the iframe page. Thus, the iframe page can be debugged directly without rebuilding a same-domain system corresponding to the cross-domain iframe, which can simplify the operation steps and improve the debugging efficiency of the iframe page.
[0137] As an optional embodiment, after S105, the debugging method of the iframe page may further include:
[0138] According to the identification information of each tag, the parent page sends a debugging completion instruction to each iframe tag in the iframe tag list through a message monitoring component;
[0139] Each iframe tag ends the page debugging operation on the iframe page in response to the debugging completion instruction sent by the parent page.
[0140] In this embodiment, the debugging completion instruction is used to instruct the iframe tag to end the debugging behavior of the iframe page.
[0141] As an example, when the parent page determines that debugging operations of all iframe pages have been completed, or the user manually triggers the operation of ending debugging, the parent page will send a debugging completion instruction to each iframe tag in the iframe tag list through the message listening component.
[0142] Specifically, the debugging completion instruction can be a simple string message or an object containing more information. For example, the debugging completion instruction can contain tag identification information of an iframe tag to ensure that the message is received and processed by a correct iframe.
[0143] Then, when the iframe tag receives a debugging completion instruction from the parent page, the corresponding processing function will be called to stop all ongoing debugging activities, which may include stopping the JavaScript debugger, removing the CSS debugging style, closing the debugging tool panel, etc.
[0144] Through this embodiment, when debugging of the iframe page is completed, the parent page sends a debugging completion instruction through the message monitoring component to end the page debugging operation of the iframe page. In this way, the debugging completion instruction is sent in time through the message monitoring component to end the page debugging operation, which can avoid wasting resources.
[0145] As an optional embodiment, each iframe tag ends the page debugging operation on the iframe page in response to the debugging completion instruction sent by the parent page, which may specifically include:
[0146] In the case where the page debugging instruction is a tag information collection instruction, in response to the debugging completion instruction sent by the parent page, the target operation event of the subject tag is cancelled;
[0147] In the case where the page debugging instruction is a first error information collection instruction, in response to a debugging completion instruction sent by the parent page, deregistering a page error event of the iframe page;
[0148] In the case where the page debugging instruction is a second error information collection instruction, in response to a debugging completion instruction sent by the parent page, deregistering the proxy error handling mechanism;
[0149] In the case where the page debugging instruction is a style debugging instruction of a page tag element, in response to a debugging completion instruction sent by the parent page, the context menu event of the main tag is unregistered.
[0150] In this embodiment, if the page debugging instruction is a tag information collection instruction, then after receiving the debugging completion instruction, the iframe tag will deactivate or unregister the target operation event previously registered on the main tag for collecting tag information.
[0151] If the page debugging instruction is the first error information collection instruction, then after receiving the debugging completion instruction, the iframe tag will disable or unregister the error handling event previously registered for capturing page errors.
[0152] If the page debugging instruction is the second error information collection instruction, then after receiving the debugging completion instruction, the iframe tag will disable or unregister the previously enabled proxy error handling mechanism.
[0153] If the page debugging instruction is a style debugging instruction of a page tag element, the iframe tag will disable or unregister the context menu event previously registered for style debugging after receiving the debugging completion instruction.
[0154] According to this embodiment, the iframe tag responds to the debugging completion instruction sent by the parent page and promptly cancels the event registered for debugging the iframe page to end the page debugging operation on the iframe page. In this way, in response to the debugging completion instruction, the page debugging operation is promptly ended, which can avoid wasting resources.
[0155] Debugging method based on iframe page. Accordingly, the present application also provides a specific embodiment of the debugging device of iframe page.
[0156] like Figure 6 As shown, the debugging device 600 for an iframe page provided in an embodiment of the present application includes a list acquisition module 610 , an event establishment module 620 , an instruction sending module 630 , a page debugging module 640 and a result generation module 650 .
[0157] A list acquisition module 610 is used to acquire an iframe tag list of a parent page. The iframe tag list includes iframe tags and tag identification information of each iframe page corresponding to the parent page. The iframe tags are used to control and debug the iframe page.
[0158] An event establishment module 620, used to establish a message monitoring component in the parent page and each iframe page, the message monitoring component is used to perform message communication between the parent page and the iframe page;
[0159] The instruction sending module 630 is used for sending page debugging instructions to each iframe tag in the iframe tag list through the message monitoring component according to the identification information of each tag.
[0160] The page debugging module 640 is used for each iframe tag to respond to the page debugging instruction sent by the parent page, respectively perform page debugging operations on the corresponding iframe pages, and obtain page debugging information corresponding to each iframe page;
[0161] The result generation module 650 is used for the parent page to receive the page debugging information corresponding to each iframe page through the message monitoring component to form a page debugging result.
[0162] As an optional embodiment, the page debugging instruction is a tag information collection instruction of a hypertext markup language, and the page debugging information includes hypertext markup language tag information, cascading style information, and domain name information;
[0163] The page debugging module 640 specifically includes the following units:
[0164] A tag acquisition unit, used to respond to the tag information acquisition instruction sent by the parent page, and acquire the main tag of the corresponding iframe page, where the main tag is used to define various page tag elements visible to the user in the iframe page;
[0165] An event adding unit, used to add a target operation event to the main tag of the iframe page;
[0166] A page monitoring unit is used to monitor the inline frame page after the target operation event is added, and determine whether there is an operation that triggers the target page tag element, where the target page tag element is any one of the page tag elements of the inline frame page;
[0167] The information acquisition unit is used to acquire the hypertext markup language tag information, cascading style information and domain name information corresponding to the target page tag element when there is an operation to trigger the target page tag element.
[0168] As an optional embodiment, the page debugging instruction is a first error information collection instruction for code running errors and static resource loading errors;
[0169] The page debugging module 640 specifically includes the following units:
[0170] An event monitoring unit, configured to monitor a page error event of the inline frame page in response to the first error information collection instruction sent by the parent page, and determine whether there is an operation in the inline frame page that triggers the page error event;
[0171] A type determination unit, for determining the type of an error object in the event that an operation triggering a page error event exists;
[0172] The information acquisition unit is also used to acquire page debugging information corresponding to the iframe page according to the error object type.
[0173] As an optional embodiment, the error object type includes at least one of a code running error and a static resource loading error, and the page debugging information includes at least one of code running error information, static resource locator information, and static resource tag information;
[0174] The information acquisition unit is specifically used for:
[0175] When the error object type is a code execution error, obtain the code execution error information corresponding to the embedded frame page;
[0176] When the error object type is a static resource loading error, the static resource locator information and the static resource tag information corresponding to the iframe page are obtained.
[0177] As an optional embodiment, the page debugging instruction is a second error information collection instruction of a data request error, and the page debugging information includes data request failure information, data request parameter information, and data request locator information;
[0178] The page debugging module 640 specifically includes the following units:
[0179] A mechanism acquisition unit, configured to acquire a default error handling mechanism of the iframe page in response to a second error information collection instruction sent by the parent page;
[0180] A mechanism modification unit is used to modify the default error handling mechanism to obtain a proxy error handling mechanism, and the proxy error handling mechanism is used to intercept data request errors;
[0181] The information acquisition unit is also used to acquire data request failure information, data request parameter information and data request locator information when a data request error occurs through a proxy error handling mechanism.
[0182] As an optional embodiment, the page debugging instruction is a style debugging instruction of a page tag element, the page debugging information includes current style information of a target page tag element, and the target page tag element is any one of the page tag elements of the iframe page;
[0183] The page debugging module 640 specifically includes the following units:
[0184] The tag acquisition unit is further used to respond to the style debugging instruction sent by the parent page and acquire the main tag of the iframe page, where the main tag is used to define various page tag elements visible to the user in the iframe page;
[0185] The event adding unit is also used to add context menu events to the body tag of the iframe page;
[0186] A menu display unit, used to display a list menu when a context menu event is triggered, wherein the list menu includes a debug page label element control;
[0187] The information acquisition unit is also used to acquire the current style information of the target page tag element in response to the triggering operation of the debug page tag element control.
[0188] As an optional embodiment, the page debugging instruction is a style debugging instruction of a page tag element;
[0189] The parent page receives the page debugging information corresponding to each iframe page through the message monitoring component, and after forming the page debugging result, the iframe page debugging device 600 further includes the following modules:
[0190] The information display module is used for the parent page to display the current style information of the target page tag element in the embedded frame page;
[0191] The information editing module is used to obtain modified style information after editing the current style information in response to the user's editing operation on the current style information;
[0192] The information sending module is used for the parent page to send the modified style information to the corresponding iframe tag through the message listening component;
[0193] The element setting module is used for the inline frame tag to set the target page tag element according to the modified style information.
[0194] As an optional embodiment, the parent page receives the page debugging information corresponding to each iframe page through a message monitoring component, and after forming the page debugging result, the iframe page debugging device 600 further includes the following modules:
[0195] The instruction sending module 630 is further used to send the debugging completion instruction to each iframe tag in the iframe tag list through the message monitoring component according to the identification information of each tag;
[0196] The debugging end module is used for each iframe tag to respond to the debugging completion instruction sent by the parent page to end the page debugging operation on the iframe page.
[0197] As an optional embodiment, the debugging end module is specifically used for:
[0198] In the case where the page debugging instruction is a tag information collection instruction, in response to the debugging completion instruction sent by the parent page, the target operation event of the subject tag is cancelled;
[0199] In the case where the page debugging instruction is a first error information collection instruction, in response to a debugging completion instruction sent by the parent page, deregistering a page error event of the iframe page;
[0200] In the case where the page debugging instruction is a second error information collection instruction, in response to a debugging completion instruction sent by the parent page, deregistering the proxy error handling mechanism;
[0201] In the case where the page debugging instruction is a style debugging instruction of a page tag element, in response to a debugging completion instruction sent by the parent page, the context menu event of the main tag is unregistered.
[0202] Debugging method based on iframe page. Accordingly, the present application also provides a specific embodiment of the debugging device of iframe page.
[0203] Figure 7 A schematic diagram of the hardware structure of an iframe page debugging device provided in an embodiment of the present application is shown.
[0204] The debugging device of the iframe page may include a processor 701 and a memory 702 storing computer program instructions.
[0205] Specifically, the processor 701 may include a central processing unit (CPU), or an application specific integrated circuit (ASIC), or may be configured to implement one or more integrated circuits of the embodiments of the present application.
[0206] The memory 702 may include a large capacity memory for data or instructions. By way of example and not limitation, the memory 702 may include a hard disk drive (HDD), a floppy disk drive, a flash memory, an optical disk, a magneto-optical disk, a magnetic tape, or a universal serial bus (USB) drive or a combination of two or more of these. In appropriate cases, the memory 702 may include a removable or non-removable (or fixed) medium. In appropriate cases, the memory 702 may be inside or outside the integrated gateway disaster recovery device. In a specific embodiment, the memory 702 is a non-volatile solid-state memory.
[0207] The processor 701 reads and executes the computer program instructions stored in the memory 702 to implement any one of the iframe page debugging methods in the above embodiments.
[0208] In one example, the debugging device of the iframe page may further include a communication interface 703 and a bus 710. Figure 7 As shown, the processor 701, the memory 702, and the communication interface 703 are connected via a bus 710 and communicate with each other.
[0209] The communication interface 703 is mainly used to implement communication between each module, device, unit and / or equipment in the embodiment of the present application.
[0210] Bus 710 includes hardware, software or both, and the parts of the debugging device of the iframe page are coupled to each other. For example, but not limitation, the bus may include accelerated graphics port (AGP) or other graphics bus, enhanced industrial standard architecture (EISA) bus, front-side bus (FSB), hypertransport (HT) interconnection, industrial standard architecture (ISA) bus, infinite bandwidth interconnection, low pin count (LPC) bus, memory bus, micro channel architecture (MCA) bus, peripheral component interconnection (PCI) bus, PCI-Express (PCI-X) bus, serial advanced technology attachment (SATA) bus, video electronics standard association local (VLB) bus or other suitable bus or two or more of these combinations. In appropriate cases, bus 310 may include one or more buses. Although the present application embodiment describes and shows a specific bus, the present application considers any suitable bus or interconnection.
[0211] In addition, in combination with the debugging method of the iframe page in the above embodiment, the embodiment of the present application can provide a computer storage medium for implementation. The computer storage medium stores computer program instructions; when the computer program instructions are executed by the processor, any one of the debugging methods of the iframe page in the above embodiment is implemented.
[0212] In addition, in combination with the debugging method of the embedded frame page in the above-mentioned embodiment, the embodiment of the present application can provide a computer program product to implement it. When the instructions in the computer program product are executed by the processor of the electronic device, the electronic device executes the debugging method of the embedded frame page provided by any aspect of the above-mentioned embodiment of the present application.
[0213] It should be clear that the present application is not limited to the specific configuration and processing described above and shown in the figures. For the sake of simplicity, a detailed description of the known method is omitted here. In the above embodiments, several specific steps are described and shown as examples. However, the method process of the present application is not limited to the specific steps described and shown, and those skilled in the art can make each change, modification and addition, or change the order between the steps after understanding the spirit of the present application.
[0214] The functional blocks shown in the above-described block diagram can be implemented as hardware, software, firmware or a combination thereof. When implemented in hardware, it can be, for example, an electronic circuit, an application specific integrated circuit (ASIC), appropriate firmware, a plug-in, a function card, etc. When implemented in software, the elements of the present application are programs or code segments that are used to perform the required tasks. The program or code segment can be stored in a machine-readable medium, or transmitted on a transmission medium or a communication link by a data signal carried in a carrier wave. "Machine-readable medium" can include any medium capable of storing or transmitting information. Examples of machine-readable media include electronic circuits, semiconductor memory devices, ROM, flash memory, erasable ROM (EROM), floppy disks, CD-ROMs, optical disks, hard disks, optical fiber media, radio frequency (RF) links, etc. The code segment can be downloaded via a computer network such as the Internet, an intranet, etc.
[0215] It should also be noted that the exemplary embodiments mentioned in this application describe some methods or systems based on a series of steps or devices. However, this application is not limited to the order of the above steps, that is, the steps can be performed in the order mentioned in the embodiment, or in a different order from the embodiment, or several steps can be performed simultaneously.
[0216] Each aspect of the present disclosure is described above with reference to the flowchart and / or block diagram of the method, device (system) and computer program product according to the embodiment of the present disclosure. It should be understood that each box in the flowchart and / or block diagram and the combination of each box in the flowchart and / or block diagram can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, or other programmable data processing device to produce a machine so that these instructions executed by the processor of the computer or other programmable data processing device enable the implementation of the function / action specified in one or more boxes of the flowchart and / or block diagram. Such a processor can be, but is not limited to, a general-purpose processor, a special-purpose processor, a special application processor, or a field programmable logic circuit. It can also be understood that each box in the block diagram and / or flowchart and the combination of boxes in the block diagram and / or flowchart can also be implemented by dedicated hardware that performs a specified function or action, or can be implemented by a combination of dedicated hardware and computer instructions.
[0217] The above is only a specific implementation of the present application. Those skilled in the art can clearly understand that for the convenience and simplicity of description, the specific working processes of the systems, modules and units described above can refer to the corresponding processes in the aforementioned method embodiments, and will not be repeated here. It should be understood that the protection scope of the present application is not limited to this. Any technician familiar with the technical field can easily think of each equivalent modification or replacement within the technical scope disclosed in the present application, and these modifications or replacements should be included in the protection scope of the present application.
Claims
1. A method for debugging an iframe page, characterized in that: Applied to a browser, the browser includes a parent page and an iframe page corresponding to the parent page, the method includes: Acquire an iframe tag list of the parent page, wherein the iframe tag list includes iframe tags and tag identification information of each iframe page corresponding to the parent page, and the iframe tags are used to control and debug the iframe page; Establishing a message monitoring component in the parent page and each of the inline frame pages, the message monitoring component is used to perform message communication between the parent page and the inline frame page; According to each tag identification information, the parent page sends a page debugging instruction to each iframe tag in the iframe tag list through the message monitoring component; Each of the iframe tags executes a page debugging operation on the corresponding iframe page in response to the page debugging instruction sent by the parent page, and obtains page debugging information corresponding to each of the iframe pages; The parent page receives the page debugging information corresponding to each of the iframe pages through the message monitoring component to form a page debugging result.
2. The method according to claim 1, characterized in that The page debugging instructions include at least one of a tag information collection instruction of a hypertext markup language, a first error information collection instruction of a code running error and a static resource loading error, a second error information collection instruction of a data request error, and a style debugging instruction of a page tag element.
3. The method according to claim 2, characterized in that The page debugging instruction is a tag information collection instruction of a hypertext markup language, and the page debugging information includes hypertext markup language tag information, cascading style information and domain name information; Each of the iframe tags responds to the page debugging instruction sent by the parent page, performs page debugging operations on the corresponding iframe pages, and obtains page debugging information corresponding to each of the iframe pages, including: In response to the tag information collection instruction sent by the parent page, obtaining a main tag of the corresponding inline frame page, wherein the main tag is used to define various page tag elements visible to a user in the inline frame page; Adding a target operation event to the main tag of the inline frame page; Monitoring the inline frame page after adding the target operation event to determine whether there is an operation that triggers a target page tag element, where the target page tag element is any one of the page tag elements of the inline frame page; In the case that there is an operation to trigger the target page tag element, hypertext markup language tag information, cascading style information and domain name information corresponding to the target page tag element are obtained.
4. The method according to claim 2, characterized in that: The page debugging instruction is a first error information collection instruction for code running errors and static resource loading errors; Each of the iframe tags responds to the page debugging instruction sent by the parent page, performs page debugging operations on the corresponding iframe pages, and obtains page debugging information corresponding to each of the iframe pages, including: In response to the first error information collection instruction sent by the parent page, monitoring a page error event of the inline frame page to determine whether the inline frame page has an operation that triggers the page error event; In the case where there is an operation that triggers the page error event, determining an error object type; According to the error object type, page debugging information corresponding to the iframe page is obtained.
5. The method according to claim 4, characterized in that The error object type includes at least one of a code running error and a static resource loading error, and the page debugging information includes at least one of code running error information, static resource locator information, and static resource tag information; The acquiring, according to the error object type, page debugging information corresponding to the iframe page includes: In the case where the error object type is a code execution error, obtaining code execution error information corresponding to the iframe page; When the error object type is a static resource loading error, the static resource locator information and the static resource tag information corresponding to the iframe page are obtained.
6. The method according to claim 2, characterized in that The page debugging instruction is a second error information collection instruction for a data request error, and the page debugging information includes data request failure information, data request parameter information, and data request locator information; Each of the iframe tags responds to the page debugging instruction sent by the parent page, performs page debugging operations on the corresponding iframe pages, and obtains page debugging information corresponding to each of the iframe pages, including: In response to the second error information collection instruction sent by the parent page, acquiring a default error handling mechanism of the iframe page; Modifying the default error handling mechanism to obtain a proxy error handling mechanism, wherein the proxy error handling mechanism is used to intercept data request errors; Through the proxy error handling mechanism, data request failure information, data request parameter information and data request locator information are obtained when a data request error occurs.
7. The method according to claim 2, characterized in that: The page debugging instruction is a style debugging instruction of a page tag element, and the page debugging information includes current style information of a target page tag element, and the target page tag element is any one of the page tag elements of the inline frame page; Each of the iframe tags responds to the page debugging instruction sent by the parent page, performs page debugging operations on the corresponding iframe pages, and obtains page debugging information corresponding to each of the iframe pages, including: In response to the style debugging instruction sent by the parent page, obtaining a body tag of the iframe page, wherein the body tag is used to define various page tag elements visible to a user in the iframe page; Adding a context menu event to the main tag of the iframe page; In the case where the context menu event is triggered, a list menu is displayed, wherein the list menu includes a debug page label element control; In response to the triggering operation on the debugging page tag element control, the current style information of the target page tag element is obtained.
8. The method according to claim 7, characterized in that The page debugging instruction is a style debugging instruction of a page tag element; The parent page receives the page debugging information corresponding to each of the iframe pages through the message monitoring component, and after forming the page debugging result, the method further includes: The parent page displays the current style information of the target page tag element in the inline frame page; In response to a user's editing operation on the current style information, obtaining modified style information after editing the current style information; The parent page sends the modified style information to the corresponding inline frame tag through the message monitoring component; The iframe tag sets the target page tag element according to the modified style information.
9. The method according to any one of claims 1 to 8, characterized in that: The parent page receives the page debugging information corresponding to each of the iframe pages through the message monitoring component, and after forming the page debugging result, the method further includes: According to each tag identification information, the parent page sends a debugging completion instruction to each iframe tag in the iframe tag list through the message monitoring component; Each of the iframe tags terminates the page debugging operation on the iframe page in response to the debugging completion instruction sent by the parent page.
10. The method according to claim 9, characterized in that Each of the iframe tags terminates the page debugging operation on the iframe page in response to the debugging completion instruction sent by the parent page, including: In the case where the page debugging instruction is a tag information collection instruction, in response to the debugging completion instruction sent by the parent page, deregistering the target operation event of the subject tag; In the case where the page debugging instruction is a first error information collection instruction, in response to a debugging completion instruction sent by the parent page, deregistering a page error event of the iframe page; In the case where the page debugging instruction is a second error information collection instruction, in response to a debugging completion instruction sent by the parent page, deregistering the proxy error handling mechanism; In the case where the page debugging instruction is a style debugging instruction of a page tag element, in response to a debugging completion instruction sent by the parent page, the context menu event of the main tag is unregistered.
11. A debugging device for an iframe page, characterized in that: Applied to a browser, the browser includes a parent page and an iframe page corresponding to the parent page, the device includes: A list acquisition module, used for acquiring an iframe tag list of the parent page, wherein the iframe tag list includes iframe tags and tag identification information of each iframe page corresponding to the parent page, and the iframe tags are used for controlling and debugging the iframe page; An event establishment module, used to establish a message monitoring component in the parent page and each of the inline frame pages, wherein the message monitoring component is used to perform message communication between the parent page and the inline frame page; An instruction sending module, configured to send page debugging instructions to each of the iframe tags in the iframe tag list through the message monitoring component according to the tag identification information; A page debugging module, configured for each of the iframe tags to respond to the page debugging instruction sent by the parent page, respectively perform page debugging operations on the corresponding iframe pages, and obtain page debugging information corresponding to each of the iframe pages; The result generating module is used for the parent page to receive the page debugging information corresponding to each of the iframe pages through the message monitoring component to form a page debugging result.
12. An electronic device, characterized in that: The device comprises: a processor and a memory storing computer program instructions; When the processor executes the computer program instructions, the method for debugging an iframe page according to any one of claims 1 to 10 is implemented.
13. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer program instructions, and when the computer program instructions are executed by a processor, the method for debugging an iframe page according to any one of claims 1 to 10 is implemented.
14. A computer program product, characterized in that When the instructions in the computer program product are executed by a processor of an electronic device, the electronic device executes the debugging method for an iframe page as described in any one of claims 1 to 10.