CN109582580B - System, method and apparatus for debugging pages - Google Patents
System, method and apparatus for debugging pages Download PDFInfo
- Publication number
- CN109582580B CN109582580B CN201811460011.2A CN201811460011A CN109582580B CN 109582580 B CN109582580 B CN 109582580B CN 201811460011 A CN201811460011 A CN 201811460011A CN 109582580 B CN109582580 B CN 109582580B
- Authority
- CN
- China
- Prior art keywords
- page
- debugged
- mobile terminal
- panel
- debugging
- 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
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/36—Preventing errors by testing or debugging software
- G06F11/362—Software debugging
- G06F11/3644—Software debugging by instrumenting at runtime
Abstract
The embodiment of the application discloses a system, a method and a device for debugging a page. One embodiment of the method comprises: by the aid of the computer equipment and the mobile terminal connected with the computer equipment in a wireless network mode, the Web page of the mobile terminal is debugged in an element panel of a Chrome developer tool installed in the computer equipment without wired connection between the mobile terminal and the computer equipment, development and debugging cost is reduced, and debugging efficiency is improved.
Description
Technical Field
The embodiment of the application relates to the technical field of computers, in particular to a system, a method and a device for debugging pages.
Background
With the development of mobile internet, a mobile terminal Web page is widely applied to various mobile terminals as an important presentation form. The mobile end Web page comprises a Web page in a mobile end application and a pure Web page displayed in a mobile end browser. In order to develop and debug a mobile-end Web page conveniently, a commonly-used method is to install a Chrome developer tool on a computer device, and connect a mobile terminal to the computer device through a USB (Universal Serial Bus) data line, so as to complete debugging the mobile-end Web page in each panel (e.g., a source code panel, a control panel, an element panel, a network panel, an application panel, etc.) of the Chrome developer tool. However, when the mobile terminal and the computer device are not in the same place, or the mobile terminal does not support the USB data line, the method cannot be used to debug the mobile terminal Web page in real time. In addition, due to the limitation of apple, the remote debugging protocol cannot be started in the application published in App Store, which results in that the debugging of the Web page of the mobile terminal installed with the iOS operating system (iOS is a mobile operating system developed by apple) cannot be realized on the computer device by using the Chrome developer tool.
Disclosure of Invention
The embodiment of the application provides a system, a method and a device for debugging a page.
In a first aspect, an embodiment of the present application provides a system for debugging a page, including a computer device and a mobile terminal that are connected by a wireless network and provided with a display, where: the computer device is configured to: in response to detecting a first debugging request aiming at a page to be debugged on an element panel, opening the page to be debugged on the element panel, and sending a Document Object Model (DOM) tree of the page to be debugged to the mobile terminal; in response to receiving the DOM tree sent by the mobile terminal, re-rendering and presenting the page to be debugged based on the received DOM tree; the mobile terminal is configured to: in response to receiving a DOM tree sent by the computer equipment, rendering and presenting the page to be debugged based on the received DOM tree; and responding to the detected DOM tree updating operation aiming at the page to be debugged, and sending the updated DOM tree to the computer equipment.
In some embodiments, the computer device is further configured to: in response to detecting a second debugging request on a network panel aiming at a page to be debugged, loading the page to be debugged on the network panel;
in response to receiving the network request detail information sent by the mobile terminal, displaying the received network request detail information in the network panel; and the mobile terminal is further configured to: and sending the network request detail information corresponding to the page to be debugged to the computer equipment.
In some embodiments, the computer device is further configured to: in response to detecting a third debugging request on an application panel aiming at the page to be debugged, loading the page to be debugged in the application panel; in response to receiving the storage information data sent by the mobile terminal, displaying the received storage information data in the application panel; and the mobile terminal is further configured to: and sending the storage information data corresponding to the page to be debugged to the computer equipment.
In some embodiments, the computer device is further configured to: in response to detecting a first debugging request on a source code panel or a control panel aiming at the page to be debugged, loading and executing a code corresponding to the page to be debugged in a thread corresponding to the page to be debugged to obtain an execution result, and sending the obtained execution result to the mobile terminal; responding to the received page event information sent by the mobile terminal, executing a code corresponding to the page to be debugged in a thread corresponding to the page to be debugged based on the received page event information to obtain an execution result, and sending the obtained execution result to the mobile terminal; the mobile terminal is further configured to: in response to receiving an execution result sent by the computer equipment, rendering and presenting the page to be debugged based on the received execution result; in response to detecting the operation of the user on the page to be debugged, generating page event information related to the operation, and sending the generated page event information to the computer equipment.
In some embodiments, the mobile terminal and the computer device are in data communication via a socket.
In a second aspect, an embodiment of the present application provides a method for debugging a page, which is applied to a computer device in a system for debugging a page, where the system for debugging a page includes a computer device provided with a display and a mobile terminal that are connected by a wireless network, and the method includes: in response to detecting a fourth debugging request of a user on an element panel aiming at a page to be debugged, opening the page to be debugged on the element panel, and sending a Document Object Model (DOM) tree of the page to be debugged to the mobile terminal; and in response to receiving the DOM tree sent by the mobile terminal, re-rendering and presenting the page to be debugged based on the received DOM tree.
In some embodiments, the method further comprises: in response to detecting a second debugging request on a network panel aiming at a page to be debugged, loading the page to be debugged on the network panel; and in response to receiving the network request detail information sent by the mobile terminal, displaying the received network request detail information in the network panel.
In some embodiments, the method further comprises: in response to detecting a third debugging request on an application panel aiming at the page to be debugged, loading the page to be debugged in the application panel; and responding to the received storage information data sent by the mobile terminal, and displaying the received storage information data in the application panel.
In some embodiments, the method further comprises: in response to detecting a first debugging request on a source code panel or a control panel aiming at the page to be debugged, loading and executing a code corresponding to the page to be debugged in a thread corresponding to the page to be debugged to obtain an execution result, and sending the obtained execution result to the mobile terminal; and in response to receiving the page event information sent by the mobile terminal, executing a code corresponding to the page to be debugged in a thread corresponding to the page to be debugged based on the received page event information to obtain an execution result, and sending the obtained execution result to the mobile terminal.
In some embodiments, the mobile terminal and the computer device are in data communication via a socket.
In a third aspect, an embodiment of the present application provides an apparatus for debugging a page, which is applied to a computer device in a system for debugging a page, where the system for debugging a page includes a computer device provided with a display and a mobile terminal that are connected by a wireless network, and the apparatus includes: the document object model sending unit is configured to respond to a first debugging request of a user on an element panel aiming at a page to be debugged, open the page to be debugged on the element panel, and send a Document Object Model (DOM) tree of the page to be debugged to the mobile terminal; and the page rendering and presenting unit is configured to re-render and present the page to be debugged based on the received DOM tree in response to receiving the DOM tree sent by the mobile terminal.
In some embodiments, the apparatus further comprises: a first page loading unit configured to load a page to be debugged at a network panel in response to detecting a second debug request at the network panel for the page to be debugged; and a first display unit configured to display the received network request detail information in the network panel in response to receiving the network request detail information transmitted by the mobile terminal.
In some embodiments, the apparatus further comprises: the second page loading unit is configured to respond to the third debugging request aiming at the page to be debugged in the application panel and load the page to be debugged in the application panel; and a second display unit configured to display the received storage information data in the application panel in response to receiving the storage information data transmitted by the mobile terminal.
In some embodiments, the apparatus further comprises: the first execution result sending unit is configured to load and execute a code corresponding to the page to be debugged in a thread corresponding to the page to be debugged in response to detecting a fourth debugging request aiming at the page to be debugged on the source code panel or the control panel, obtain an execution result, and send the obtained execution result to the mobile terminal; and the second execution result sending unit is configured to respond to the received page event information sent by the mobile terminal, execute the code corresponding to the page to be debugged in the thread corresponding to the page to be debugged based on the received page event information, obtain an execution result, and send the obtained execution result to the mobile terminal.
In some embodiments, the mobile terminal and the computer device communicate data through a socket.
In a fourth aspect, an embodiment of the present application provides an electronic device, including: one or more processors; a storage device, on which one or more programs are stored, which, when executed by the one or more processors, cause the one or more processors to implement the method as described in any implementation manner of the second aspect.
In a fifth aspect, the present application provides a computer-readable storage medium, on which a computer program is stored, where the computer program, when executed by one or more processors, implements the method as described in any implementation manner of the second aspect.
In the system, the method, and the device for debugging a page provided by the embodiment of the present application, in response to detecting a first debugging request for a page to be debugged on an element panel, a computer device opens the page to be debugged on the element panel, and sends a DOM (Document Object Model) tree of the page to be debugged to a mobile terminal; the computer equipment re-renders and presents the page to be debugged based on the received DOM tree in response to receiving the DOM tree sent by the mobile terminal; the mobile terminal renders and presents the page to be debugged based on the received DOM tree in response to receiving the DOM tree sent by the computer equipment; and the mobile terminal responds to the detected DOM tree updating operation aiming at the page to be debugged and sends the updated DOM tree to the computer equipment. Then, through the computer equipment and the mobile terminal connected with the computer equipment in a wireless network, the debugging of the Web page of the mobile terminal in an element panel of a Chrome developer tool installed in the computer equipment is realized, and the wired connection between the mobile terminal and the computer equipment is not needed, so that the development and debugging cost is reduced, and the debugging efficiency is improved.
Drawings
Other features, objects and advantages of the present application will become more apparent upon reading of the following detailed description of non-limiting embodiments thereof, made with reference to the accompanying drawings in which:
FIG. 1 is an exemplary system architecture diagram in which one embodiment of the present application may be applied;
FIG. 2 is a timing diagram for one embodiment of a system for debugging a page according to the present application;
FIGS. 3A and 3B are timing diagrams of yet another embodiment of a system for debugging pages according to the present application;
FIG. 4 is a flow diagram for one embodiment of a method for debugging a page according to the present application;
FIG. 5 is a block diagram illustrating one embodiment of an apparatus for debugging a page according to the present application;
FIG. 6 is a schematic block diagram of a computer system suitable for use in implementing the computer device of an embodiment of the present application.
Detailed Description
The present application will be described in further detail with reference to the following drawings and examples. It is to be understood that the specific embodiments described herein are merely illustrative of the relevant invention and not restrictive of the invention. It should be noted that, for convenience of description, only the portions related to the related invention are shown in the drawings.
It should be noted that the embodiments and features of the embodiments in the present application may be combined with each other without conflict. The present application will be described in detail below with reference to the embodiments with reference to the attached drawings.
Fig. 1 illustrates an exemplary system architecture 100 to which embodiments of the present method for debugging pages or apparatus for debugging pages may be applied.
As shown in fig. 1, the system architecture 100 may include a mobile terminal 101, a wireless network 102, and a computer device 103. Wireless network 102 is the medium used to provide wireless communication links between mobile terminals 101 and computer devices 103. Wireless network 102 may include various wireless connection types. It is noted that the wireless connection types may include, but are not limited to, 3G/4G connections, WiFi connections, bluetooth connections, WiMAX connections, Zigbee connections, uwb (ultra wideband) connections, and other wireless connection types now known or later developed.
A user may use mobile terminal 101 to interact with computer device 103 over wireless network 102 to receive or send messages and the like. The mobile terminal 101 may have various communication client applications installed thereon, such as a mobile Web application, a Web browser application, a shopping application, a search application, an instant messaging tool, a mailbox client, social platform software, and the like.
The mobile terminal 101 may be hardware or software. When the mobile terminal 101 is hardware, it may be various electronic devices having a display screen and supporting Web page browsing, including but not limited to a smart phone, a tablet computer, an e-book reader, an MP3 player (Moving Picture Experts Group Audio Layer III, motion Picture Experts Group Audio Layer 3), an MP4 player (Moving Picture Experts Group Audio Layer IV, motion Picture Experts Group Audio Layer 4), and so on. When the mobile terminal 101 is software, it can be installed in the electronic devices listed above. It may be implemented as multiple pieces of software or software modules, or as a single piece of software or software module. And is not particularly limited herein.
The computer device 103 may be hardware or software. When the computer device 103 is hardware, it may be an electronic device having a display screen and supporting web browsing and installed with Chrome developer tools.
The mobile terminal 101 can cooperate with the computer device 103 through the wireless network 102 to implement debugging a mobile end Web page in a source code panel or a control panel of a Chrome developer tool installed in the computer device 103.
It should be noted that the method for debugging a page provided by the embodiment of the present application is generally executed by the computer device 103, and accordingly, the apparatus for debugging a page is generally disposed in the computer device 103.
The computer device 103 may be hardware or software. When the computer device 103 is hardware, it may be implemented as a distributed server cluster composed of a plurality of servers, or may be implemented as a single server. When the computer device 103 is software, it may be implemented as a plurality of software or software modules (for example, to provide distributed services), or as a single software or software module. And is not particularly limited herein.
It should be understood that the number of mobile terminals, networks, and computer devices in fig. 1 is illustrative only. There may be any number of mobile terminals, networks, and computer devices, as desired for an implementation.
With continued reference to FIG. 2, a timing sequence 200 for one embodiment of a system for debugging pages in accordance with the present application is shown.
The system for debugging the page in the embodiment of the application can comprise a computer device and a mobile terminal which are connected through a wireless network and provided with a display.
As shown in FIG. 2, a timing sequence 200 for one embodiment of a system for debugging a page according to the present application may include the steps of:
step 201, in response to detecting a first debugging request on an element panel for a page to be debugged, a computer device opens the page to be debugged on the element panel, and sends a DOM tree of the page to be debugged to a mobile terminal.
In this embodiment, the computer device may, upon detecting a first debug request for a page to be debugged at an element panel (i.e., Elements panel), first open the page to be debugged at the element panel of the Chrome developer tool installed in the computer device. Here, a DOM tree of the page to be debugged is extracted and displayed in the element panel, any page element of the page to be debugged can be searched through the DOM tree, a development engineer can edit each tag attribute and style attribute of any page element in real time, and the modification of the tag attribute and the style attribute caused by the real-time editing can be fed back in the browser in real time. Then, the computer device may transmit the DOM tree of the page to be debugged extracted and displayed in the element panel to the mobile terminal.
Step 202, in response to receiving the DOM tree sent by the mobile terminal, the computer device re-renders and presents the page to be debugged based on the received DOM tree.
In this embodiment, if the computer device receives the DOM tree sent by the mobile terminal, indicating that the mobile terminal has detected the update operation of the DOM tree, and sends the latest updated DOM tree, the computer device may re-render and present the page to be debugged based on the received DOM tree, thereby implementing synchronization of DOM trees of the page to be debugged displayed in the computer device and the mobile terminal.
It should be noted that rendering and presenting pages based on a DOM tree is a well-known technology that is currently widely researched and applied, and is not described herein again.
And step 203, in response to receiving the DOM tree sent by the computer equipment, rendering and presenting the page to be debugged based on the received DOM tree by the mobile terminal.
Here, if the mobile terminal receives the DOM tree sent by the computer device, indicating that a development engineer edits the attribute of the page element of the page to be debugged in the element panel in the Chrome developer tool installed on the computer device, resulting in a change in the DOM tree of the page to be debugged displayed on the computer device, the mobile terminal also needs to synchronize the DOM tree of the page to be debugged displayed on the computer device, and the mobile terminal may render and present the page to be debugged based on the received DOM tree.
And step 204, in response to detecting the DOM tree updating operation aiming at the page to be debugged, the mobile terminal sends the updated DOM tree to the computer equipment.
Here, the mobile terminal may transmit the updated DOM tree of the page to be debugged displayed in the mobile terminal to the computer device, in a case where the DOM tree update operation for the page to be debugged is detected. In this way, the computer device can synchronize the latest DOM tree of the mobile terminal in real time.
In some optional implementations of the embodiment, the mobile terminal and the computer device may perform data communication through a Socket (Socket).
In the system for debugging a page provided by the above embodiment of the present application, in response to detecting a first debugging request on an element panel for a page to be debugged, a computer device opens the page to be debugged on the element panel, and sends a DOM tree of the page to be debugged to a mobile terminal; the computer equipment re-renders and presents the page to be debugged based on the received DOM tree in response to receiving the DOM tree sent by the mobile terminal; the mobile terminal renders and presents the page to be debugged based on the received DOM tree in response to receiving the DOM tree sent by the computer equipment; and the mobile terminal responds to the detected DOM tree updating operation aiming at the page to be debugged and sends the updated DOM tree to the computer equipment. Then, through the computer equipment and the mobile terminal connected with the computer equipment in a wireless network, the debugging of the Web page of the mobile terminal in an element panel of a Chrome developer tool installed in the computer equipment is realized, and the wired connection between the mobile terminal and the computer equipment is not needed, so that the development and debugging cost is reduced, and the debugging efficiency is improved.
With further reference to fig. 3A and 3B, a timing sequence 300 for yet another embodiment of a system for debugging pages is illustrated.
The system for debugging the page in the embodiment of the application can comprise a computer device and a mobile terminal which are connected through a wireless network and provided with a display.
As shown in FIG. 3A, a timing sequence 300 of yet another embodiment of a system for debugging pages according to the present application may comprise the steps of:
step 301, in response to detecting a first debugging request for a page to be debugged on an element panel, a computer device opens the page to be debugged on the element panel, and sends a DOM tree of the page to be debugged to a mobile terminal.
Step 302, in response to receiving the DOM tree sent by the mobile terminal, the computer device re-renders and presents the page to be debugged based on the received DOM tree.
Step 303, in response to receiving the DOM tree sent by the computer device, the mobile terminal renders and presents the page to be debugged based on the received DOM tree.
Step 304, the mobile terminal sends the updated DOM tree to the computer device in response to detecting the DOM tree update operation for the page to be debugged.
In this embodiment, the specific operations of step 301, step 302, step 303, and step 304 are substantially the same as the operations of step 201, step 202, step 203, and step 204 in the embodiment shown in fig. 2, and are not described again here.
Step 305, the computer device loads the page to be debugged on the network panel in response to detecting the second debugging request on the network panel aiming at the page to be debugged.
In this embodiment, a Chrome developer tool may be installed in the computer device, and the Chrome developer tool may include a Network panel (i.e., a Network panel). The computer device may load the page to be debugged at the network panel upon detecting a second debug request at the network panel for the page to be debugged. In this way, the network panel may record details of the network request of the page to be debugged displayed on the computer device, and may specifically include each request resource information (including state, resource type, size, used time, request, response, input parameters, output parameters, and the like) obtained after the HTTP (Hyper-Text Transfer Protocol) request is analyzed from the initiation of the web page request of the page to be debugged, and the development engineer may perform network performance optimization according to the resource request information.
Here, the computer device may employ various implementations to determine that the second debug request is detected. For example, the computer device may determine that the second debug request is detected upon detecting an operation to open a page to be debugged at a network panel of the Chrome developer tool. The operation of opening the page to be debugged in the network panel of the Chrome developer tool can be an operation triggered by a user or an operation triggered by program code logic.
In step 306, the computer device displays the received network request detail information in the network panel in response to receiving the network request detail information sent by the mobile terminal.
In this embodiment, the computer device may display the received network request detail information in a network panel of a Chrome developer tool of the computer device, upon receiving the network request detail information sent by the mobile terminal.
And 307, the mobile terminal sends the network request detail information corresponding to the page to be debugged to the computer equipment.
In this embodiment, the mobile terminal may send, in real time, the network request detail information corresponding to the page to be debugged displayed on the mobile terminal to the computer device.
In practice, the mobile terminal may send the network request detail information corresponding to the page to be debugged displayed in the mobile terminal to the computer device through the socket according to the protocol in the network panel in the Chrome developer tool by using the browser native Resource Timing API. Here, the network request detail information corresponding to the page to be debugged displayed on the mobile terminal may specifically include each request resource information (including a state, a resource type, a size, a used time, a request, a response, an input parameter, an output parameter, and the like) obtained after the HTTP request is analyzed from the beginning after the web page request of the page to be debugged is initiated on the mobile terminal.
Through steps 305 to 307, the mobile terminal Web page can be debugged in the network panel of the Chrome developer tool installed in the computer device without the need of wired connection between the mobile terminal and the computer device, so that the development and debugging cost is reduced, and the debugging efficiency is improved.
In step 308, the computer device loads the page to be debugged in the application panel in response to detecting the third debug request in the application panel for the page to be debugged.
In this embodiment, the computer device may load the page to be debugged in the Application panel (i.e., the Application panel; some versions are also referred to as resource panels) upon detecting a third debug request at the Application panel for the page to be debugged. The development engineer may use the application panel to inspect all resources loaded, including IndexEDDB, Web SQL databases, local storage, session storage, browser cache (Cookie), application cache, images, fonts, and style sheets.
In step 309, the computer device displays the received storage information data in the application panel in response to receiving the storage information data sent by the mobile terminal.
In this embodiment, the computer device may display the received storage information data in an application panel of a Chrome developer tool of the computer device, that is, display the storage information data of the page to be debugged in the mobile terminal, when receiving the storage information data sent by the mobile terminal.
And 310, the mobile terminal sends the storage information data corresponding to the page to be debugged to the computer equipment.
In this embodiment, the mobile terminal may send, in real time, the storage information data corresponding to the page to be debugged displayed on the mobile terminal to the computer device.
In practice, the mobile terminal may obtain, by using the LocalStorage API and the SessionStorage API, storage information data corresponding to a page to be debugged displayed in the mobile terminal. Here, the storage information data corresponding to the page to be debugged displayed on the mobile terminal may specifically include IndexedDB, a Web SQL database, a local storage, a session storage, a browser cache (Cookie), an application cache, an image, a font, and a style sheet.
Through steps 308 to 310, the mobile terminal Web page can be debugged in the application panel of the Chrome developer tool installed in the computer device without the need of wired connection between the mobile terminal and the computer device, so that the development and debugging cost is reduced, and the debugging efficiency is improved.
In some optional implementations of this embodiment, the timing sequence 300 may further include steps 311 to 314 as shown in fig. 3B:
in step 311, in response to detecting a first debugging request for the page to be debugged on the source code panel or the control panel, the computer device loads and executes a code corresponding to the page to be debugged in a thread corresponding to the page to be debugged, obtains an execution result, and sends the obtained execution result to the mobile terminal.
Here, a Chrome developer tool may be installed in the computer device. The computer device may load and execute a code corresponding to the page to be debugged in a thread corresponding to the page to be debugged first to obtain an execution result when detecting a first debug request for the page to be debugged on a Source code panel (i.e., Source panel) or a control panel (i.e., Console panel). Then, the obtained execution result is transmitted to a mobile terminal wirelessly connected to the computer device.
Here, the computer device may employ various implementations to determine that the first debug request is detected. For example, the computer device may determine that the first debug request is detected upon detecting an operation to open a page to be debugged in a source code panel or a control panel of the Chrome developer tool. The operation of opening the page to be debugged in the source code panel or the control panel of the Chrome developer tool may be an operation triggered by a user or an operation triggered by program code logic.
Here, the computer device may newly create a corresponding thread for the page to be debugged when it is detected for the first time that the page to be debugged is opened. For example, when the page to be debugged includes JavaScript codes, a corresponding Webworker sub-thread may be newly created for the page to be debugged as a thread corresponding to the page to be debugged. Therefore, the code corresponding to the page to be debugged is loaded and executed in the thread corresponding to the page to be debugged, the process of obtaining the execution result can be executed in the newly-built Webworker sub-thread corresponding to the page to be debugged, and the execution process does not influence the operation of the main thread.
Webworker is a JavaScript multithreading solution provided by HTML5, and can give some codes with large calculation amount to Webworker to run without blocking a user main thread, and Webworker uses worker class to load a JavaScript file to create a sub-thread in the current JavaScript main thread, so that the effect of mutual non-blocking running is achieved, and an interface for data exchange between the main thread and the sub-thread is provided: postMessage and onMessage to complete data communication between the main thread and the Webworker sub-thread.
In practice, because the Webworker is an independent environment similar to JavaScript, the environment does not support Windows API (Application Programming Interface) and Document API supported by JavaScript, so a virtual Windows API and Document API need to be implemented in the Webworker, that is, the Webworker also supports Windows API and Document API. That is, loading and executing a code corresponding to the page to be debugged in a thread corresponding to the page to be debugged to obtain an execution result, where the execution result may include: an Object (Object) resulting from calling the Windows API and a DOM (Document Object Model) tree resulting from calling the Document API.
In order to synchronize the page displayed by the mobile terminal with the execution result obtained by executing the code in the computer device, the computer device may send the obtained execution result to the mobile terminal after obtaining the execution result.
In step 312, in response to receiving the page event information sent by the mobile terminal, the computer device executes a code corresponding to the page to be debugged in a thread corresponding to the page to be debugged based on the received page event information, obtains an execution result, and sends the obtained execution result to the mobile terminal.
Here, if the computer device receives the page event information transmitted from the mobile terminal, indicating that the mobile terminal detects an operation of the user on the mobile terminal, the page event information related to the operation is generated, and the generated page event information is transmitted to the computer device. In this way, the computer device may execute the code corresponding to the page to be debugged based on the received page event information in the thread corresponding to the page to be debugged, obtain an execution result, and send the obtained execution result to the mobile terminal.
Here, the page event information may include various information related to the user operation. For example, the page event information may include, but is not limited to: the page element identification of the user operation, the time the user operation was received, the operation type of the user operation (e.g., click, swipe), the specific information content entered by the user (e.g., the text entered by the user in the text box, or the specific selection item selected by the user in the selection-type page element).
Here, the computer device may execute, in the thread corresponding to the page to be debugged, the operation logic expressed by the code corresponding to the page to be debugged based on the received page event information, and obtain the execution result. It can be understood that, when the thread corresponding to the page to be debugged is a Webworker sub-thread, the code corresponding to the page to be debugged is executed in the thread corresponding to the page to be debugged based on the received page event information, and the obtained execution result may also include: objects (objects) resulting from calls to the Windows API and DOM trees resulting from calls to the Document API.
Here, the development engineer may set breakpoints in the source code panel to debug the code (e.g., JavaScript code) of the page to be debugged. The development engineer may also use the console panel to record diagnostic information or use the console panel as a shell to interact with JavaScript on the page.
In step 313, in response to receiving the execution result sent by the computer device, the mobile terminal renders and presents the page to be debugged based on the received execution result.
Here, the mobile terminal may render and present the page to be debugged based on the received execution result, in a case where the execution result transmitted by the computer device is received.
It should be noted that the above-mentioned various methods for rendering and presenting pages are well-known technologies that are widely researched and applied at present, and are not described herein again.
In step 204, the mobile terminal responds to the detected operation of the user for the page to be debugged, generates page event information related to the operation, and sends the generated page event information to the computer equipment.
In this embodiment, the mobile terminal may generate page event information related to the detected operation when detecting an operation of the user for the page to be debugged, and send the generated page event information to the computer device. Thus, the computer device can perform step 202.
Through steps 311 to 314, the mobile terminal Web page can be debugged in the source code panel or the console panel of the Chrome developer tool installed in the computer device without the need of wired connection between the mobile terminal and the computer device, thereby reducing the development and debugging cost and improving the debugging efficiency.
As can be seen from fig. 3, compared with the embodiment corresponding to fig. 2, the process 300 of the system for debugging pages in the present embodiment has more steps for debugging the mobile-end Web page in the Web panel, the application panel, the source code panel and the console panel of the Chrome developer tool installed in the computer device. Therefore, the scheme described in the embodiment can realize debugging of the mobile terminal Web page in the panels of more Chrome developer tools.
Referring now to FIG. 4, a flowchart 400 of one embodiment of a method for debugging a page is shown for a computer device in a system for debugging pages. The system for debugging the page comprises computer equipment and a mobile terminal which are connected through a wireless network and provided with a display. The process 400 of the method for debugging a page includes the steps of:
And 402, in response to receiving the DOM tree sent by the mobile terminal, re-rendering and presenting the page to be debugged based on the received DOM tree.
In this embodiment, the specific operations of step 401 and step 402 are substantially the same as the operations of step 201 and step 202 in the embodiment shown in fig. 2, and are not described again here.
Through steps 401 and 402, debugging a mobile-side Web page in an element panel of a Chrome developer tool installed in a computer device is achieved.
In some optional implementation manners of this embodiment, the method for debugging a page may further include the following steps 403 and 404:
and 403, in response to detecting a second debugging request aiming at the page to be debugged at the network panel, loading the page to be debugged at the network panel.
In response to receiving the network request detail information sent by the mobile terminal, step 404, the received network request detail information is displayed in the network panel.
In this embodiment, the specific operations of step 403 and step 404 are substantially the same as the operations of step 305 and step 306 in the embodiment shown in fig. 3A, and are not described again here.
Through steps 403 and 404, debugging the mobile-side Web page in the network panel of the Chrome developer tool installed in the computer device is realized.
In some optional implementation manners of this embodiment, the method for debugging a page may further include the following steps 405 and 406:
And step 406, responding to the received storage information data sent by the mobile terminal, and displaying the received storage information data in the application panel.
In this embodiment, the specific operations of step 405 and step 406 are substantially the same as the operations of step 308 and step 309 in the embodiment shown in fig. 3A, and are not described again here.
Through steps 405 and 406, debugging the mobile-side Web page in the application panel of the Chrome developer tool installed in the computer device is achieved.
In some optional implementations of this embodiment, the method for debugging a page may further include the following steps 407 and 408:
In this embodiment, the specific operations of step 407 and step 408 are substantially the same as the operations of step 311 and step 312 in the embodiment shown in fig. 3B, and are not described herein again.
Through step 407 and step 408, debugging the mobile-side Web page in the source code panel or console panel of the Chrome developer tool installed in the computer device is realized.
In some alternative implementations of the present embodiment, the mobile terminal and the computer device may communicate data through a socket.
According to the method for debugging the page, the mobile terminal Web page is debugged in the element panel of the Chrome developer tool installed in the computer equipment through the computer equipment and the mobile terminal connected with the computer equipment in a wireless network mode, wired connection between the mobile terminal and the computer equipment is not needed, development and debugging cost is reduced, and debugging efficiency is improved.
With further reference to fig. 5, as an implementation of the methods shown in the above-mentioned figures, the present application provides an embodiment of an apparatus for debugging a page, which is applied to a computer device in a system for debugging a page, where the system for debugging a page includes a computer device provided with a display and a mobile terminal connected by a wireless network, and the embodiment of the apparatus corresponds to the embodiment of the method shown in fig. 2, and the apparatus can be applied to various electronic devices in particular.
As shown in fig. 5, the apparatus 500 for debugging a page of the present embodiment includes: a document object model sending unit 501 and a page rendering and presenting unit 502. The document object model sending unit 501 is configured to, in response to detecting a first debugging request of a user on an element panel for a page to be debugged, open the page to be debugged on the element panel, and send a Document Object Model (DOM) tree of the page to be debugged to the mobile terminal; and the page rendering and presenting unit 502 is configured to re-render and present the page to be debugged based on the received DOM tree in response to receiving the DOM tree sent by the mobile terminal.
In this embodiment, specific processing of the document object model sending unit 501 and the page rendering and presenting unit 502 of the apparatus 500 for debugging a page and technical effects brought by the specific processing can refer to related descriptions of step 201 and step 202 in the corresponding embodiment of fig. 2, which are not described herein again.
In some optional implementations of this embodiment, the apparatus 500 may further include: a first page loading unit 503, configured to load the page to be debugged on the network panel in response to detecting a second debug request on the network panel for the page to be debugged; a first display unit 504 configured to display the received network request detail information in the network panel in response to receiving the network request detail information transmitted by the mobile terminal.
In some optional implementations of this embodiment, the apparatus 500 may further include: a second page loading unit 505, configured to, in response to detecting a third debugging request in an application panel for the page to be debugged, load the page to be debugged in the application panel; a second display unit 506 configured to display the received storage information data in the application panel in response to receiving the storage information data transmitted by the mobile terminal.
In some optional implementations of this embodiment, the apparatus 500 may further include: a first execution result sending unit 507, configured to, in response to detecting a fourth debugging request for the page to be debugged on a source code panel or a control panel, load and execute a code corresponding to the page to be debugged in a thread corresponding to the page to be debugged, obtain an execution result, and send the obtained execution result to the mobile terminal; a second execution result sending unit 508, configured to, in response to receiving the page event information sent by the mobile terminal, execute, in a thread corresponding to the page to be debugged, a code corresponding to the page to be debugged based on the received page event information, obtain an execution result, and send the obtained execution result to the mobile terminal.
In some optional implementations of this embodiment, the mobile terminal and the computer device may perform data communication through a socket.
It should be noted that details of implementation and technical effects of each unit in the apparatus for debugging a page provided in the embodiment of the present application may refer to descriptions of other embodiments in the present application, and are not described herein again.
Referring now to FIG. 6, shown is a block diagram of a computer system 600 suitable for use in implementing the computer devices of embodiments of the present application. The computer device shown in fig. 6 is only an example, and should not bring any limitation to the functions and the scope of use of the embodiments of the present application.
As shown in fig. 6, the computer system 600 includes a Central Processing Unit (CPU)601, which can perform various appropriate actions and processes according to a program stored in a Read Only Memory (ROM) 602 or a program loaded from a storage section 608 into a Random Access Memory (RAM) 603. In the RAM 603, various programs and data necessary for the operation of the system 600 are also stored. The CPU 601, ROM 602, and RAM 603 are connected to each other via a bus 604. An Input/Output (I/O) interface 605 is also connected to bus 604.
The following components are connected to the I/O interface 605: an input portion 606 including a keyboard, a mouse, and the like; an output section 607 including a Cathode Ray Tube (CRT), a Liquid Crystal Display (LCD), and the like, a speaker, and the like; a storage section 608 including a hard disk and the like; and a communication section 609 including a Network interface card such as a LAN (Local Area Network) card, a modem, or the like. The communication section 609 performs communication processing via a network such as the internet. The driver 610 is also connected to the I/O interface 605 as needed. A removable medium 611 such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, or the like is mounted on the drive 610 as necessary, so that a computer program read out therefrom is mounted in the storage section 608 as necessary.
In particular, according to an embodiment of the present disclosure, the processes described above with reference to the flowcharts may be implemented as computer software programs. For example, embodiments of the present disclosure include a computer program product comprising a computer program embodied on a computer readable medium, the computer program comprising program code for performing the method illustrated in the flow chart. In such an embodiment, the computer program may be downloaded and installed from a network through the communication section 609, and/or installed from the removable medium 611. The computer program performs the above-described functions defined in the method of the present application when executed by a Central Processing Unit (CPU) 601. It should be noted that the computer readable medium mentioned above in the present application may be a computer readable signal medium or a computer readable storage medium or any combination of the two. A computer readable storage medium may be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the foregoing. More specific examples of the computer readable storage medium may include, but are not limited to: an electrical connection having 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. In the present application, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. In this application, however, a computer readable signal medium may include a propagated data signal with computer readable program code embodied therein, for example, in baseband or as part of a carrier wave. Such a propagated data signal may take many forms, including, but not limited to, electro-magnetic, optical, or any suitable combination thereof. A computer readable signal medium may also be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device. Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to: wireless, wire, fiber optic cable, RF, etc., or any suitable combination of the foregoing.
Computer program code for carrying out operations for aspects of the present application may be written in any combination of one or more programming languages, including an object oriented programming language such as Java, Smalltalk, C + + or the like and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The program code may execute entirely on the user's computer, partly on the user's computer, as a stand-alone software package, partly on the user's computer and partly on a remote computer or entirely on the remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer through any type of network, including a Local Area Network (LAN) or a Wide Area Network (WAN), or the connection may be made to an external computer (for example, through the Internet using an Internet service provider).
The flowchart and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present application. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams and/or flowchart illustration, and combinations of blocks in the block diagrams and/or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.
The units described in the embodiments of the present application may be implemented by software or hardware. The described units may also be provided in a processor, and may be described as: a processor includes a document object model sending unit and a page rendering and presenting unit. Where the names of these units do not in some cases constitute a limitation on the unit itself, for example, a page rendering and rendering unit may also be described as a "unit that re-renders and renders a page to be debugged based on the received DOM tree".
As another aspect, the present application also provides a computer-readable medium, which may be contained in the apparatus described in the above embodiments; or may be present separately and not assembled into the device. The computer readable medium carries one or more programs which, when executed by the apparatus, cause the apparatus to: in response to detecting a fourth debugging request of the user on the element panel aiming at the page to be debugged, opening the page to be debugged on the element panel, and sending a Document Object Model (DOM) tree of the page to be debugged to the mobile terminal; and in response to receiving the DOM tree sent by the mobile terminal, re-rendering and presenting the page to be debugged based on the received DOM tree.
The above description is only a preferred embodiment of the application and is illustrative of the principles of the technology employed. It will be appreciated by those skilled in the art that the scope of the invention herein disclosed is not limited to the particular combination of features described above, but also encompasses other arrangements formed by any combination of the above features or their equivalents without departing from the spirit of the invention. For example, the above features may be replaced with (but not limited to) features having similar functions disclosed in the present application.
Claims (12)
1. A system for debugging a page comprising a wireless network connected computer device provided with a display and a mobile terminal, wherein:
the computer device is configured to:
in response to detecting a first debugging request aiming at a page to be debugged on an element panel, opening the page to be debugged on the element panel, and sending a Document Object Model (DOM) tree of the page to be debugged to the mobile terminal;
in response to receiving the DOM tree sent by the mobile terminal, re-rendering and presenting the page to be debugged based on the received DOM tree;
the mobile terminal is configured to:
in response to receiving a DOM tree sent by the computer equipment, rendering and presenting the page to be debugged based on the received DOM tree;
and responding to the detected DOM tree updating operation aiming at the page to be debugged, and sending the updated DOM tree to the computer equipment.
2. The system of claim 1, wherein:
the computer device is further configured to:
in response to detecting a second debugging request on a network panel aiming at a page to be debugged, loading the page to be debugged on the network panel;
in response to receiving the network request detail information sent by the mobile terminal, displaying the received network request detail information in the network panel; and
the mobile terminal is further configured to:
and sending the network request detail information corresponding to the page to be debugged to the computer equipment.
3. The system of claim 2, wherein:
the computer device is further configured to:
in response to detecting a third debugging request on an application panel aiming at the page to be debugged, loading the page to be debugged in the application panel;
in response to receiving the storage information data sent by the mobile terminal, displaying the received storage information data in the application panel; and
the mobile terminal is further configured to:
and sending the storage information data corresponding to the page to be debugged to the computer equipment.
4. The system of claim 1, wherein the mobile terminal and the computer device are in data communication via a socket.
5. A method for debugging pages, which is applied to a computer device in a system for debugging pages, wherein the system for debugging pages comprises a computer device provided with a display and a mobile terminal which are connected by a wireless network, and the method comprises the following steps:
in response to detecting a first debugging request of a user on an element panel aiming at a page to be debugged, opening the page to be debugged on the element panel, and sending a Document Object Model (DOM) tree of the page to be debugged to the mobile terminal, wherein the mobile terminal can respond when receiving the DOM tree sent by the computer equipment, and render and present the page to be debugged based on the received DOM tree;
and in response to receiving the DOM tree sent by the mobile terminal, re-rendering and presenting the page to be debugged based on the received DOM tree, wherein the mobile terminal equipment can respond when detecting the updating operation of the DOM tree of the page to be debugged and send the updated DOM tree to the computer equipment.
6. The method of claim 5, wherein the method further comprises:
in response to detecting a second debugging request on a network panel aiming at a page to be debugged, loading the page to be debugged on the network panel;
and in response to receiving the network request detail information sent by the mobile terminal, displaying the received network request detail information in the network panel.
7. The method of claim 6, wherein the method further comprises:
in response to detecting a third debugging request on an application panel aiming at the page to be debugged, loading the page to be debugged in the application panel;
and responding to the received storage information data sent by the mobile terminal, and displaying the received storage information data in the application panel.
8. An apparatus for debugging pages, applied to a computer device in a system for debugging pages, the system for debugging pages comprising a computer device provided with a display and a mobile terminal connected by a wireless network, the apparatus comprising:
the document object model sending unit is configured to respond to a first debugging request of a user on an element panel aiming at a page to be debugged, open the page to be debugged on the element panel, and send a Document Object Model (DOM) tree of the page to be debugged to the mobile terminal, wherein the mobile terminal can respond when receiving the DOM tree sent by the computer equipment and render and present the page to be debugged based on the received DOM tree;
and the page rendering and presenting unit is configured to re-render and present the page to be debugged based on the received DOM tree in response to receiving the DOM tree sent by the mobile terminal, wherein the mobile terminal equipment can respond when detecting the update operation of the DOM tree of the page to be debugged, and send the updated DOM tree to the computer equipment.
9. The apparatus of claim 8, wherein the apparatus further comprises:
a first page loading unit configured to load the page to be debugged at a network panel in response to detecting a second debug request at the network panel for the page to be debugged;
a first display unit configured to display the received network request detail information in the network panel in response to receiving the network request detail information transmitted by the mobile terminal.
10. The apparatus of claim 9, wherein the apparatus further comprises:
a second page loading unit configured to load the page to be debugged in an application panel in response to detecting a third debugging request for the page to be debugged in the application panel;
a second display unit configured to display the received storage information data in the application panel in response to receiving the storage information data transmitted by the mobile terminal.
11. A computer device, comprising:
one or more processors;
a storage device having one or more programs stored thereon,
the one or more programs, when executed by the one or more processors, cause the one or more processors to implement the method of any of claims 5-7.
12. A computer-readable storage medium, on which a computer program is stored, wherein the computer program, when executed by one or more processors, implements the method of any one of claims 5-7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811460011.2A CN109582580B (en) | 2018-11-30 | 2018-11-30 | System, method and apparatus for debugging pages |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811460011.2A CN109582580B (en) | 2018-11-30 | 2018-11-30 | System, method and apparatus for debugging pages |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN109582580A CN109582580A (en) | 2019-04-05 |
| CN109582580B true CN109582580B (en) | 2022-04-12 |
Family
ID=65925780
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201811460011.2A Active CN109582580B (en) | 2018-11-30 | 2018-11-30 | System, method and apparatus for debugging pages |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109582580B (en) |
Families Citing this family (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112069060A (en) * | 2020-08-13 | 2020-12-11 | 北京达佳互联信息技术有限公司 | Data processing method and device, electronic equipment and storage medium |
| CN113220571B (en) * | 2021-05-11 | 2024-04-19 | 北京百度网讯科技有限公司 | Method, system, equipment and storage medium for debugging mobile webpage |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103365764A (en) * | 2012-03-27 | 2013-10-23 | 百度在线网络技术（北京）有限公司 | Wireless page test method and unit |
| CN103377127A (en) * | 2012-04-28 | 2013-10-30 | 阿里巴巴集团控股有限公司 | Development testing system, testing method and device for webpage product |
| CN108011775A (en) * | 2016-10-28 | 2018-05-08 | 百度在线网络技术（北京）有限公司 | Method and apparatus for carrying out network test |
| CN108280027A (en) * | 2018-02-08 | 2018-07-13 | 金蝶软件（中国）有限公司 | A kind of concurrently debugging rendering intent and device of script |
| US10135936B1 (en) * | 2017-10-13 | 2018-11-20 | Capital One Services, Llc | Systems and methods for web analytics testing and web development |
-
2018
- 2018-11-30 CN CN201811460011.2A patent/CN109582580B/en active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103365764A (en) * | 2012-03-27 | 2013-10-23 | 百度在线网络技术（北京）有限公司 | Wireless page test method and unit |
| CN103377127A (en) * | 2012-04-28 | 2013-10-30 | 阿里巴巴集团控股有限公司 | Development testing system, testing method and device for webpage product |
| CN108011775A (en) * | 2016-10-28 | 2018-05-08 | 百度在线网络技术（北京）有限公司 | Method and apparatus for carrying out network test |
| US10135936B1 (en) * | 2017-10-13 | 2018-11-20 | Capital One Services, Llc | Systems and methods for web analytics testing and web development |
| CN108280027A (en) * | 2018-02-08 | 2018-07-13 | 金蝶软件（中国）有限公司 | A kind of concurrently debugging rendering intent and device of script |
Non-Patent Citations (2)
| Title |
|---|
| 远程调试工具weinre使用教程";oadaM92;《博客园，https://www.cnblogs.com/oadaM92/p/4377364.htm》;20150330;第1-2页 * |
| 远程调试工具weinre使用教程";oadaM92;《博客园，https://www.cnblogs.com/oadaM92/p/4377364.html》;20150330;第1-2页 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN109582580A (en) | 2019-04-05 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109558323B (en) | System, method and apparatus for debugging pages | |
| CN108984714B (en) | Page rendering method and device, electronic equipment and computer readable medium | |
| EP3518124A1 (en) | Webpage rendering method and related device | |
| US8245125B1 (en) | Hybrid rendering for webpages | |
| CN109634490B (en) | List display method, device, equipment and storage medium | |
| US11758088B2 (en) | Method and apparatus for aligning paragraph and video | |
| CN110020329B (en) | Method, device and system for generating webpage | |
| CN109582317B (en) | Method and apparatus for debugging hosted applications | |
| CN106874519B (en) | Page display method and device | |
| CN105718313A (en) | Application operation method and device | |
| US11201806B2 (en) | Automated analysis and recommendations for highly performant single page web applications | |
| CN113010827B (en) | Page rendering method and device, electronic equipment and storage medium | |
| CN110780874B (en) | Method and device for generating information | |
| CN110795649A (en) | Target page display method, device and system and electronic equipment | |
| US10951486B2 (en) | Terminal device, UI expansion method, and UI expansion program | |
| CN111443909B (en) | Method and device for generating page | |
| CN109582580B (en) | System, method and apparatus for debugging pages | |
| CN107391175B (en) | Control data configuration method and computer readable storage medium | |
| CN107330087B (en) | Page file generation method and device | |
| CN114756228A (en) | Page processing method, device, equipment and storage medium | |
| CN113220381A (en) | Click data display method and device | |
| CN112181408A (en) | Method and device for displaying view list on front page of application program | |
| CN113656041A (en) | Data processing method, device, equipment and storage medium | |
| US11438403B2 (en) | Page presentation method and system, computer system, and computer readable medium | |
| CN113448578A (en) | Page data processing method, processing system, electronic device and readable storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |