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.
Weinre support platform
Support the debug client (browser debugging interface):
- Google Chrome
- Apple Safari
- Other WebKit based browser
Support the debug target (need to debug web site or application interface):
- The Android browser application
- IOS Mobile Safari application
- PhoneGap/Cordova
- other
Does not support the debug target:
- IOS 3.1.3 and earlier versions
- WebOS 1.45 and earlier versions
Article may be of interest to you
- OverAPI.com – The history of the most complete developers online handbook
- Regexper: JavaScript regular visualization tool Niubi
- Today's recommendation: worth a try for 8 Web development tools and resources
- CSS Matic: Webpage designers must ultimate CSS toolbox
- Vector graphics library strong: Raphael JS Chinese documentation and tutorials
This link: debugging with Weinre mobile site and PhoneGap application
Compiler source: dream sky concern front-end development technologies on webpage design resources sharing
Posted by Cher at November 15, 2013 - 1:14 AM