Mobile Debugging Tools-weinre

Java version installation and commissioning

First you need to download weinre, Weinre currently supports Windows and MacOS, in this article, for example, Windows edition.

: HTTP://PEOPLE.APACHE.ORG/~PMUELLR/WEINRE/BUILDS/1.X/1.6.1/

Click Weinre-jar-1.6.1.zip to download.

and make sure your computer is ready. Java environment. the JDK is installed. Here is not much to say, search for a JDK on the Internet, step by step installation and OK.

Run the following command in the folder where the downloaded Weinre.jar is located:

Java-jar Weinre.jar--httpport 8081--boundhost-all-

This line of command launches the Weinre debug server on this machine, with a port of 8081. Open Chrome or Safari and visit localhost:8081 to see Weinre's basic information.

Here the port number, you can change freely, my computer on the 8081 port is not available, so I use 1070 port can.

Because this version of Weinre has a problem with chrome, you can only use Safari to open it.

After opening, there will be a "Debug client user Interface", which is Weinre's debug clients, you can see the target page is currently being tested after clicking into it.

How can we make our web page a target page and be detected by weinre on localhost:8081? Very simple, just add a JS file to the page surface. If the IP of this machine is 192.168.0.5, then add the following JS file:

<script src= "Http://192.168.0.5:8081/target/target-script-min.js#anonymous" ></script>

When you open a webpage with this script on your mobile device, you'll be able to detect it in Safari's debug client.

Click on "Debug Client user Interface" to go to the Debug page.

We will then be able to debug the mobile page in the elements and console.

Note: If you see targets below as none, refresh a few times and it will appear.

New version of Weinre debug

The first method:

At present, foreign countries have provided PHONEGAP weinre remote services, users can access the following Web site to enable users online remote debugging.

http://debug.build.phonegap.com/

Put <script src= "http://debug.build.phonegap.com/target/target-script-min.js#anonymous" ></script> 

This code is introduced into the HTML page of your mobile project . But this way, you need a better network speed, or it will be a bit slow.

The second way:

1. First ensure that you install the NODEJS environment, if not, first go to https://nodejs.org/download installation.

2. Nodejs v0.10 has integrated NPM, so you can install the weinre directly with NPM and tap in cmd: npm install WEINRE-G.

3. After the installation is complete, you will see the weinre in the directory C:\Users\Administrator\AppData\Roaming\npm\node_modules, this is its home directory.

4. Running weinre--boundhost-all-in CMD will start the Weinre service. Then enter the address shown in CMD in the browser: IP address and port number.

I am here: http://10.18.221.16:1070

The default is: localhost:8080.

You can set the IP address on your computer and any unused port number.

Use this command to start the weinre:weinre--boundhost IP--httpport port number

The following steps are the same as above.

This method is available in both Chrome and Safari.

Note: If the elements on the full page are not displayed on the Debug page, refresh the page, select the link, and then click Element to see the complete element on the page.

Although using weinre for debugging, there will be a sudden disconnection, sometimes need to refresh several times to connect, sometimes need to reinstall in order to connect a series of problems, but without it, you simply can not do page debugging. Expect it to improve, and then hope that Bo friends can recommend better debugging tools, of course, you must know how to use, before recommending.

Come on!

Mobile Debugging Tools-weinre