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

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.:

  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

  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.

weinre --boundHost -all-

   These configurations can also create a   in the Weinre root directory; 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:

  Remote panel has a total of four parts:

  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):

  Support the debug target (need to debug web site or application interface):

  Does not support the debug target:

Article may be of interest to you

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