CN109582580A - For debugging system, the method and apparatus of the page - Google Patents
For debugging system, the method and apparatus of the page Download PDFInfo
- Publication number
- CN109582580A CN109582580A CN201811460011.2A CN201811460011A CN109582580A CN 109582580 A CN109582580 A CN 109582580A CN 201811460011 A CN201811460011 A CN 201811460011A CN 109582580 A CN109582580 A CN 109582580A
- Authority
- CN
- China
- Prior art keywords
- page
- debugged
- mobile terminal
- panel
- response
- 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.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 50
- 230000004044 response Effects 0.000 claims description 98
- 230000005540 biological transmission Effects 0.000 claims description 25
- 230000006854 communication Effects 0.000 claims description 15
- 238000004891 communication Methods 0.000 claims description 14
- 238000009877 rendering Methods 0.000 claims description 11
- 238000004590 computer program Methods 0.000 claims description 6
- VYZAMTAEIAYCRO-UHFFFAOYSA-N Chromium Chemical compound [Cr] VYZAMTAEIAYCRO-UHFFFAOYSA-N 0.000 abstract description 30
- 238000010586 diagram Methods 0.000 description 9
- 230000006870 function Effects 0.000 description 8
- 230000008569 process Effects 0.000 description 6
- 238000012545 processing Methods 0.000 description 5
- 238000005516 engineering process Methods 0.000 description 4
- 238000009434 installation Methods 0.000 description 4
- 230000000694 effects Effects 0.000 description 3
- 230000003287 optical effect Effects 0.000 description 3
- 230000001360 synchronised effect Effects 0.000 description 3
- 235000014510 cooky Nutrition 0.000 description 2
- 230000000977 initiatory effect Effects 0.000 description 2
- 238000007689 inspection Methods 0.000 description 2
- 239000004973 liquid crystal related substance Substances 0.000 description 2
- 230000005291 magnetic effect Effects 0.000 description 2
- 239000004065 semiconductor Substances 0.000 description 2
- 238000012546 transfer Methods 0.000 description 2
- 230000001960 triggered effect Effects 0.000 description 2
- 230000009471 action Effects 0.000 description 1
- 230000000903 blocking effect Effects 0.000 description 1
- 230000006835 compression Effects 0.000 description 1
- 238000007906 compression Methods 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 238000001514 detection method Methods 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 238000003745 diagnosis Methods 0.000 description 1
- 235000013399 edible fruits Nutrition 0.000 description 1
- 230000005611 electricity Effects 0.000 description 1
- 239000000203 mixture Substances 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 239000013307 optical fiber Substances 0.000 description 1
- 238000005457 optimization Methods 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—Prevention of errors by analysis, debugging or testing of software
- G06F11/362—Debugging of software
- G06F11/3644—Debugging of software by instrumenting at runtime
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Computer Hardware Design (AREA)
- Quality & Reliability (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Debugging And Monitoring (AREA)
Abstract
The embodiment of the present application discloses system, method and apparatus for debugging the page.One specific embodiment of this method includes: the mobile terminal by computer equipment and with computer equipment wireless network connection, it realizes and debugs mobile terminal Web page in the element panel for the Chrome developer's tool installed in computer equipment, without passing through wired connection between mobile terminal and computer equipment, then exploitation debugging cost is reduced, debugging efficiency is improved.
Description
Technical field
The invention relates to field of computer technology, and in particular to for debugging system, the method and apparatus of the page.
Background technique
With the development of mobile internet, Web page the show form important as one in mobile terminal is widely applied to
On various mobile terminals.Here mobile terminal Web page includes in the Web page and mobile terminal browser in the application of mobile terminal
The simple Web page of display.In order to easily develop and debug mobile terminal web page, a kind of common method is set in computer
Mobile terminal is passed through USB (Universal Serial Bus, universal serial bus) by standby upper installation Chrome developer's tool
Data line is connected in computer equipment, to complete each panel in Chrome developer's tool (for example, source code face
Plate, control panel, element panel, network panel, using panel etc.) in mobile terminal Web page is debugged.However, working as
Mobile terminal cannot use this not when Same Site or mobile terminal do not support USB data line with computer equipment again
Kind method debugs mobile terminal Web page in real time.In addition, publication (applies quotient in App Store due to the limitation of Apple Inc.
Shop) remote debugging agreement cannot be opened in inner application, this results in that Chrome developer cannot be utilized on a computing device
Tool is realized to the mobile terminal Web page for being equipped with iOS operating system (iOS is the Mobile operating system developed by Apple Inc.)
It is debugged in face.
Summary of the invention
The embodiment of the present application proposes system, method and apparatus for debugging the page.
In a first aspect, the embodiment of the present application provides a kind of system for debugging the page, including wireless network connection
It is provided with the computer equipment and mobile terminal of display, in which: the computer equipment is configured to: in response to detecting needle
The first debugging request to the page to be debugged in element panel, the page to be debugged described in the element panel opening, and will
The DOM Document Object Model dom tree of the page to be debugged is sent to the mobile terminal；In response to receiving the mobile terminal
The dom tree of transmission is rendered again based on the dom tree received and the page to be debugged is presented；The mobile terminal is configured
At: the dom tree sent in response to receiving the computer equipment is rendered based on the dom tree received and is presented described wait adjust
Try the page；In response to detecting that the dom tree for being directed to the page to be debugged updates operation, updated dom tree is sent to institute
State computer equipment.
In some embodiments, the computer equipment is further configured to: in response to detecting that being directed to the page to be debugged exists
Second debugging request of network panel loads the page to be debugged in the network panel；
The network request detail information sent in response to receiving the mobile terminal, shows institute in the network panel
The network request detail information received；And the mobile terminal is further configured to: will net corresponding with the page to be debugged
Network request detail information is sent to the computer equipment.
In some embodiments, the computer equipment is further configured to: being directed to the page to be debugged in response to detecting
Face loads the page to be debugged in the application panel in the third debugging request of application panel；In response to receiving
The storage information data for stating mobile terminal transmission, in the storage information data received using display in panel；And institute
It states mobile terminal to be further configured to: storage information data corresponding with the page to be debugged being sent to the computer and is set
It is standby.
In some embodiments, the computer equipment is further configured to: being directed to the page to be debugged in response to detecting
Face loads simultaneously in thread corresponding with the page to be debugged in the first debugging request of source code panel or control panel
The corresponding code of the page to be debugged is executed, obtains implementing result, and obtained implementing result is sent to the shifting
Dynamic terminal；The page events information sent in response to receiving the mobile terminal, in line corresponding with the page to be debugged
The corresponding code of the page to be debugged is executed based on the page events information received in journey, obtains implementing result, and will
Obtained implementing result is sent to the mobile terminal；The mobile terminal is further configured to: in response to receiving the meter
The implementing result that machine equipment is sent is calculated, based on the implementing result rendering received and the page to be debugged is presented；In response to
It detects that user is directed to the operation of the page to be debugged, generates relevant to operation page events information, and by institute
The page events information of generation is sent to the computer equipment.
In some embodiments, the mobile terminal and the computer equipment carry out data communication by socket.
Second aspect, the embodiment of the present application provide a kind of method for debugging the page, applied to for debugging the page
System in computer equipment, the system for debugging the page includes the computer for being provided with display of wireless network connection
Equipment and mobile terminal, this method comprises: in response to detecting that user debugs for the page to be debugged the 4th of element panel
Request, the page to be debugged described in the element panel opening, and by the DOM Document Object Model dom tree of the page to be debugged
It is sent to the mobile terminal；The dom tree sent in response to receiving the mobile terminal, again based on the dom tree received
It renders and the page to be debugged is presented.
In some embodiments, the method also includes: in response to detect be directed to the page to be debugged in network panel
Second debugging request loads the page to be debugged in the network panel；It is sent in response to receiving the mobile terminal
Network request detail information shows received network request detail information in the network panel.
In some embodiments, the method also includes: in response to detect be directed to the page to be debugged in application surface
The third debugging request of plate loads the page to be debugged in the application panel；In response to receiving the mobile terminal
The storage information data of transmission, in the storage information data received using display in panel.
In some embodiments, the method also includes: in response to detect be directed to the page to be debugged in source code
First debugging request of panel or control panel, loaded in thread corresponding with the page to be debugged and execute it is described to
The corresponding code of the page is debugged, obtains implementing result, and obtained implementing result is sent to the mobile terminal；Response
In the page events information for receiving the mobile terminal and sending, based on being received in thread corresponding with the page to be debugged
The page events information that arrives executes the corresponding code of the page to be debugged, obtains implementing result, and by obtained execution
As a result it is sent to the mobile terminal.
In some embodiments, the mobile terminal and the computer equipment carry out data communication by socket.
The third aspect, the embodiment of the present application provide it is a kind of for debugging the device of the page, applied to for debugging the page
System in computer equipment, the system for debugging the page includes the computer for being provided with display of wireless network connection
Equipment and mobile terminal, the device include: DOM Document Object Model transmission unit, be configured in response to detect user be directed to
The page is debugged in the first debugging request of element panel, in the element panel opening page to be debugged, and by the page to be debugged
DOM Document Object Model dom tree is sent to mobile terminal；Page rendering and display unit are configured in response to receive mobile whole
The dom tree sent is held, is rendered again based on the dom tree received and the page to be debugged is presented.
In some embodiments, device further include: first page loading unit is configured in response to detect and is directed to
The page to be debugged loads the page to be debugged in network panel in the second debugging request of network panel；First display unit is matched
It is set to the network request detail information in response to receiving mobile terminal transmission, shows that received network is asked in network panel
Seek detail information.
In some embodiments, device further include: second page loading unit is configured in response to detect and is directed to
The page to be debugged loads the page to be debugged in application panel in the third debugging request of application panel；Second display unit, quilt
It is configured to receive the storage information data of mobile terminal transmission, shows received storage information in application panel
Data.
In some embodiments, device further include: the first implementing result transmission unit is configured in response to detect
For the page to be debugged source code panel or control panel the 4th debugging request, in thread corresponding with the page to be debugged
Middle load simultaneously executes the corresponding code of the page to be debugged, obtains implementing result, and obtained implementing result is sent to shifting
Dynamic terminal；Second implementing result transmission unit is configured in response to receive the page events information of mobile terminal transmission,
The corresponding code of the page to be debugged is executed based on the page events information received in thread corresponding with the page to be debugged, is obtained
Implementing result, and obtained implementing result is sent to mobile terminal.
In some embodiments, mobile terminal and computer equipment carry out data communication by socket.
Fourth aspect, the embodiment of the present application provide a kind of electronic equipment, comprising: one or more processors；Storage dress
It sets, is stored thereon with one or more programs, when said one or multiple programs are executed by said one or multiple processors,
So that said one or multiple processors realize the method as described in implementation any in second aspect.
5th aspect, the embodiment of the present application provide a kind of computer readable storage medium, are stored thereon with computer journey
Sequence, wherein realized when the computer program is executed by one or more processors such as implementation description any in second aspect
Method.
It is provided by the embodiments of the present application for debugging system, the method and apparatus of the page, by computer equipment in response to
Detect the first debugging request for the page to be debugged in element panel, in the element panel opening page to be debugged, and will
DOM (Document Object Model, the DOM Document Object Model) tree of the page to be debugged is sent to mobile terminal；And it calculates
The dom tree that machine equipment is sent in response to receiving mobile terminal, is rendered again based on the dom tree received and page to be debugged is presented
Face；The dom tree that mobile terminal is sent in response to receiving computer equipment, is rendered based on the dom tree received and is presented wait adjust
Try the page；And mobile terminal is operated in response to detecting that the dom tree for being directed to the page to be debugged updates, by updated dom tree
It is sent to computer equipment.Then, the mobile terminal by computer equipment and with computer equipment wireless network connection is realized
Mobile terminal Web page is debugged in the element panel for the Chrome developer's tool installed in computer equipment, without
By wired connection between mobile terminal and computer equipment, exploitation debugging cost is then reduced, debugging efficiency is improved.
Detailed description of the invention
By reading a detailed description of non-restrictive embodiments in the light of the attached drawings below, the application's is other
Feature, objects and advantages will become more apparent upon:
Fig. 1 is that one embodiment of the application can be applied to exemplary system architecture figure therein；
Fig. 2 is the timing diagram according to one embodiment of the system for debugging the page of the application；
Fig. 3 A and Fig. 3 B are the timing diagrams according to another embodiment of the system for debugging the page of the application；
Fig. 4 is the flow chart according to one embodiment of the method for debugging the page of the application；
Fig. 5 is the structural schematic diagram according to one embodiment of the device for debugging the page of the application；
Fig. 6 is adapted for the structural schematic diagram for the computer system for realizing the computer equipment of the embodiment of the present application.
Specific embodiment
The application is described in further detail with reference to the accompanying drawings and examples.It is understood that this place is retouched
The specific embodiment stated is used only for explaining related invention, rather than the restriction to the invention.It also should be noted that in order to
Convenient for description, part relevant to related invention is illustrated only in attached drawing.
It should be noted that in the absence of conflict, the features in the embodiments and the embodiments of the present application can phase
Mutually combination.The application is described in detail below with reference to the accompanying drawings and in conjunction with the embodiments.
Fig. 1 is shown can be using the method for debugging the page of the application or the implementation of the device for debugging the page
The exemplary system architecture 100 of example.
As shown in Figure 1, system architecture 100 may include mobile terminal 101, wireless network 102 and computer equipment 103.
Wireless network 102 between mobile terminal 101 and computer equipment 103 to provide the medium of wireless communication link.Wireless network
Network 102 may include various wireless connection types.It should be pointed out that above-mentioned wireless connection type can include but is not limited to
3G/4G connection, WiFi connection, bluetooth connection, WiMAX connection, Zigbee connection, UWB (ultra wideband) connection and
Other currently known or exploitation in the future radio connections.
User can be used mobile terminal 101 and be interacted by wireless network 102 with computer equipment 103, to receive or send out
Send message etc..Various telecommunication customer end applications, such as mobile terminal Web application, web page browsing can be installed on mobile terminal 101
Device application, shopping class application, searching class application, instant messaging tools, mailbox client, social platform software etc..
Mobile terminal 101 can be hardware, be also possible to software.When mobile terminal 101 is hardware, can be with aobvious
Display screen and the various electronic equipments for supporting Web page browsing, including but not limited to smart phone, tablet computer, e-book are read
Read device, MP3 player (Moving Picture Experts Group Audio Layer III, dynamic image expert compression
Standard audio level 3), MP4 (Moving Picture Experts Group Audio Layer IV, dynamic image expert pressure
Contracting standard audio level 4) player etc..When mobile terminal 101 is software, it may be mounted at above-mentioned cited electronics and set
In standby.Multiple softwares or software module may be implemented into it, and single software or software module also may be implemented into.It does not do and has herein
Body limits.
Computer equipment 103 can be hardware, be also possible to software.When computer equipment 103 is hardware, tool can be
There is display screen and supported web page browses and be equipped with the electronic equipment of Chrome developer's tool.
Mobile terminal 101 can be cooperated with computer equipment 103 by wireless network 102, be realized in computer equipment 103
Mobile terminal Web page is debugged in the source code panel or control panel of Chrome developer's tool of middle installation.
It should be noted that for debugging the method for the page generally by computer equipment provided by the embodiment of the present application
103 execute, and correspondingly, the device for debugging the page is generally positioned in computer equipment 103.
It should be noted that computer equipment 103 can be hardware, it is also possible to software.When computer equipment 103 is hard
When part, the distributed server cluster of multiple server compositions may be implemented into, individual server also may be implemented into.Work as calculating
When machine equipment 103 is software, multiple softwares or software module (such as providing Distributed Services) may be implemented into, it can also be with
It is implemented as single software or software module.It is not specifically limited herein.
It should be understood that the number of mobile terminal, network in Fig. 1 and computer equipment is only schematical.According to reality
It now needs, can have any number of mobile terminal, network and computer equipment.
With continued reference to Fig. 2, it illustrates the timing according to one embodiment of the system for debugging the page of the application
200。
The system for debugging the page in the embodiment of the present application may include that wireless network connection is provided with display
Computer equipment and mobile terminal.
As shown in Fig. 2, may include according to the timing 200 of one embodiment of the system for debugging the page of the application
Following steps:
Step 201, computer equipment in response to detect be directed to the page to be debugged element panel the first debugging request,
Mobile terminal is sent in the element panel opening page to be debugged, and by the dom tree of the page to be debugged.
In the present embodiment, computer equipment can detect for the page to be debugged element panel (that is,
Elements panel) the first debugging request in the case where, the Chrome developer that can be installed in computer equipment first
The element panel opening page to be debugged of tool.Here, the dom tree of the page to be debugged can be extracted and shown in element panel,
Any page elements of the page to be debugged can be searched by the dom tree, Developmental Engineer can be with real-time edition any page face element
The each tag attributes and Style Attributes of element, and the modification meeting caused by above-mentioned real-time edition to tag attributes and Style Attributes
It is fed back inside browser in real time.Then, computer equipment can by it is above-mentioned extract and show in element panel to
The dom tree of the debugging page is sent to mobile terminal.
Step 202, the dom tree that computer equipment is sent in response to receiving mobile terminal, based on the dom tree weight received
Newly renders and the page to be debugged is presented.
In the present embodiment, if computer equipment receives the dom tree of mobile terminal transmission, show that mobile terminal detects
The update operation of dom tree has been arrived, and has had sent the dom tree after latest update, then computer equipment can be based on being received
Dom tree render again and the page to be debugged be presented, to realize in computer equipment and mobile terminal shown to be debugged
The synchronization of the dom tree of the page.
It should be noted that being rendered based on dom tree and the page is presented is the well-known technique studied and applied extensively at present,
Details are not described herein.
Step 203, the dom tree that mobile terminal is sent in response to receiving computer equipment, based on the dom tree wash with watercolours received
It contaminates and the page to be debugged is presented.
Here, if mobile terminal receives the dom tree of computer equipment transmission, show that Developmental Engineer sets in computer
The attribute that the page elements of the page to be debugged are edited in element panel in Chrome developer's tool of standby upper installation, causes
The dom tree of the page to be debugged shown in computer equipment changes, then mobile terminal is also wanted to show in synchronous computer equipment
The dom tree of the page to be debugged shown, then mobile terminal can be rendered based on the dom tree received and the page to be debugged is presented.
Step 204, mobile terminal, will be updated in response to detecting that the dom tree for being directed to the page to be debugged updates operation
Dom tree is sent to computer equipment.
Here, mobile terminal can will be moved in the case where detecting that the dom tree for the page to be debugged updates operation
The updated dom tree of the page to be debugged shown in terminal is sent to computer equipment.In this way, computer equipment can be real
When synchronous mobile terminal newest dom tree.
In some optional implementations of the present embodiment, mobile terminal and computer equipment can pass through socket
(Socket) data communication is carried out.
The system provided by the above embodiment for debugging the page of the application, by computer equipment in response to detecting
For the page to be debugged element panel the first debugging request, in the element panel opening page to be debugged, and will be to be debugged
The dom tree of the page is sent to mobile terminal；And the dom tree that computer equipment is sent in response to receiving mobile terminal, it is based on
The dom tree received renders again and the page to be debugged is presented；The DOM that mobile terminal is sent in response to receiving computer equipment
Tree, is rendered based on the dom tree received and the page to be debugged is presented；And mobile terminal is directed to page to be debugged in response to detecting
The dom tree in face updates operation, and updated dom tree is sent to computer equipment.Then, by computer equipment and with calculating
The mobile terminal of machine equipment wireless network connection realizes the element for the Chrome developer's tool installed in computer equipment
Mobile terminal Web page is debugged in panel, without, by wired connection, then reducing between mobile terminal and computer equipment
Exploitation debugging cost, improves debugging efficiency.
With further reference to Fig. 3 A and Fig. 3 B, it illustrates the timing of another embodiment of the system for debugging the page
300。
The system for debugging the page in the embodiment of the present application may include that wireless network connection is provided with display
Computer equipment and mobile terminal.
As shown in Figure 3A, the timing 300 of another embodiment of the system according to the application for debugging the page can be with
The following steps are included:
Step 301, computer equipment in response to detect be directed to the page to be debugged element panel the first debugging request,
Mobile terminal is sent in the element panel opening page to be debugged, and by the dom tree of the page to be debugged.
Step 302, the dom tree that computer equipment is sent in response to receiving mobile terminal, based on the dom tree weight received
Newly renders and the page to be debugged is presented.
Step 303, the dom tree that mobile terminal is sent in response to receiving computer equipment, based on the dom tree wash with watercolours received
It contaminates and the page to be debugged is presented.
Step 304, mobile terminal, will be updated in response to detecting that the dom tree for being directed to the page to be debugged updates operation
Dom tree is sent to computer equipment.
In the present embodiment, the concrete operations of step 301, step 302, step 303 and step 304 and reality shown in Fig. 2
The operation for applying step 201 in example, step 202, step 203 and step 204 is essentially identical, and details are not described herein.
Step 305, computer equipment in response to detect be directed to the page to be debugged network panel the second debugging request,
The page to be debugged is loaded in network panel.
In the present embodiment, Chrome developer's tool, Chrome developer's tool can be installed in computer equipment
In may include network panel (that is, Network panel).Computer equipment can detected for the page to be debugged in network
In the case where second debugging request of panel, the page to be debugged is loaded in network panel.In this way, can be recorded in network panel
The detail information of the network request of the shown page to be debugged on the computer device can specifically include and treat from initiation
Start to analyze HTTP (hypertext transfer protocol, Hyper-Text Transfer after the Webpage request of the debugging page
Protocol each request resource information (including state, resource type, size, time used, the request, sound obtained after) requesting
Answer, input parameter, output parameter etc.), Developmental Engineer can carry out optimization of network performance according to these resource request informations.
Here, computer equipment can confirmly detect the second debugging request using various implementations.For example, computer
Equipment can detect under the operational circumstances that the network panel of Chrome developer's tool opens the page to be debugged, determine inspection
Measure the second debugging request.Wherein, the operation that the page to be debugged is opened in the network panel of Chrome developer's tool both may be used
To be the operation of user's triggering, it is also possible to the operation that program code logic is triggered.
Step 306, the network request detail information that computer equipment is sent in response to receiving mobile terminal, in network face
Received network request detail information is shown in plate.
In the present embodiment, computer equipment can be in the feelings for the network request detail information for receiving mobile terminal transmission
Under condition, received network request detail information is shown in the network panel of Chrome developer's tool of computer equipment.
Step 307, network request detail information corresponding with the page to be debugged is sent to computer equipment by mobile terminal.
In the present embodiment, the corresponding network of the page to be debugged that mobile terminal will can be shown on mobile terminals in real time
Request detail information is sent to computer equipment.
In practice, mobile terminal can use the primary Resource Timing API of browser and will show in mobile terminal
The corresponding network request detail information of the page to be debugged pass through according to the agreement in network panel in Chrome developer's tool
Socket is sent to computer equipment.Here, the corresponding network request details letter of the page to be debugged shown on mobile terminals
Breath can specifically include on mobile terminals after initiating to the request of the Webpage of the page to be debugged analyze HTTP request
Obtain afterwards each request resource information (including state, resource type, size, the time used, request, response, input parameter,
Output parameter etc.).
Step 307 is arrived by step 305, the net of Chrome developer's tool installed in computer equipment may be implemented
Mobile terminal Web page is debugged in network panel, without, by wired connection, then dropping between mobile terminal and computer equipment
Low exploitation debugging cost, improves debugging efficiency.
Step 308, computer equipment in response to detect be directed to the page to be debugged application panel third debugging request,
The page to be debugged is loaded in application panel.
In the present embodiment, computer equipment can be debugged detecting the third for the page to be debugged in application panel
In the case where request, in application panel (that is, Application panel.Some versions are also referred to as resource panel) in load wait adjust
Try the page.All resources loaded using panel inspection, including IndexedDB, Web SQL data can be used in Developmental Engineer
Library is locally stored, session storage, browser rs cache (Cookie), application cache, image, the font and style table.
Step 309, the storage information data that computer equipment is sent in response to receiving mobile terminal, in application panel
Show received storage information data.
In the present embodiment, computer equipment can be the case where receiving the storage information data of mobile terminal transmission
Under, in the storage information data received using display in panel of Chrome developer's tool of computer equipment, that is, show
Storage information data of the page to be debugged in mobile terminal.
Step 310, storage information data corresponding with the page to be debugged is sent to computer equipment by mobile terminal.
In the present embodiment, the corresponding storage of the page to be debugged that mobile terminal will can be shown on mobile terminals in real time
Information data is sent to computer equipment.
In practice, mobile terminal can use LocalStorage API and SessionStorage API and obtain movement eventually
The corresponding storage information data of the page to be debugged shown in end.Here, the page to be debugged shown on mobile terminals is corresponding
Storage information data can specifically include IndexedDB, Web SQL database, be locally stored, session storage, browser it is slow
Deposit (Cookie), application cache, image, the font and style table.
Step 310 is arrived by step 308, answering for the Chrome developer's tool installed in computer equipment may be implemented
With mobile terminal Web page is debugged in panel, without, by wired connection, then being dropped between mobile terminal and computer equipment
Low exploitation debugging cost, improves debugging efficiency.
In some optional implementations of the present embodiment, above-mentioned timing 300 can also include step as shown in Figure 3B
Rapid 311 arrive step 314:
Step 311, computer equipment is directed to the page to be debugged in source code panel or control panel in response to detecting
The first debugging request, the corresponding code of the page to be debugged is loaded and executed in thread corresponding with the page to be debugged, is obtained
Implementing result, and obtained implementing result is sent to mobile terminal.
Here, Chrome developer's tool can be installed in computer equipment.Computer equipment can detect needle
The first debugging to the page to be debugged in source code panel (i.e. Source panel) or control panel (i.e. Console panel) is asked
In the case where asking, the corresponding code of the page to be debugged is loaded and executed in thread corresponding with the page to be debugged first, is obtained
Implementing result.Then, obtained implementing result is sent to the mobile terminal with computer equipment wireless network connection.
Here, computer equipment can confirmly detect the first debugging request using various implementations.For example, computer
Equipment can open the page to be debugged in the source code panel or control panel of Chrome developer's tool detecting
Under operational circumstances, the first debugging request is confirmly detected.Wherein, in the source code panel of Chrome developer's tool or control
The operation of the page to be debugged is opened in panel either the operation that user triggers, is also possible to what program code logic was triggered
Operation.
Here, computer equipment can be newly-built pair of the page to be debugged when primary detection is opened to the page to be debugged
The thread answered.For example, can be created when in the page to be debugged including JavaScript code for the page to be debugged corresponding
Webworker sub thread is as thread corresponding with the page to be debugged.To be loaded in thread corresponding with the page to be debugged
And the corresponding code of the page to be debugged is executed, the process for obtaining implementing result can be created corresponding with the page to be debugged
Webworker sub thread in execute, and the implementation procedure do not influence the operation of main thread.
Webworker is the JavaScript multithreading solution that HTML5 is provided, it can be by some big calculating
The code of amount gives Webworker operation without blocked user main thread, main thread of the Webworker in current JavaScript
In, a JavaScript file is loaded to create a sub thread using worker class, plays the effect for not blocking operation mutually
Fruit, and the interface of data exchange between main thread and sub thread: postMessage and onMessage is provided, to complete main line
Data communication between journey and Webworker sub thread.
In practice, since Webworker is the freestanding environment of a similar JavaScript, which is not supported
The Windows API (application programming interfaces, Application Programming Interface) that JavaScript is supported
With Document API, therefore, it is necessary to realize a virtual Windows API and Document API in Webworker,
I.e. so that Webworker also supports Windows API and Document API.That is, in thread corresponding with the page to be debugged
The corresponding code of the page to be debugged is loaded and executed, implementing result is obtained, wherein implementing result may include: to call Windows
The obtained object of API (object) and the calling obtained DOM of Document API (Document Object Model, text
Shelves object model) tree.
In order to enable the page that mobile terminal is shown is synchronous with the obtained implementing result of code is executed in computer equipment,
Obtained implementing result can be sent to mobile terminal after obtaining implementing result by computer equipment.
Step 312, computer equipment in response to receive mobile terminal transmission page events information, with page to be debugged
The corresponding code of the page to be debugged is executed based on the page events information received in the corresponding thread in face, obtains implementing result,
And obtained implementing result is sent to mobile terminal.
Here, if computer equipment receives the page events information of mobile terminal transmission, show that mobile terminal detects
To the operation of user on mobile terminals, page events information relevant to aforesaid operations is generated, and by the page generated
Event information has been sent to computer equipment.In this way, computer equipment can be based in thread corresponding with the page to be debugged
The page events information that is received executes the corresponding code of the page to be debugged, obtains implementing result, and by obtained execution
As a result it is sent to mobile terminal.
Here, page events information may include various information relevant to user's operation.For example, page events information can
To include but is not limited to: the page elements of user's operation mark, the time for receiving user's operation, user's operation action type
The specifying information content of (for example, click, sliding), user input is (for example, text that user inputs in text box or user
The specific choice item selected in selection type page elements).
Here, computer equipment can be in thread corresponding with the page to be debugged, based on the page events letter received
Breath executes operation logic expressed by the corresponding code of the page to be debugged, obtains implementing result.It is understood that ought here
When the corresponding thread of the page to be debugged is Webworker sub thread, institute is based in thread corresponding with the page to be debugged here
The page events information received executes the corresponding code of the page to be debugged, and obtained implementing result also may include: to call
The obtained object of Windows API (object) and the calling obtained dom tree of Document API.
Here, Developmental Engineer breakpoint can be set in source code panel come debug the code of the page to be debugged (for example,
JavaScript code).Control deck plate record diagnosis information also can be used in Developmental Engineer, or uses control deck plate
It is interacted on the page with JavaScript as shell.
Step 313, the implementing result that mobile terminal is sent in response to receiving computer equipment, based on the execution received
As a result render and present the page to be debugged.
Here, mobile terminal can be in the case where receiving the implementing result of computer equipment transmission, based on being received
Implementing result rendering and be presented the page to be debugged.
It should be noted that above-mentioned rendering and the various methods that the page is presented are to study and apply known extensively at present
Technology, details are not described herein.
Step 204, mobile terminal generates relevant to operation in response to detecting that user is directed to the operation of the page to be debugged
Page events information, and page events information generated is sent to computer equipment.
In the present embodiment, mobile terminal can be raw in the case where detecting that user is directed to the operation of the page to be debugged
Calculating is sent at page events information relevant to above-mentioned detected operation, and by page events information generated
Machine equipment.In this way, computer equipment can execute above-mentioned steps 202.
Step 314 is arrived by step 311, the source of Chrome developer's tool installed in computer equipment may be implemented
Mobile terminal Web page is debugged in code panel or control deck plate, without leading between mobile terminal and computer equipment
Wired connection is crossed, exploitation debugging cost is then reduced, improves debugging efficiency.
From figure 3, it can be seen that the system for debugging the page compared with the corresponding embodiment of Fig. 2, in the present embodiment
Process 300 had more in the network panel for the Chrome developer's tool installed in computer equipment, using panel, source generation
The step of debugging mobile terminal Web page in code panel and control deck plate.The scheme of the present embodiment description may be implemented as a result,
Mobile terminal Web page is debugged in the panel of more Chrome developer's tools.
Below with reference to Fig. 4, it illustrates a kind of for debugging the process 400 of method one embodiment of the page, is applied to
The computer equipment in system for debugging the page.Wherein, the system for debugging the page includes setting for wireless network connection
It is equipped with the computer equipment and mobile terminal of display.This is used to debug the process 400 of the method for the page, comprising the following steps:
Step 401, the page to be debugged is directed in the first debugging request of element panel, in element panel in response to detecting
The page to be debugged is opened, and the dom tree of the page to be debugged is sent to mobile terminal.
Step 402, the dom tree sent in response to receiving mobile terminal, is rendered again based on the dom tree received and is in
The existing page to be debugged.
In the present embodiment, the concrete operations of step 401 and step 402 respectively with step 201 in embodiment shown in Fig. 2
Essentially identical with the operation of step 202, details are not described herein.
By step 401 and step 402, the element for the Chrome developer's tool installed in computer equipment is realized
Mobile terminal Web page is debugged in panel.
In some optional implementations of the present embodiment, the above-mentioned method for debugging the page can also include following
Step 403 and step 404:
Step 403, the page to be debugged is directed in the second debugging request of network panel, in network panel in response to detecting
Load the page to be debugged.
Step 404, the network request detail information sent in response to receiving mobile terminal, shows institute in network panel
The network request detail information received.
In the present embodiment, the concrete operations of step 403 and step 404 respectively with step in embodiment shown in Fig. 3 A
305 and step 306 operation it is essentially identical, details are not described herein.
By step 403 and step 404, the network for the Chrome developer's tool installed in computer equipment is realized
Mobile terminal Web page is debugged in panel.
In some optional implementations of the present embodiment, the above-mentioned method for debugging the page can also include following
Step 405 and step 406:
Step 405, the page to be debugged is directed in the third debugging request of application panel in response to detecting, applying panel
The middle load page to be debugged.
Step 406, the storage information data sent in response to receiving mobile terminal shows in application panel and is received
Storage information data.
In the present embodiment, the concrete operations of step 405 and step 406 respectively with step in embodiment shown in Fig. 3 A
308 and step 309 operation it is essentially identical, details are not described herein.
By step 405 and step 406, the application for the Chrome developer's tool installed in computer equipment is realized
Mobile terminal Web page is debugged in panel.
In some optional implementations of the present embodiment, the above-mentioned method for debugging the page can also include following
Step 407 and step 408:
Step 407, the page to be debugged is directed in the 4th debugging of source code panel or control panel in response to detecting
Request, loads and is executed in thread corresponding with the page to be debugged the corresponding code of the page to be debugged, obtain implementing result, with
And obtained implementing result is sent to mobile terminal.
Step 408, the page events information sent in response to receiving mobile terminal, in line corresponding with the page to be debugged
The corresponding code of the page to be debugged is executed based on the page events information that is received in journey, obtains implementing result, and by gained
To implementing result be sent to mobile terminal.
In the present embodiment, the concrete operations of step 407 and step 408 respectively with step in embodiment shown in Fig. 3 B
311 and step 312 operation it is essentially identical, details are not described herein.
By step 407 and step 408, the source generation for the Chrome developer's tool installed in computer equipment is realized
Mobile terminal Web page is debugged in code panel or control deck plate.
In some optional implementations of the present embodiment, mobile terminal and computer equipment can by socket into
Row data communication.
Method provided by the embodiments of the present application for debugging the page, it is wireless by computer equipment and with computer equipment
The mobile terminal of network connection is realized and is debugged in the element panel for the Chrome developer's tool installed in computer equipment
Mobile terminal Web page, without, by wired connection, then reducing exploitation debugging between mobile terminal and computer equipment
Cost improves debugging efficiency.
With further reference to Fig. 5, as the realization to method shown in above-mentioned each figure, this application provides one kind for debugging page
One embodiment of the device in face, it is above-mentioned for debugging the page applied to the computer equipment in the system for debugging the page
System include wireless network connection the computer equipment and mobile terminal for being provided with display, the Installation practice and Fig. 2
Shown in embodiment of the method it is corresponding, which specifically can be applied in various electronic equipments.
As shown in figure 5, the present embodiment includes: DOM Document Object Model transmission unit 501 for debugging the device 500 of the page
With page rendering and display unit 502.Wherein, DOM Document Object Model transmission unit 501 is configured in response to detect user
The first debugging request for the page to be debugged in element panel, the page to be debugged described in the element panel opening, and
The DOM Document Object Model dom tree of the page to be debugged is sent to the mobile terminal；Page rendering and display unit 502,
It is configured in response to receive the dom tree that the mobile terminal is sent, is rendered again based on the dom tree received and institute is presented
State the page to be debugged.
In the present embodiment, for debugging the DOM Document Object Model transmission unit 501 and page rendering of the device 500 of the page
And display unit 502 specific processing and its brought technical effect can respectively with reference to step 201 in Fig. 2 corresponding embodiment and
The related description of step 202, details are not described herein.
In some optional implementations of the present embodiment, above-mentioned apparatus 500 can also include: that first page load is single
Member 503, is configured in response to detect the second debugging request for the above-mentioned page to be debugged in network panel, in above-mentioned net
Network panel loads the above-mentioned page to be debugged；First display unit 504 is configured in response to receive above-mentioned mobile terminal transmission
Network request detail information, received network request detail information is shown in above-mentioned network panel.
In some optional implementations of the present embodiment, above-mentioned apparatus 500 can also include: that second page load is single
Member 505 is configured in response to detect for the above-mentioned page to be debugged to answer in the third debugging request of application panel above-mentioned
With loading the above-mentioned page to be debugged in panel；Second display unit 506 is configured in response to receive above-mentioned mobile terminal hair
The storage information data sent, in the above-mentioned storage information data received using display in panel.
In some optional implementations of the present embodiment, above-mentioned apparatus 500 can also include: the first implementing result hair
Unit 507 is sent, is configured in response to detect for the page to be debugged the of source code panel or control panel
Four debugging requests load and execute the corresponding code of the page to be debugged in thread corresponding with the page to be debugged,
Implementing result is obtained, and obtained implementing result is sent to the mobile terminal；Second implementing result transmission unit
508, it is configured in response to receive the page events information that the mobile terminal is sent, corresponding with the page to be debugged
Thread in the corresponding code of the page to be debugged executed based on the page events information that is received, obtain implementing result, with
And obtained implementing result is sent to the mobile terminal.
In some optional implementations of the present embodiment, above-mentioned mobile terminal and above-mentioned computer equipment can pass through
Socket carries out data communication.
It should be noted that it is provided by the embodiments of the present application for debug in the device of the page realization details of each unit and
Technical effect can be with reference to the explanation of other embodiments in the application, and details are not described herein.
Below with reference to Fig. 6, it illustrates the computer systems for the computer equipment for being suitable for being used to realize the embodiment of the present application
600 structural schematic diagram.Computer equipment shown in Fig. 6 is only an example, should not function to the embodiment of the present application and
Use scope brings any restrictions.
As shown in fig. 6, computer system 600 includes central processing unit (CPU, Central Processing Unit)
601, it can be according to the program being stored in read-only memory (ROM, Read Only Memory) 602 or from storage section
608 programs being loaded into random access storage device (RAM, Random Access Memory) 603 and execute various appropriate
Movement and processing.In RAM 603, also it is stored with system 600 and operates required various programs and data.CPU 601,ROM
602 and RAM 603 is connected with each other by bus 604.Input/output (I/O, Input/Output) interface 605 is also connected to
Bus 604.
I/O interface 605 is connected to lower component: the importation 606 including keyboard, mouse etc.；It is penetrated including such as cathode
Spool (CRT, Cathode Ray Tube), liquid crystal display (LCD, Liquid Crystal Display) etc. and loudspeaker
Deng output par, c 607；Storage section 608 including hard disk etc.；And including such as LAN (local area network, Local Area
Network) the communications portion 609 of the network interface card of card, modem etc..Communications portion 609 is via such as internet
Network executes communication process.Driver 610 is also connected to I/O interface 605 as needed.Detachable media 611, such as disk,
CD, magneto-optic disk, semiconductor memory etc. are mounted on as needed on driver 610, in order to from the calculating read thereon
Machine program is mounted into storage section 608 as needed.
Particularly, in accordance with an embodiment of the present disclosure, it may be implemented as computer above with reference to the process of flow chart description
Software program.For example, embodiment of the disclosure includes a kind of computer program product comprising be carried on computer-readable medium
On computer program, which includes the program code for method shown in execution flow chart.In such reality
It applies in example, which can be downloaded and installed from network by communications portion 609, and/or from detachable media
611 are mounted.When the computer program is executed by central processing unit (CPU) 601, limited in execution the present processes
Above-mentioned function.It should be noted that the above-mentioned computer-readable medium of the application can be computer-readable signal media or
Computer readable storage medium either the two any combination.Computer readable storage medium for example can be --- but
Be not limited to --- electricity, magnetic, optical, electromagnetic, infrared ray or semiconductor system, device or device, or any above combination.
The more specific example of computer readable storage medium can include but is not limited to: have one or more conducting wires electrical connection,
Portable computer diskette, hard disk, random access storage device (RAM), read-only memory (ROM), erasable type may be programmed read-only deposit
Reservoir (EPROM or flash memory), optical fiber, portable compact disc read-only memory (CD-ROM), light storage device, magnetic memory
Part or above-mentioned any appropriate combination.In this application, computer readable storage medium, which can be, any include or stores
The tangible medium of program, the program can be commanded execution system, device or device use or in connection.And
In the application, computer-readable signal media may include in a base band or the data as the propagation of carrier wave a part are believed
Number, wherein carrying computer-readable program code.The data-signal of this propagation can take various forms, including but not
It is limited to electromagnetic signal, optical signal or above-mentioned any appropriate combination.Computer-readable signal media can also be computer
Any computer-readable medium other than readable storage medium storing program for executing, the computer-readable medium can send, propagate or transmit use
In by the use of instruction execution system, device or device or program in connection.Include on computer-readable medium
Program code can transmit with any suitable medium, including but not limited to: wireless, electric wire, optical cable, RF etc., Huo Zheshang
Any appropriate combination stated.
The calculating of the operation for executing the application can be write with one or more programming languages or combinations thereof
Machine program code, described program design language include object oriented program language-such as Java, Smalltalk, C+
+, it further include conventional procedural programming language-such as " C " language or similar programming language.Program code can
Fully to execute, partly execute on the user computer on the user computer, be executed as an independent software package,
Part executes on the remote computer or executes on a remote computer or server completely on the user computer for part.
In situations involving remote computers, remote computer can pass through the network of any kind --- including local area network (LAN)
Or wide area network (WAN)-is connected to subscriber computer, or, it may be connected to outer computer (such as utilize Internet service
Provider is connected by internet).
Flow chart and block diagram in attached drawing are illustrated according to the system of the various embodiments of the application, method and computer journey
The architecture, function and operation in the cards of sequence product.In this regard, each box in flowchart or block diagram can generation
A part of one module, program segment or code of table, a part of the module, program segment or code include one or more use
The executable instruction of the logic function as defined in realizing.It should also be noted that in some implementations as replacements, being marked in box
The function of note can also occur in a different order than that indicated in the drawings.For example, two boxes succeedingly indicated are actually
It can be basically executed in parallel, they can also be executed in the opposite order sometimes, and this depends on the function involved.Also it to infuse
Meaning, the combination of each box in block diagram and or flow chart and the box in block diagram and or flow chart can be with holding
The dedicated hardware based system of functions or operations as defined in row is realized, or can use specialized hardware and computer instruction
Combination realize.
Being described in unit involved in the embodiment of the present application can be realized by way of software, can also be by hard
The mode of part is realized.Described unit also can be set in the processor, for example, can be described as: a kind of processor packet
Include DOM Document Object Model transmission unit and page rendering and display unit.Wherein, the title of these units is under certain conditions simultaneously
The restriction to the unit itself is not constituted, for example, page rendering and display unit are also described as " based on what is received
Dom tree renders again and the unit of the page to be debugged is presented ".
As on the other hand, present invention also provides a kind of computer-readable medium, which be can be
Included in device described in above-described embodiment；It is also possible to individualism, and without in the supplying device.Above-mentioned calculating
Machine readable medium carries one or more program, when said one or multiple programs are executed by the device, so that should
Device: in response to detecting that user, in the 4th debugging request of element panel, waits for for the page to be debugged in element panel opening
The page is debugged, and the DOM Document Object Model dom tree of the page to be debugged is sent to mobile terminal；It is mobile whole in response to receiving
The dom tree sent is held, is rendered again based on the dom tree received and the page to be debugged is presented.
Above description is only the preferred embodiment of the application and the explanation to institute's application technology principle.Those skilled in the art
Member is it should be appreciated that invention scope involved in the application, however it is not limited to technology made of the specific combination of above-mentioned technical characteristic
Scheme, while should also cover in the case where not departing from foregoing invention design, it is carried out by above-mentioned technical characteristic or its equivalent feature
Any combination and the other technical solutions formed.Such as features described above has similar function with (but being not limited to) disclosed herein
Can technical characteristic replaced mutually and the technical solution that is formed.
Claims (17)
1. a kind of system for debugging the page, the computer equipment and movement for being provided with display including wireless network connection
Terminal, in which:
The computer equipment is configured to:
The page to be debugged is directed in the first debugging request of element panel, described in the element panel opening in response to detecting
The page to be debugged, and the DOM Document Object Model dom tree of the page to be debugged is sent to the mobile terminal；
The dom tree sent in response to receiving the mobile terminal, rendered again based on the dom tree received and present it is described to
Debug the page；
The mobile terminal is configured to:
The dom tree sent in response to receiving the computer equipment is rendered based on the dom tree received and is presented described wait adjust
Try the page；
In response to detecting that the dom tree for being directed to the page to be debugged updates operation, updated dom tree is sent to the meter
Calculate machine equipment.
2. system according to claim 1, in which:
The computer equipment is further configured to:
The page to be debugged is directed in the second debugging request of network panel, described in network panel load in response to detecting
The page to be debugged；
The network request detail information sent in response to receiving the mobile terminal, shows in the network panel and is received
Network request detail information；And
The mobile terminal is further configured to:
Network request detail information corresponding with the page to be debugged is sent to the computer equipment.
3. system according to claim 2, in which:
The computer equipment is further configured to:
The page to be debugged is directed in the third debugging request of application panel in response to detecting, is added in the application panel
Carry the page to be debugged；
The storage information data sent in response to receiving the mobile terminal is deposited described using what display in panel was received
Store up information data；And
The mobile terminal is further configured to:
Storage information data corresponding with the page to be debugged is sent to the computer equipment.
4. system according to claim 1 to 3, wherein
The computer equipment is further configured to:
In response to detect be directed to the page to be debugged source code panel or control panel the first debugging request, with
The corresponding code of the page to be debugged is loaded and executed in the corresponding thread of the page to be debugged, obtains implementing result, with
And obtained implementing result is sent to the mobile terminal；
The page events information sent in response to receiving the mobile terminal, in thread corresponding with the page to be debugged
The corresponding code of the page to be debugged is executed based on the page events information that is received, obtains implementing result, and by gained
To implementing result be sent to the mobile terminal；
The mobile terminal is further configured to:
The implementing result sent in response to receiving the computer equipment based on the implementing result rendering received and is presented
The page to be debugged；
In response to detecting that user is directed to the operation of the page to be debugged, page events letter relevant to the operation is generated
Breath, and page events information generated is sent to the computer equipment.
5. system according to claim 4, wherein the mobile terminal and the computer equipment are carried out by socket
Data communication.
6. a kind of method for debugging the page, described to be used for applied to the computer equipment in the system for debugging the page
The system of the debugging page includes the computer equipment and mobile terminal for being provided with display of wireless network connection, the method packet
It includes:
In response to detecting that user is directed to the page to be debugged in the 4th debugging request of element panel, in the element panel opening
The page to be debugged, and the DOM Document Object Model dom tree of the page to be debugged is sent to the mobile terminal；
The dom tree sent in response to receiving the mobile terminal, rendered again based on the dom tree received and present it is described to
Debug the page.
7. according to the method described in claim 6, wherein, the method also includes:
The page to be debugged is directed in the second debugging request of network panel, described in network panel load in response to detecting
The page to be debugged；
The network request detail information sent in response to receiving the mobile terminal, shows in the network panel and is received
Network request detail information.
8. according to the method described in claim 7, wherein, the method also includes:
The page to be debugged is directed in the third debugging request of application panel in response to detecting, is added in the application panel
Carry the page to be debugged；
The storage information data sent in response to receiving the mobile terminal is deposited described using what display in panel was received
Store up information data.
9. according to the method any in claim 6-8, wherein the method also includes:
In response to detect be directed to the page to be debugged source code panel or control panel the first debugging request, with
The corresponding code of the page to be debugged is loaded and executed in the corresponding thread of the page to be debugged, obtains implementing result, with
And obtained implementing result is sent to the mobile terminal；
The page events information sent in response to receiving the mobile terminal, in thread corresponding with the page to be debugged
The corresponding code of the page to be debugged is executed based on the page events information that is received, obtains implementing result, and by gained
To implementing result be sent to the mobile terminal.
10. according to the method described in claim 9, wherein, the mobile terminal and the computer equipment by socket into
Row data communication.
11. it is a kind of for debugging the device of the page, it is described to be used for applied to the computer equipment in the system for debugging the page
The system of the debugging page includes the computer equipment and mobile terminal for being provided with display of wireless network connection, described device packet
It includes:
DOM Document Object Model transmission unit is configured in response to detect user for the page to be debugged the of element panel
One debugging request, the page to be debugged described in the element panel opening, and by the document object mould of the page to be debugged
Type dom tree is sent to the mobile terminal；
Page rendering and display unit are configured in response to receive the dom tree that the mobile terminal is sent, based on being received
Dom tree render again and the page to be debugged be presented.
12. device according to claim 11, wherein described device further include:
First page loading unit is configured in response to detect and adjust for the page to be debugged the second of network panel
Examination request loads the page to be debugged in the network panel；
First display unit is configured in response to receive the network request detail information that the mobile terminal is sent, in institute
State the network request detail information that display is received in network panel.
13. device according to claim 12, wherein described device further include:
Second page loading unit is configured in response to detect the third tune for the page to be debugged in application panel
Examination request, loads the page to be debugged in the application panel；
Second display unit is configured in response to receive the storage information data that the mobile terminal is sent, answer described
With the received storage information data of display in panel.
14. any device in 1-13 according to claim 1, wherein described device further include:
First implementing result transmission unit, be configured in response to detect for the page to be debugged in source code panel or
4th debugging request of person's control panel loads in thread corresponding with the page to be debugged and executes the page to be debugged
The corresponding code in face obtains implementing result, and obtained implementing result is sent to the mobile terminal；
Second implementing result transmission unit is configured in response to receive the page events information that the mobile terminal is sent,
It is corresponding that the page to be debugged executed based on the page events information received in thread corresponding with the page to be debugged
Code, obtain implementing result, and obtained implementing result is sent to the mobile terminal.
15. device according to claim 14, wherein the mobile terminal and the computer equipment by socket into
Row data communication.
16. a kind of computer equipment, comprising:
One or more processors；
Storage device is stored thereon with one or more programs,
When one or more of programs are executed by one or more of processors, so that one or more of processors
Realize the method as described in any in claim 6-10.
17. a kind of computer readable storage medium, is stored thereon with computer program, wherein the computer program is by one
Or multiple processors realize the method as described in any in claim 6-10 when executing.
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 true CN109582580A (en) | 2019-04-05 |
| CN109582580B 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) |
Cited By (3)
| 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 |
| CN113220571A (en) * | 2021-05-11 | 2021-08-06 | 北京百度网讯科技有限公司 | Debugging method, system, equipment and storage medium of mobile webpage |
| CN114422857A (en) * | 2021-12-28 | 2022-04-29 | 炫彩互动网络科技有限公司 | Webpage debugging method on IPTV set-top box and set-top box |
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 (3)
| Title |
|---|
| OADAM92: "远程调试工具weinre使用教程"", 《博客园，HTTPS://WWW.CNBLOGS.COM/OADAM92/P/4377364.HTM》 * |
| OADAM92: "远程调试工具weinre使用教程"", 《博客园，HTTPS://WWW.CNBLOGS.COM/OADAM92/P/4377364.HTML》 * |
| 黑马程序员编著，ISBN : 978-7-113-24768-3: "《jQuery前端开发实战教程》", 30 October 2018 * |
Cited By (4)
| 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 |
| CN113220571A (en) * | 2021-05-11 | 2021-08-06 | 北京百度网讯科技有限公司 | Debugging method, system, equipment and storage medium of mobile webpage |
| CN113220571B (en) * | 2021-05-11 | 2024-04-19 | 北京百度网讯科技有限公司 | Method, system, equipment and storage medium for debugging mobile webpage |
| CN114422857A (en) * | 2021-12-28 | 2022-04-29 | 炫彩互动网络科技有限公司 | Webpage debugging method on IPTV set-top box and set-top box |
Also Published As
| Publication number | Publication date |
|---|---|
| CN109582580B (en) | 2022-04-12 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109558323A (en) | For debugging system, the method and apparatus of the page | |
| US8549481B2 (en) | Web-based integrated test and debugging system | |
| CN109582317A (en) | Method and apparatus for debugging boarding application | |
| CN107622135A (en) | Method and apparatus for display information | |
| CN108958992A (en) | test method and device | |
| CN110020329B (en) | Method, device and system for generating webpage | |
| WO2020143557A1 (en) | Method and device for displaying information | |
| CN106874519A (en) | Webpage representation method and apparatus | |
| AU2012350145A1 (en) | Systems and methods for processing web page data | |
| CN111813685B (en) | Automatic test method and device | |
| CN109656799A (en) | Test method and device | |
| CN113378036B (en) | Page operation analysis, embedding method, device, equipment and storage medium | |
| CN109902446A (en) | Method and apparatus for generating information prediction model | |
| CN109308201A (en) | Method and apparatus for output information | |
| CN109582580A (en) | For debugging system, the method and apparatus of the page | |
| CN109918146A (en) | Page generation method and device | |
| CN108241689A (en) | Page resource acquisition methods, device and client device | |
| CN108573054A (en) | Method and apparatus for pushed information | |
| CN109218041A (en) | Request processing method and device for server system | |
| Zibula et al. | Cross-platform development using HTML5, jQuery mobile, and phonegap: realizing a smart meter application | |
| CN110213105A (en) | It is a kind of cross-platform micro- using creation method | |
| CN109471976A (en) | Method, device, electronic device and storage medium for processing web page operation data | |
| CN111222067B (en) | Information generation method and device | |
| CN107347093A (en) | Collocation method and device for distributed server system | |
| CN111767486A (en) | Method, device, electronic equipment and computer readable medium for displaying page |
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 |