CN112948245B - Element debugging method, device, equipment, storage medium and program product - Google Patents
Element debugging method, device, equipment, storage medium and program product Download PDFInfo
- Publication number
- CN112948245B CN112948245B CN202110218504.0A CN202110218504A CN112948245B CN 112948245 B CN112948245 B CN 112948245B CN 202110218504 A CN202110218504 A CN 202110218504A CN 112948245 B CN112948245 B CN 112948245B
- Authority
- CN
- China
- Prior art keywords
- debugger
- simulator
- debugging
- instruction
- target element
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 54
- 230000006854 communication Effects 0.000 claims abstract description 99
- 238000004891 communication Methods 0.000 claims abstract description 98
- 238000009877 rendering Methods 0.000 claims abstract description 12
- 230000004044 response Effects 0.000 claims description 18
- 238000007689 inspection Methods 0.000 claims description 17
- 238000012545 processing Methods 0.000 claims description 17
- 230000007246 mechanism Effects 0.000 claims description 10
- 238000012552 review Methods 0.000 claims description 4
- 230000000873 masking effect Effects 0.000 claims 2
- 238000011161 development Methods 0.000 abstract description 3
- 238000004590 computer program Methods 0.000 description 13
- 238000010586 diagram Methods 0.000 description 11
- 230000006870 function Effects 0.000 description 5
- 230000003993 interaction Effects 0.000 description 3
- 238000012986 modification Methods 0.000 description 3
- 230000004048 modification Effects 0.000 description 3
- 230000003287 optical effect Effects 0.000 description 3
- 230000008569 process Effects 0.000 description 3
- VYZAMTAEIAYCRO-UHFFFAOYSA-N Chromium Chemical compound [Cr] VYZAMTAEIAYCRO-UHFFFAOYSA-N 0.000 description 1
- 238000003491 array Methods 0.000 description 1
- 238000013473 artificial intelligence Methods 0.000 description 1
- 230000001413 cellular effect Effects 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000011423 initialization method Methods 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 238000010801 machine learning Methods 0.000 description 1
- 238000012544 monitoring process Methods 0.000 description 1
- 239000013307 optical fiber Substances 0.000 description 1
- 239000004065 semiconductor Substances 0.000 description 1
- 230000001953 sensory effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 230000009466 transformation Effects 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/36—Preventing errors by testing or debugging software
- G06F11/362—Software debugging
- G06F11/3648—Software debugging using additional hardware
- G06F11/3652—Software debugging using additional hardware in-circuit-emulation [ICE] arrangements
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/36—Preventing errors by testing or debugging software
- G06F11/362—Software debugging
- G06F11/3648—Software debugging using additional hardware
- G06F11/3656—Software debugging using additional hardware using a specific debug interface
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Computer Hardware Design (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Quality & Reliability (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- Debugging And Monitoring (AREA)
Abstract
The application discloses an element debugging method, an element debugging device, element debugging equipment, a storage medium and a program product, and relates to the field of developer tools and applet development. The method is applied to electronic equipment, the electronic equipment comprises a simulator and a debugger, and the simulator and the debugger are iframe elements, and the method comprises the following steps: acquiring first debugging protocol data from a simulator through an iframe communication interface of the debugger; rendering in a debugger according to the first debugging protocol data to obtain element nodes; responding to an operation instruction received by a debugger, and sending a debugging instruction to a simulator through an iframe communication interface of the debugger; and executing the operation corresponding to the debugging instruction through the simulator so as to debug the element corresponding to the element node. The method realizes the debugging of DOM elements in the iframe elements in the web page.
Description
Technical Field
The embodiment of the application relates to a developer tool technology, in particular to an element debugging method, an element debugging device, element debugging equipment, a storage medium and a program product, which can be used in the field of applet development.
Background
The document object model (Document Object Model, DOM) element debugging is to connect the debugged window through the debugger, so as to debug the DOM element in the debugged window, and the debugger and the debugged window usually communicate in a websocket or inter-process communication (InterProcess Communication, IPC) mode.
However, in a developer tool of a web page (web) version, the debugged window (i.e., the simulator) is an iframe element, and the iframe has no websocket or IPC interface, so that the connection to the debugger is not possible, which results in that the DOM element in the simulator cannot be debugged.
Disclosure of Invention
The application provides an element debugging method, device, equipment, storage medium and program product for realizing the debugging of DOM elements in iframe elements in web pages.
According to an aspect of the present application, there is provided an element debugging method applied to an electronic device, where the electronic device includes a simulator and a debugger, and the simulator and the debugger are both iframe elements, and the method includes:
acquiring first debugging protocol data from the simulator through an iframe communication interface of the debugger;
rendering in the debugger to obtain element nodes according to the first debugging protocol data;
Responding to an operation instruction received by the debugger, and sending a debugging instruction to the simulator through an iframe communication interface of the debugger;
and executing the operation corresponding to the debugging instruction through the simulator so as to debug the element corresponding to the element node.
According to another aspect of the present application, there is provided an element debugging apparatus applied to an electronic device, the electronic device including a simulator and a debugger, the simulator and the debugger being both iframe elements, the apparatus including:
the acquisition module is used for acquiring first debugging protocol data from the simulator through an iframe communication interface of the debugger;
the display module is used for rendering and obtaining element nodes in the debugger according to the first debugging protocol data;
the sending module is used for responding to the operation instruction received by the debugger and sending a debugging instruction to the simulator through an iframe communication interface of the debugger;
and the processing module is used for executing the operation corresponding to the debugging instruction through the simulator so as to debug the element corresponding to the element node.
According to still another aspect of the present application, there is provided an electronic apparatus including:
At least one processor; and
a memory communicatively coupled to the at least one processor; wherein,
the memory stores instructions executable by the at least one processor to enable the at least one processor to perform the method of the first aspect described above.
According to a further aspect of the present application, there is provided a non-transitory computer readable storage medium storing computer instructions for causing the computer to perform the method of the first aspect described above.
According to yet another aspect of the present application, there is provided a computer program product comprising: a computer program stored in a readable storage medium, from which it can be read by at least one processor of an electronic device, the at least one processor executing the computer program causing the electronic device to perform the method of the first aspect.
According to the technical scheme, the DOM element in the iframe element in the webpage is debugged.
It should be understood that the description of this section is not intended to identify key or critical features of the embodiments of the application or to delineate the scope of the application. Other features of the present application will become apparent from the description that follows.
Drawings
The drawings are for better understanding of the present solution and do not constitute a limitation of the present application. Wherein:
FIG. 1 is a flow diagram of an element debugging method provided according to an embodiment of the present application;
FIG. 2 is a schematic diagram I of a simulator and debugger provided according to embodiments of the present application;
FIG. 3 is a schematic diagram II of a simulator and debugger provided according to embodiments of the present application;
FIG. 4 is a schematic diagram III of a simulator and debugger provided according to embodiments of the present application;
FIG. 5 is a schematic diagram IV of a simulator and debugger provided according to embodiments of the present application;
FIG. 6 is a schematic diagram five of a simulator and debugger provided according to embodiments of the present application;
FIG. 7 is a schematic diagram of a structure of an element debugging device provided according to an embodiment of the present application;
fig. 8 is a schematic block diagram of an electronic device used to implement the element debugging method of an embodiment of the present application.
Detailed Description
Exemplary embodiments of the present application are described below in conjunction with the accompanying drawings, which include various details of the embodiments of the present application to facilitate understanding, and should be considered as merely exemplary. Accordingly, one of ordinary skill in the art will recognize that various changes and modifications of the embodiments described herein can be made without departing from the scope and spirit of the present application. Also, descriptions of well-known functions and constructions are omitted in the following description for clarity and conciseness.
The element debugging method provided by the embodiment of the invention can be applied to scenes of DOM elements of iframe elements in the webpage to be debugged. By way of example, the simulator in the web page version developer tool is a tool for simulating and displaying a development page, and the simulator in the web page version developer tool is an iframe element in a web page, and when debugging a DOM element in the simulator, the simulator needs to be connected by a debugger, and the element in the simulator can be displayed, checked or edited by the debugger.
Since the debugger of the open source in the related art usually adopts websocket or IPC to communicate with the simulator, but the iframe does not have websocket or IPC communication interface, for example, the debugger adopts websocket to connect with websocket debuguer of the debugged window, but the iframe does not have websocket debuguer, which results in that the simulator of the iframe element cannot directly communicate with the debugger to complete the debugging.
In order to debug the DOM element in the iframe element in the web page, in the embodiment of the present application, it is proposed that an open-source debugger, for example, a chrome devtools debugger, is introduced into the web page of the simulator through an iframe, and the communication mode of the debugger is modified, and the websocket communication mechanism originally adopted by the open-source debugger is modified to adopt the iframe communication mechanism, that is, the communication method in the code of the debugger is modified. For example, in the open source debugger, the websocket.onmessage originally adopted when receiving data is changed into a window.addEventListener, and the websocket.send originally adopted when sending data is changed into a window.parent.postMessage. Therefore, the simulator and the debugger in the webpage are both iframe elements, and the debugger adopts an iframe communication mechanism to communicate with the simulator, so that the debugging of DOM elements in the iframe elements can be realized on the basis.
After the communication mechanism of the debugger is modified, codes communicated with the debugger are loaded in the simulator, and information interaction in the debugging process is realized based on the codes. For example, code in the simulator for enabling communication with the debugger may include the following major parts:
salve-page. Js: and the master file controls the sending and receiving of the debugging information.
dom-store. Js: simulating the debugging protocol of DOM element nodes.
css-store. Js: debug protocols of cascading style sheets (Cascading Style Sheets, CSS) of DOM element nodes are simulated.
observer. Js: monitoring changes of DOM elements in the page.
utils.dom.js: tool function files.
highlight. Js: the simulated element node is highlighted.
inspector. Js: the control element examines the switch.
For the simulator in the form of the iframe element in a webpage, after the debugger is introduced into the webpage and the transformation is carried out according to the method, the communication between the simulator and the debugger can be realized, and the related debugging is carried out. The element debugging method provided by the application will be described in detail through specific embodiments. It is to be understood that the following embodiments may be combined with each other and that some embodiments may not be repeated for the same or similar concepts or processes.
Fig. 1 is a flow chart of an element debugging method according to an embodiment of the present application. The execution main body of the method is electronic equipment, the electronic equipment comprises a simulator and a debugger, and the simulator and the debugger are iframe elements in a webpage. As shown in fig. 1, the method includes:
s101, acquiring first debugging protocol data from a simulator through an iframe communication interface of the debugger.
In this step, the iframe communication interface of the debugger refers to an iframe interface after the original websocket communication mechanism of the debugger with an open source is modified to the iframe communication mechanism according to the foregoing method, and the iframe communication interface of the debugger is used to communicate with the simulator, so as to obtain first debug protocol data from the simulator, where the first debug protocol data includes element information in the simulator.
S102, rendering in a debugger according to the first debugging protocol data to obtain element nodes.
Element nodes are rendered in the debugger according to the element information in the first debugging protocol data, and as illustrated in fig. 2, for example, an intelligent applet page is simulated to be displayed in the simulator 21, the element information in the applet page is sent to the debugger 22 as the first debugging protocol data through the simulator 21, and the element nodes of the applet page are rendered in an element (Elements) panel 221 of the debugger 22.
S103, responding to the operation instruction received by the debugger, and sending the debugging instruction to the simulator through an iframe communication interface of the debugger.
S104, executing the operation corresponding to the debugging instruction through the simulator so as to debug the element corresponding to the element node.
The operation instruction received by the debugger can be the operation of the element node displayed in the debugger or the triggering operation of other functions provided by the debugger, different operation instructions correspond to different debugging instructions, and a user can input the operation instruction through the debugger, so that the debugging instruction is sent to the simulator through an iframe communication interface of the debugger, and the operation corresponding to the debugging instruction is executed through the simulator, so that the debugging of the element node is realized.
The element debugging method provided by the embodiment is applied to a simulator presented by an iframe element in a webpage, the debugger is introduced into another iframe in the webpage, and the debugger is modified into an iframe communication mechanism, so that the communication between the debugger and the simulator is realized, element information is acquired from the simulator through an iframe communication interface of the debugger, element nodes are rendered, and the element corresponding to the element nodes is debugged based on an operation instruction of the debugger. The local communication is realized by adopting the iframe communication mechanism, and communication delay possibly caused by a server is avoided.
The element debugging method is described with reference to specific examples on the basis of the above embodiments.
Optionally, after loading of the simulator is completed, an initialization signal is sent to the debugger through an iframe communication interface of the simulator; responding to an initialization signal received by a debugger, and sending a first debugging instruction for acquiring element node information to a simulator through an iframe communication interface of the debugger; and sending first debugging protocol data corresponding to the first debugging instruction to the debugger through an iframe communication interface of the simulator, and further rendering to obtain element nodes in the debugger.
For example, after the simulator iframe element is loaded, an initialization signal is sent to the debugger through the iframe communication interface, the debugger receives the initialization signal and then invokes an initialization method to initialize, after initialization is completed, a first debug instruction is sent to the simulator through the iframe communication interface of the debugger, for example, a DOM.getdocument event is sent to the simulator, after the simulator receives the DOM.getdocument event, the simulator invokes a getdocument () method in the dom-store.js, corresponding first debug protocol data is returned to the debugger, and then element nodes are rendered in an Elements panel of the debugger. And rendering the element nodes through the Elements panel after the initialization is finished, so that a user can debug the element nodes based on the displayed element nodes.
The following further describes the communication process between the debugger and the simulator in S103 and S104 after the Elements panel of the debugger renders the element nodes.
Optionally, in response to the first operation instruction of clicking the target element node received by the debugger, sending a second debugging instruction for obtaining style information of the target element corresponding to the target element node to the simulator through an iframe communication interface of the debugger; sending second debugging protocol data corresponding to a second debugging instruction to the debugger through an iframe communication interface of the simulator; and displaying style information of the target element in the debugger according to the second debugging protocol data.
When a user clicks a target element node in the Elements panel, a second debugging instruction is sent to the simulator through an iframe communication interface of the debugger to acquire style information, namely CSS information, of the target element corresponding to the target element node, and the simulator sends CSS, getMatchedStylesForNodes, CSS, getComputedStyleF ORNode, CSS, getInlineStylesFornode events to the simulator in sequence, and after receiving the events, the simulator sends corresponding second debugging protocol data to the debugger, so that style information is displayed in the panel of the debugger, and the user can debug the element based on the displayed style information. By way of example, as shown in FIG. 3, style information for a target element may be displayed in Styles panel 222 and Computed panel 223 of debugger 22.
Optionally, in response to the second operation instruction of expanding the target element node received by the debugger, sending a third debugging instruction of obtaining the child node of the target element node to the simulator through the iframe communication interface of the debugger; transmitting third debugging protocol data corresponding to a third debugging instruction to the debugger through an iframe communication interface of the simulator; and rendering the child node of the target element node in the debugger according to the third debugging protocol data.
When a user expands a target element node in the Elements panel, a third debugging instruction is sent to the simulator through an iframe communication interface of the debugger to acquire a child node of the target element node, and the simulator sends a DOM.RequestChildnodes event to the simulator, and after receiving the event, the simulator sends corresponding third debugging protocol data to the debugger, so that the child node of the target element node is rendered in the Elements panel of the debugger, and the user can debug the element node and the child node. By way of example, as shown in fig. 4, a child node, which is a target element node, is shown below the target element node, as partially indicated by the dashed line.
Optionally, in response to a third operation instruction received by the debugger to move the mouse to the target element node, sending a fourth debugging instruction of the target element corresponding to the mask target element node to the simulator through an iframe communication interface of the debugger; according to the fourth debug instruction, a mask layer is generated on the target element in the simulator.
Correspondingly, responding to a fourth operation instruction received by the debugger for removing the mouse from the target element node, and sending a fifth debugging instruction for hiding the mask layer to the simulator through an iframe communication interface of the debugger; according to the fifth debug instruction, the mask layer is hidden in the simulator.
When the user moves the middle mouse to the target element node in the Elements panel, the debugger sends a fourth debugging instruction to the simulator to mask the target element corresponding to the target element node, and for example, the debugger sends an "overlay. Highlight node" event to the simulator, and after receiving the event, the simulator calls the highlight dot method in the insactor. Js to draw a mask layer on the target element, and for example, please refer to fig. 5. When the mouse is moved out of the target element node in the Elements panel, the debugger sends a fifth debugging instruction to the simulator to hide the mask layer, and by way of example, the debugger sends an "overlay. The element states are convenient for users to check through the illustration and the hiding of the mask layer, and the debugging is convenient.
Optionally, in response to the fifth operation instruction received by the debugger and triggering the inspection mode, sending a sixth debugging instruction for starting the inspection mode to the simulator through an iframe communication interface of the debugger; according to the sixth debug instruction, a censoring mode of the simulator is turned on, the censoring mode being used to locate the element node.
In an example, the "small arrow" icon in the upper left corner of the debugger is a button for triggering the inspection mode, after the user clicks the icon, the debugger sends a sixth debug instruction to the simulator to instruct the simulator to start the inspection mode, and in an example, the debugger sends an "overlay. SetInjectMode" event to the simulator, and after the simulator receives the event, the simulator starts the inspection mode.
In the inspection mode, responding to a sixth operation instruction received by the simulator for moving the mouse to the target element, highlighting the target element in the simulator, and sending a seventh debugging instruction for positioning a target element node corresponding to the target element to the debugger through an iframe communication interface of the simulator; according to the seventh debug instruction, the target element node is located in the debugger.
For example, in the censored mode, when the user moves the mouse over a target element in the simulator, the simulator highlights the target element and sends a seventh debug instruction to the debugger to locate the target element node corresponding to the target element in the debugger, and for example, the simulator sends "dom. Setchildnodes" and "overlay. Nod light request" events to the debugger so that the Elements panel in the debugger can be developed in the element node tree and located to the target element node, see fig. 6 for an example. And the inspection mode is adopted, so that a user can conveniently position a target element node in the Elements panel, and the efficiency is improved.
In the examination mode, responding to a seventh operation instruction of clicking the target element received by the simulator, and sending an eighth debugging instruction of a target element node corresponding to the selected target element to the debugger; according to the eighth debugging instruction, selecting a target element node in the debugger, displaying style information of the target element, and closing the examination mode of the simulator.
In the inspection mode, when a user clicks a target element in the simulator, the simulator sends an eighth debugging instruction to the debugger to select a target element node corresponding to the target element in the debugger, and in the inspection mode, the simulator sends an "overlay. And by adopting the examination mode, the user can conveniently and rapidly select the target element node in the Elements panel, and the efficiency is improved.
Fig. 7 is a schematic structural diagram of an element debugging device provided according to an embodiment of the present application, and the element debugging device is applied to an electronic device, where the electronic device includes a simulator and a debugger, and the simulator and the debugger are iframe elements. As shown in fig. 7, the element debugging device 700 includes:
An obtaining module 701, configured to obtain first debug protocol data from a simulator through an iframe communication interface of the debugger;
the display module 702 is configured to render the element node in the debugger according to the first debug protocol data;
a sending module 703, configured to send a debug instruction to the simulator through an iframe communication interface of the debugger in response to the operation instruction received by the debugger;
and the processing module 704 is used for executing operations corresponding to the debugging instructions through the simulator so as to debug the element nodes.
Optionally, the acquiring module 701 includes:
the first sending unit is used for sending an initialization signal to the debugger through the simulator after the loading of the simulator is completed;
the initialization unit is used for responding to an initialization signal received by the debugger and sending a first debugging instruction for acquiring element node information to the simulator through an iframe communication interface of the debugger;
the second sending unit is used for sending first debugging protocol data corresponding to the first debugging instruction to the debugger through the iframe communication interface of the simulator.
Optionally, the sending module 703 includes:
the third sending unit is used for responding to the first operation instruction received by the debugger and clicking the target element node, and sending a second debugging instruction for obtaining the style information of the target element corresponding to the target element node to the simulator through an iframe communication interface of the debugger;
The processing module 704 includes:
a fourth sending unit, configured to send second debug protocol data corresponding to the second debug instruction to the debugger through an iframe communication interface of the simulator;
and the first display unit is used for displaying the style information of the target element in the debugger according to the second debugging protocol data.
Optionally, the sending module 703 includes:
a fifth sending unit, configured to send, to the simulator through the iframe communication interface of the debugger, a third debug instruction for obtaining a child node of the target element node in response to the second operation instruction for expanding the target element node received by the debugger;
the processing module 704 includes:
a sixth sending unit, configured to send third debug protocol data corresponding to the third debug instruction to the debugger through an iframe communication interface of the simulator;
and the second display unit is used for rendering the child node of the target element node in the debugger according to the third debugging protocol data.
Optionally, the sending module 703 includes:
a seventh sending unit, configured to send, to the simulator through an iframe communication interface of the debugger, a fourth debug instruction of the target element corresponding to the mask target element node in response to a third operation instruction received by the debugger to move the mouse onto the target element node;
The processing module 704 includes:
and the third display unit is used for generating a mask layer on the target element in the simulator according to the fourth debugging instruction.
Optionally, the element debugging device 700 further includes:
the eighth sending unit is used for responding to a fourth operation instruction received by the debugger and used for removing the mouse from the target element node, and sending a fifth debugging instruction for hiding the mask layer to the simulator through an iframe communication interface of the debugger;
and the fourth display unit is used for hiding the mask layer in the simulator according to the fifth debugging instruction.
Optionally, the sending module 703 includes:
a ninth sending unit, configured to send, to the simulator through the iframe communication interface of the debugger, a sixth debug instruction that starts the review mode in response to the fifth operation instruction that triggers the review mode received by the debugger;
the processing module 704 includes:
and the examination unit is used for starting an examination mode of the simulator according to the sixth debugging instruction, wherein the examination mode is used for positioning the element node.
Optionally, the element debugging device 700 further includes:
a tenth sending unit, configured to respond to a sixth operation instruction received by the simulator to move the mouse onto the target element in the inspection mode, highlight the target element in the simulator, and send a seventh debug instruction for locating a target element node corresponding to the target element to the debugger through an iframe communication interface of the simulator;
And a fifth display unit for positioning to the target element node in the debugger according to the seventh debug instruction.
Optionally, the element debugging device 700 further includes:
an eleventh sending unit, configured to send, in response to a seventh operation instruction for clicking the target element received by the simulator, an eighth debug instruction of a target element node corresponding to the selected target element to the debugger in the censored mode;
and a sixth display unit for selecting a target element node in the debugger and displaying style information of the target element according to the eighth debug instruction, and closing the inspection mode of the simulator.
According to embodiments of the present application, there is also provided an electronic device and a non-transitory computer-readable storage medium storing computer instructions.
According to an embodiment of the present application, there is also provided a computer program product comprising: a computer program stored in a readable storage medium, from which at least one processor of an electronic device can read, the at least one processor executing the computer program causing the electronic device to perform the solution provided by any one of the embodiments described above.
Fig. 8 is a schematic block diagram of an electronic device used to implement the element debugging method of an embodiment of the present application. Electronic devices are intended to represent various forms of digital computers, such as laptops, desktops, workstations, personal digital assistants, servers, blade servers, mainframes, and other appropriate computers. The electronic device may also represent various forms of mobile devices, such as personal digital processing, cellular telephones, smartphones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions, are meant to be exemplary only, and are not meant to limit implementations of the disclosure described and/or claimed herein.
As shown in fig. 8, the electronic device 800 includes a computing unit 801 that can perform various appropriate actions and processes according to a computer program stored in a Read Only Memory (ROM) 802 or a computer program loaded from a storage unit 808 into a Random Access Memory (RAM) 803. In the RAM 803, various programs and data required for the operation of the device 800 can also be stored. The computing unit 801, the ROM 802, and the RAM 803 are connected to each other by a bus 804. An input/output (I/O) interface 805 is also connected to the bus 804.
Various components in device 800 are connected to I/O interface 805, including: an input unit 806 such as a keyboard, mouse, etc.; an output unit 807 such as various types of displays, speakers, and the like; a storage unit 808, such as a magnetic disk, optical disk, etc.; and a communication unit 809, such as a network card, modem, wireless communication transceiver, or the like. The communication unit 809 allows the device 800 to exchange information/data with other devices via a computer network such as the internet and/or various telecommunication networks.
The computing unit 801 may be a variety of general and/or special purpose processing components having processing and computing capabilities. Some examples of computing unit 801 include, but are not limited to, a Central Processing Unit (CPU), a Graphics Processing Unit (GPU), various specialized Artificial Intelligence (AI) computing chips, various computing units running machine learning model algorithms, a Digital Signal Processor (DSP), and any suitable processor, controller, microcontroller, etc. The computing unit 801 performs the various methods and processes described above, such as an element debugging method. For example, in some embodiments, the element debugging method may be implemented as a computer software program tangibly embodied on a machine-readable medium, such as the storage unit 808. In some embodiments, part or all of the computer program may be loaded and/or installed onto device 800 via ROM 802 and/or communication unit 809. When a computer program is loaded into RAM 803 and executed by computing unit 801, one or more steps of the element debugging method described above may be performed. Alternatively, in other embodiments, the computing unit 801 may be configured to perform the element debugging method by any other suitable means (e.g., by means of firmware).
Various implementations of the systems and techniques described here above may be implemented in digital electronic circuitry, integrated circuit systems, field Programmable Gate Arrays (FPGAs), application Specific Integrated Circuits (ASICs), application Specific Standard Products (ASSPs), systems On Chip (SOCs), load programmable logic devices (CPLDs), computer hardware, firmware, software, and/or combinations thereof. These various embodiments may include: implemented in one or more computer programs, the one or more computer programs may be executed and/or interpreted on a programmable system including at least one programmable processor, which may be a special purpose or general-purpose programmable processor, that may receive data and instructions from, and transmit data and instructions to, a storage system, at least one input device, and at least one output device.
Program code for carrying out methods of the present disclosure may be written in any combination of one or more programming languages. These program code may be provided to a processor or controller of a general purpose computer, special purpose computer, or other programmable data processing apparatus such that the program code, when executed by the processor or controller, causes the functions/operations specified in the flowchart and/or block diagram to be implemented. The program code may execute entirely on the machine, partly on the machine, as a stand-alone software package, partly on the machine and partly on a remote machine or entirely on the remote machine or server.
In the context of this disclosure, a machine-readable medium may be a tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. The machine-readable medium may be a machine-readable signal medium or a machine-readable storage medium. The machine-readable medium may include, but is 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 of a machine-readable storage medium would include an electrical connection based on one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.
To provide for interaction with a user, the systems and techniques described here can be implemented on a computer having: a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to a user; and a keyboard and pointing device (e.g., a mouse or trackball) by which a user can provide input to the computer. Other kinds of devices may also be used to provide for interaction with a user; for example, feedback provided to the user may be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user may be received in any form, including acoustic input, speech input, or tactile input.
The systems and techniques described here can be implemented in a computing system that includes a background component (e.g., as a data server), or that includes a middleware component (e.g., an application server), or that includes a front-end component (e.g., a user computer having a graphical user interface or a web browser through which a user can interact with an implementation of the systems and techniques described here), or any combination of such background, middleware, or front-end components. The components of the system can be interconnected by any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include: local Area Networks (LANs), wide Area Networks (WANs), and the internet.
The computer system may include a client and a server. The client and server are typically remote from each other and typically interact through a communication network. The relationship of client and server arises by virtue of computer programs running on the respective computers and having a client-server relationship to each other. The server can be a cloud server, also called a cloud computing server or a cloud host, and is a host product in a cloud computing service system, so that the defects of high management difficulty and weak service expansibility in the traditional physical hosts and VPS service ("Virtual Private Server" or simply "VPS") are overcome. The server may also be a server of a distributed system or a server that incorporates a blockchain.
It should be appreciated that various forms of the flows shown above may be used to reorder, add, or delete steps. For example, the steps described in the present application may be performed in parallel, sequentially, or in a different order, provided that the desired results of the technical solutions disclosed in the present application can be achieved, and are not limited herein.
The above embodiments do not limit the scope of the application. It will be apparent to those skilled in the art that various modifications, combinations, sub-combinations and alternatives are possible, depending on design requirements and other factors. Any modifications, equivalent substitutions and improvements made within the spirit and principles of the present application are intended to be included within the scope of the present application.
Claims (20)
1. An element debugging method is applied to electronic equipment, the electronic equipment comprises a simulator and a debugger, the simulator and the debugger are iframe elements, and the debugger adopts an iframe communication mechanism to communicate with the simulator, and the method comprises the following steps:
acquiring first debugging protocol data from the simulator through an iframe communication interface of the debugger;
rendering in the debugger to obtain element nodes according to the first debugging protocol data;
Responding to an operation instruction received by the debugger, and sending a debugging instruction to the simulator through an iframe communication interface of the debugger;
and executing the operation corresponding to the debugging instruction through the simulator so as to debug the element corresponding to the element node.
2. The method of claim 1, the obtaining, by the iframe communication interface of the debugger, first debug protocol data from the simulator, comprising:
after the loading of the simulator is completed, an initialization signal is sent to the debugger through an iframe communication interface of the simulator;
responding to an initialization signal received by the debugger, and sending a first debugging instruction for acquiring element node information to the simulator through an iframe communication interface of the debugger;
and sending the first debugging protocol data corresponding to the first debugging instruction to the debugger through an iframe communication interface of the simulator.
3. The method of claim 1, the sending, in response to the operation instruction received by the debugger, a debug instruction to the simulator through an iframe communication interface of the debugger, comprising:
responding to a first operation instruction received by the debugger for clicking a target element node, and sending a second debugging instruction for acquiring style information of a target element corresponding to the target element node to the simulator through an iframe communication interface of the debugger;
The executing, by the simulator, an operation corresponding to the debug instruction to debug the element corresponding to the element node includes:
transmitting second debugging protocol data corresponding to the second debugging instruction to the debugger through an iframe communication interface of the simulator;
and displaying style information of the target element in the debugger according to the second debugging protocol data.
4. The method of claim 1, the sending, in response to the operation instruction received by the debugger, a debug instruction to the simulator through an iframe communication interface of the debugger, comprising:
responding to a second operation instruction of expanding a target element node received by the debugger, and sending a third debugging instruction of acquiring a child node of the target element node to the simulator through an iframe communication interface of the debugger;
the executing, by the simulator, an operation corresponding to the debug instruction to debug the element corresponding to the element node includes:
transmitting third debugging protocol data corresponding to the third debugging instruction to the debugger through an iframe communication interface of the simulator;
And rendering the child node of the target element node in the debugger according to the third debugging protocol data.
5. The method of claim 1, the sending, in response to the operation instruction received by the debugger, a debug instruction to the simulator through an iframe communication interface of the debugger, comprising:
responding to a third operation instruction received by the debugger for moving a mouse to a target element node, and sending a fourth debugging instruction for masking a target element corresponding to the target element node to the simulator through an iframe communication interface of the debugger;
the executing, by the simulator, an operation corresponding to the debug instruction to debug the element corresponding to the element node includes:
and generating a mask layer on the target element in the simulator according to the fourth debugging instruction.
6. The method of claim 5, further comprising:
responding to a fourth operation instruction received by the debugger for removing the mouse from the target element node, and sending a fifth debugging instruction for hiding the mask layer to the simulator through an iframe communication interface of the debugger;
And hiding the mask layer in the simulator according to the fifth debugging instruction.
7. The method of claim 1, the sending, in response to the operation instruction received by the debugger, a debug instruction to the simulator through an iframe communication interface of the debugger, comprising:
responding to a fifth operation instruction which is received by the debugger and triggers the inspection mode, and sending a sixth debugging instruction for starting the inspection mode to the simulator through an iframe communication interface of the debugger;
the executing, by the simulator, an operation corresponding to the debug instruction to debug the element corresponding to the element node includes:
and according to the sixth debugging instruction, starting a checking mode of the simulator, wherein the checking mode is used for positioning element nodes.
8. The method of claim 7, further comprising:
in the inspection mode, responding to a sixth operation instruction received by the simulator for moving a mouse to a target element, highlighting the target element in the simulator, and sending a seventh debugging instruction for positioning a target element node corresponding to the target element to the debugger through an iframe communication interface of the simulator;
And positioning the target element node in the debugger according to the seventh debugging instruction.
9. The method of claim 7 or 8, further comprising:
in the examination mode, responding to a seventh operation instruction received by the simulator for clicking a target element, and sending an eighth debugging instruction for selecting a target element node corresponding to the target element to the debugger;
and according to the eighth debugging instruction, selecting the target element node in the debugger, displaying the style information of the target element, and closing the examination mode of the simulator.
10. An element debugging device is applied to electronic equipment, the electronic equipment comprises a simulator and a debugger, the simulator and the debugger are iframe elements, and the debugger adopts an iframe communication mechanism to communicate with the simulator, and the device comprises:
the acquisition module is used for acquiring first debugging protocol data from the simulator through an iframe communication interface of the debugger;
the display module is used for rendering and obtaining element nodes in the debugger according to the first debugging protocol data;
the sending module is used for responding to the operation instruction received by the debugger and sending a debugging instruction to the simulator through an iframe communication interface of the debugger;
And the processing module is used for executing the operation corresponding to the debugging instruction through the simulator so as to debug the element corresponding to the element node.
11. The apparatus of claim 10, the acquisition module comprising:
the first sending unit is used for sending an initialization signal to the debugger through an iframe communication interface of the simulator after the loading of the simulator is completed;
the initialization unit is used for responding to the initialization signal received by the debugger and sending a first debugging instruction for acquiring element node information to the simulator through an iframe communication interface of the debugger;
and the second sending unit is used for sending the first debugging protocol data corresponding to the first debugging instruction to the debugger through an iframe communication interface of the simulator.
12. The apparatus of claim 10, the transmitting module comprising:
the third sending unit is used for responding to the first operation instruction received by the debugger for clicking the target element node, and sending a second debugging instruction for acquiring the style information of the target element corresponding to the target element node to the simulator through an iframe communication interface of the debugger;
The processing module comprises:
a fourth sending unit, configured to send second debug protocol data corresponding to the second debug instruction to the debugger through an iframe communication interface of the simulator;
and the first display unit is used for displaying the style information of the target element in the debugger according to the second debugging protocol data.
13. The apparatus of claim 10, the transmitting module comprising:
a fifth sending unit, configured to send, to the simulator through an iframe communication interface of the debugger, a third debug instruction for obtaining a child node of the target element node in response to a second operation instruction for expanding the target element node received by the debugger;
the processing module comprises:
a sixth sending unit, configured to send third debug protocol data corresponding to the third debug instruction to the debugger through an iframe communication interface of the simulator;
and the second display unit is used for rendering the child node of the target element node in the debugger according to the third debugging protocol data.
14. The apparatus of claim 10, the transmitting module comprising:
a seventh sending unit, configured to send, to the simulator through an iframe communication interface of the debugger, a fourth debug instruction for masking a target element corresponding to the target element node, in response to a third operation instruction received by the debugger to move a mouse onto the target element node;
The processing module comprises:
and the third display unit is used for generating a mask layer on the target element in the simulator according to the fourth debugging instruction.
15. The apparatus of claim 14, further comprising:
an eighth sending unit, configured to send, to the simulator through an iframe communication interface of the debugger, a fifth debug instruction hiding the mask layer in response to a fourth operation instruction received by the debugger to remove a mouse from the target element node;
and the fourth display unit is used for hiding the mask layer in the simulator according to the fifth debugging instruction.
16. The apparatus of claim 10, the transmitting module comprising:
a ninth sending unit, configured to send, to the simulator through an iframe communication interface of the debugger, a sixth debug instruction for turning on the review mode in response to a fifth operation instruction received by the debugger that triggers the review mode;
the processing module comprises:
and the examination unit is used for starting an examination mode of the simulator according to the sixth debugging instruction, wherein the examination mode is used for positioning element nodes.
17. The apparatus of claim 16, further comprising:
A tenth sending unit, configured to respond to a sixth operation instruction received by the simulator to move a mouse onto a target element in the inspection mode, highlight the target element in the simulator, and send a seventh debug instruction for locating a target element node corresponding to the target element to the debugger through an iframe communication interface of the simulator;
and a fifth display unit, configured to locate, in the debugger, the target element node according to the seventh debug instruction.
18. The apparatus of claim 16 or 17, further comprising:
an eleventh sending unit, configured to send, in the inspection mode, an eighth debug instruction for selecting a target element node corresponding to the target element to the debugger in response to a seventh operation instruction for clicking the target element received by the simulator;
and a sixth display unit, configured to select, according to the eighth debug instruction, the target element node in the debugger, display style information of the target element, and close an inspection mode of the simulator.
19. An electronic device, comprising:
at least one processor; and a memory communicatively coupled to the at least one processor;
Wherein the memory stores instructions executable by the at least one processor to enable the at least one processor to perform the method of any one of claims 1-9.
20. A non-transitory computer readable storage medium storing computer instructions for causing the computer to perform the method of any one of claims 1-9.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110218504.0A CN112948245B (en) | 2021-02-26 | 2021-02-26 | Element debugging method, device, equipment, storage medium and program product |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110218504.0A CN112948245B (en) | 2021-02-26 | 2021-02-26 | Element debugging method, device, equipment, storage medium and program product |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112948245A CN112948245A (en) | 2021-06-11 |
| CN112948245B true CN112948245B (en) | 2024-03-01 |
Family
ID=76246479
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110218504.0A Active CN112948245B (en) | 2021-02-26 | 2021-02-26 | Element debugging method, device, equipment, storage medium and program product |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112948245B (en) |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108762946A (en) * | 2018-05-16 | 2018-11-06 | 福建天泉教育科技有限公司 | A kind of cross-domain web terminal communication means and terminal |
| CN109753198A (en) * | 2017-11-07 | 2019-05-14 | 阿里巴巴集团控股有限公司 | Interface access method, display methods, equipment, medium |
| CN112131092A (en) * | 2019-06-24 | 2020-12-25 | 北京京东尚科信息技术有限公司 | Page debugging method and device |
| CN112214416A (en) * | 2020-11-16 | 2021-01-12 | 百度在线网络技术（北京）有限公司 | Method and device for debugging small program, electronic equipment and storage medium |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US9037658B2 (en) * | 2011-08-04 | 2015-05-19 | Facebook, Inc. | Tagging users of a social networking system in content outside of social networking system domain |
-
2021
- 2021-02-26 CN CN202110218504.0A patent/CN112948245B/en active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109753198A (en) * | 2017-11-07 | 2019-05-14 | 阿里巴巴集团控股有限公司 | Interface access method, display methods, equipment, medium |
| CN108762946A (en) * | 2018-05-16 | 2018-11-06 | 福建天泉教育科技有限公司 | A kind of cross-domain web terminal communication means and terminal |
| CN112131092A (en) * | 2019-06-24 | 2020-12-25 | 北京京东尚科信息技术有限公司 | Page debugging method and device |
| CN112214416A (en) * | 2020-11-16 | 2021-01-12 | 百度在线网络技术（北京）有限公司 | Method and device for debugging small program, electronic equipment and storage medium |
Non-Patent Citations (2)
| Title |
|---|
| 一种基于嵌入式Internet技术的前台开发工具的设计与实现;韩光洁,王金东,林涛,王济勇,赵海;小型微型计算机系统(第12期);全文 * |
| 李鸿君等.Web前端项目开发实践教程.2016,说明书第263-269页. * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN112948245A (en) | 2021-06-11 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111506387B (en) | Page prerendering method and device, electronic equipment and storage medium | |
| JP5679989B2 (en) | Debug pipeline | |
| CN107943691B (en) | Method and device for automatically generating function test page of intelligent contract | |
| CN112540806B (en) | Method and device for rendering small program page, electronic equipment and storage medium | |
| KR20080053293A (en) | Initial server-side content rendering for client-script web pages | |
| CN112506854B (en) | Page template file storage and page generation methods, devices, equipment and media | |
| CN113010827A (en) | Page rendering method and device, electronic equipment and storage medium | |
| CN112527281B (en) | Operator upgrading method and device based on artificial intelligence, electronic equipment and medium | |
| CN109582317B (en) | Method and apparatus for debugging hosted applications | |
| CN112463154A (en) | Page generation method, device and system and electronic equipment | |
| CN112130951A (en) | AI-based RPA flow generation end flow generation method, equipment and storage medium | |
| CN114417780A (en) | State synchronization method and device, electronic equipment and storage medium | |
| KR20220063290A (en) | Applet page rendering method, apparatus, electronic equipment and storage medium | |
| CN112947916A (en) | Method, device, equipment and storage medium for realizing online canvas | |
| CN112506503A (en) | Programming method, device, terminal equipment and storage medium | |
| CN112948245B (en) | Element debugging method, device, equipment, storage medium and program product | |
| CN116009847A (en) | Code generation method, device, electronic equipment and storage medium | |
| CN114741294A (en) | Page debugging method, device, equipment and storage medium | |
| CN111625379B (en) | Information processing method and device, electronic equipment and readable storage medium | |
| CN113656533A (en) | Tree control processing method and device and electronic equipment | |
| CN108960433B (en) | Method and system for running machine learning modeling process | |
| CN113342413B (en) | Method, apparatus, device, medium, and article for processing components | |
| CN113157360B (en) | Method, apparatus, device, medium, and article for processing an API | |
| CN118034665A (en) | Low-code platform-oriented data processing method and device, electronic equipment and medium | |
| CN117785215A (en) | Implementation method and device of end cloud integrated platform, electronic equipment and medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |