Use Weinre to debug a mobile site

On the PC side, we can easily debug websites or Web applications using Firebug or Chrome developer tools. However, when we want to debug the site or application on the mobile side, these tools will not come in handy. As a result, mobile developers want to have mobile versions of Firebug or Chrome developer tools. weinre is a tool that can help us debug mobile websites and PHONEGAP applications.

Weinre Introduction

Before using Weinre, let's take a look at the basic concepts of weinre. The full name of weinre is the web Inspector remote (Web Debugging tool), which functions like Firebug, Webkit Inspector, which can help us remotely debug a Web page running in a mobile device browser on the PC side or application, enabling immediate debugging of DOM elements, CSS styles, JavaScript, and more.

The purpose of using weinre is to debug a Web site or application running within a mobile device browser, which we call the debug target. Because of the inconvenience of debugging directly on a mobile device, Weinre helps us to debug using the desktop's traditional WebKit environment (such as Web Inspector or Google Chrome developer tools), which we call the Debug client (debug Client).

Weinre in order to be able to synchronize the debugging targets on the desktop with the debug client and mobile device, you need to build a debug server (debug servers). Therefore, when using Weinre for remote device debugging, the above three elements are included:

• Debug server: The Debug server acts as an agent to synchronize the debug target and debug the command between the client;
• Debug client: This is the Web Inspector interface, that is, the developer in the browser debugging interface;
• Debug target: A page that needs to be debugged, or a mobile device that is used to run the browser where the Web content is being debugged.

Both the debug target and the client of Weinre run in the browser, while the debug server runs as a mediator for both in the HTTP server mode. This relationship is explained in Patrick Mueller's Handbook on Weinre. A more detailed explanation is visible: http://muellerware.org/papers/weinre/manual.html.

Installation and operation of Weinre

The debug server for Weinre is implemented based on node. js, so install the node runtime environment before installing WEINRE. There are two ways to install weinre, either using NPM or downloading a binary file for installation.

The following commands are installed using the binary package:

?

1	npm - g install http: / / example.com / path / to / Apache - cordova - weinre - x.y.z - bin .tar.gz

You can also install through the Node Package management tool:

?

1	npm -g install weinre

　　

After the installation is ready to start Weinre, WEINRE provides 6 optional startup parameters, of which the following two parameters are generally modified, the other with the default value is OK.

• --httpport Debug server running port, default 8080, if this port is in use, can be changed to another port;
• --boundhost the IP address of the debug server binding, which can also be a domain name, localhost by default, and can be set to-all-, which represents the interfaces that are bound to all the current machines can access. As shown below:

?

1	weinre --boundHost -all-

These configurations can also create a server.properties file configuration under the Weinre root directory , as shown in the following:

?

12345

boundHost:    -all-httpPort:     8081reuseAddr:    truereadTimeout:  1deathTimeout: 5

It is important to note that the parameters set by the command line override the parameters of the file configuration.

Use of Weinre

After successfully starting Weinre, you can use the bound IP or domain name plus port to access the WEINRE server (let's take http://localhost:8081 for example). Open the Weinre Server home page in the Webkit core browser (for example, Chrome, Safari, etc.):

It is important to have two things on the server home page:

• A link to the Debug client page, open after default to the remote panel as shown in.
• B target code, this code to be added to the page that needs debugging, you can also bookmark the way to join dynamically.

The remote panel has a total of four parts:

• A panel switch, using Chrome or Safari developer tools, is sure to be familiar with this interface.
• B Connect to the Debug server's page, which is the page you can debug.
• C the client that is connected to the debug service, there is currently only one.
• D Debug Server properties, bound ports, and the debug server can respond to a list of IP addresses.

In addition to the remote panel, there are element panels, resource panels, network panels, timeline panels, and consoles, which are familiar to the following WEB developers, and are not introduced.

Platforms supported by Weinre

Supported debug clients (browsers running the Debug interface):

• Google Chrome
• Apple Safari
• Other WebKit-based browsers

Supported debug targets (Web site or app interface that needs to be debugged):

• Android Browser App
• IOS Mobile Safari App
• Phonegap/cordova
• Other

Unsupported Debug Target:

• IOS 3.1.3 and earlier versions
• WebOS 1.45 and earlier versions

Use Weinre to debug a mobile site