Web mobile app Debugging tool--weinre

Now people are getting used to surfing the web on mobile phones, and the Web pages that are designed for desktop browsers are often miserable. Web application developers need to redesign the interface for the phone, but there is no satisfactory debugging tools (such as Firebug, Web Inspector) on the phone, and the redesign of the interface is often done with less effort. This article describes the debugging Tools Weinre is a good debugging tool to solve this problem.

What is Weinre?

Weinre represents the We b in Spector Re Mote, which is a remote debugging tool. For example, on a computer, you can instantly change the page element, style sheet, or view JavaScript variables on your phone, as well as see the error and warning messages on the page on your phone. Shown in the example, by running "Document.body.style.backgroundcolor = ' green ' in the console," instantly changes the background color of the page on the phone.

Figure 1: The debug client on the desktop and the corresponding page on the phone

Before using a tool, it is helpful to understand its rationale and structure. Weinre, as a remote debugging tool, is structurally divided into three layers:

• Target page: The page is debugged, the page has been embedded weinre remote JS, the following will be introduced;
• Debug client: Local Web Inspector Debug client;
• Debug Service Side (Agent): An HTTP Server that establishes communication with the debug client for the target page.

The three-layer structure looks like this:

Figure 2:WEINRE Composition Structure

Weinre's debug client is based on Web Inspector Development, and the Web Inspector is only compatible with WebKit-centric browsers, so weinre clients can only be opened with Chrome or Safari.

Run Weinre prep work

Weinre currently supports Windows and MacOS, for example in this article, Windows Edition.

Weinre debugging requires NODEJS framework support, you need to install the Nodejs platform first

nodejs:http://nodejs.org/download/

Nodejs Configuration

Type the command: NPM Express enter waiting to install Express .....

Type the command: NPM Jade return waiting to install jade .....

Type the command: NPM MySQL return to wait for the installation of MySQL .....

........ What components to install, depending on the environment to build the requirements

By default, the above components are installed under the C:\Program Files\nodejs\node_modules folder, which is also the auto-find path for NODEJS related components

weinre Installation

1. Run cmd and open command prompt.

2. Transfer the directory to the Nodejs installation directory.

3. Type command: npm-g install weinre Enter to wait for the installation of weinre.

Installation Complete

4. Type command: Weinre-httpport 8008-boundhost-all-enter wait for start weinre

The port number is arbitrary, as long as it is not occupied

This line of command initiates the Weinre debug server on the machine, with Port 8008. Open Chrome or Safari and visit localhost:8008 to see Weinre's basic information. (It is important to set Boundhost to-all-to access the debug server via IP)

The "Debug Client User Interface" in the Weinre is the debug clients, and you can see the target page that is not currently being tested when you click Enter.

How to make the webpage can be detected by the weinre on localhost:8081? Very simple, just add a JS file to the page surface. If the IP of this machine is 192.168.23.10, then add the following JS file. Target-script.js can get information from the debug server, change the current page style, or run the incoming JS, and return the results.

<script src=http://192.168.23.10:8008/target/target-script.js></script>

Usually put in the head or after the body can be

For the asynchronous loading module such as Dojo, the above static embedded JS will be incompatible, in the case of an asynchronous loading module such as dojo, load the target-script.js after the asynchronous loading is complete.

When you open the page with the script added, you can see that the new target page is detected in the debug client.

After selecting the page you want to test, you can use your phone to open the page and debug it in elements and console via your PC.

Web mobile app Debugging tool--weinre