Debug using Weinre mobile site and PhoneGap application

　　At PC end, we can use Firebug or Chrome developer tools convenient debugging web site or Web application. However, when we want to debug the site or application on the mobile terminal, these tools will be useless. Therefore, mobile developers hope to have the Mobile version of the Firebug or Chrome developer tools. Weinre Is such a tool, can help us to debug the mobile site and PhoneGap application.

Article may be of interest to you

Free tools to recommend 8 great test website speed
Browser compatibility testing tool 12 great recommendation
Building a killer application of JavaScript tools and techniques
Recommend 25 to improve the website usability and conversion tools
In 2012 the best Web front-end development tools and frameworks

Introduction to Weinre

　　Before using Weinre, we first understand the basic concepts of Weinre. Weinre Is the abbreviation of Web Inspector Remote (remote Web debugging tools), function and Firebug, Webkit is similar to Inspector, can help us in PC remote debugging and running on the mobile device browsers Web page or application, instant debugging DOM elements, CSS style and JavaScript etc.

　　The purpose of using Weinre is running on a mobile device browsers Web site or application, we call this mobile device is the debugging target (Debug Target). Due to the direct commissioning inconvenient operation on mobile devices, Weinre helps us to use desktop traditional WebKit environments (such as Web Inspector or Google Chrome developer tools) to debug, we call this desktop debugging environment for debugging client(Debug Client).

　　Weinre to debug client can synchronize the desktop and mobile equipment debugging on the goal, you need to build a debug server (Debug Server). Therefore, in the use of Weinre for remote debugging equipment, including three elements.:

Debugging: debug server to server agent, used to debug synchronization between the target and the debug client orders,
Debug client: This is the Web Inspector interface, which the developers for debugging interface in the browser,
The debug target: need to debug page, also refers to the mobile devices running by debugging the Web content in the browser.

　　Weinre debug target and the clients are running in the browser, and debug server in HTTP server as an intermediary operation of the two. In the Patrick Mueller manual on Weinre, explained the relationship. A more detailed explanation of the visible: .

Installing and running Weinre

　　The Weinre debug server is implemented based on Node.js, so before you install Weinre to install Node runtime environment. Install the Weinre in two ways, using NPM or download the binary file to install.

　　Using a binary package installation command.:

npm -g install http://example.com/path/to/apache-cordova-weinre-X.Y.Z-bin.tar.gz

　　Also can be installed by the Node package management tools:

npm -g install weinre

　　After installed can start Weinre, provides the starting parameters of 6 optional Weinre, of which the following two parameters usually modify, the other with default values can be.

--httpPort debug server port 8080, the default, if the port is in use, can be changed to other ports,
--boundHost debug server IP address bound, also is the domain name, the default is localhost, also can be set to -all-, that bind to all current machine can access interface. As shown below:

weinre --boundHost -all-

　　These configurations can also create a in the Weinre root directory; server.properties file configuration, are as follows:

boundHost:    -all-
httpPort:     8081
reuseAddr:    true
readTimeout:  1
deathTimeout: 5

　　Need to pay attention to is, parameters of command-line settings will overwrite the file allocation.

The use of Weinre

　　The successful launch of the Weinre can be used after the binding of IP or domain name and port access to the Weinre server (here we take http://localhost:8081 as an example). At the core of the Webkit browser (such as Chrome, Safari, open the Weinre server page):

　　In the server page two is important:

A links to debug client page, open the default to the remote panel, as shown below.
The B object code, this code should be added to the need to debug page, can also be used to dynamically add bookmark.

　　Remote panel has a total of four parts:

A panel switch, used Chrome or Safari developer tools on this interface must be very familiar with.
B is connected to the debug server page, which can debug page.
C is connected to the debugging services to clients, the only one.
D debug server properties, port and debug server binding to response type IP address list.

　　Remote panel, and the panel panel elements, resources, network panel, the timeline panel and console, behind the Web developers are familiar with, is not one one introduction.