Mobile Web debugging tool weinre

Now and in the future, using mobile devices to access the Internet is becoming more and more mainstream. But for developers,Debugging of mobile Web has always been a problem. In the early stage, simulators can be used to assist debugging. However, debugging of mobile Web is a headache. Weinre is a powerful tool to solve this problem.

Weinre is intended to be Web Inspector remote, which is a remote debugging tool. Similar to firebug and WebKit Inspector, this function can help us instantly change page elements, styles, and debug Js. The following describes how to use it. The following usesTake windows as an example:

1. First, make sure that your computer has set up a Java environment.That is, JDK is installed. I will not talk about it here. Search for a JDK on the Internet and install it step by step.

II,Install and run weinre

1,Download: http://ishare.iask.sina.com.cn/f/23607399.html,Download the jar package directly here,After the download, put it in a folder without any processing.

2,Run CMD in the folder where weinre is locatedAddress BarInputCode:Java-jar weinre. jar -- httpport 8081 -- boundhost-all-(for example ):

3,After you press enter, the corresponding information will appear (Note: Do not disable cmd during debugging ):

4,Open the local browser ,(Access through WebKit kernel browsers (chrome and Safari)Http: // localhost: 8081/You can see the basic information of weinre.

5,"Debug client User Interface" in is weinre's debug client. After clicking it, you can see that the target webpage has not been tested yet.

III,Add debug target

To make the page to be debugged detected by weinre, you need to add the debug target. There are two methods:
1,Target script

You need to addJS:

 
<SCRIPT src = "http: // 192.168.0.106: 8081/target/target-script-min.js # anonymous" type = "text/JavaScript">
</SCRIPT>
 

You can access this page on a mobile device after adding it. If there are fewer debugging pages, you can use this method. If there are more pages, the second method is recommended.

2,Target bookmarklet
This method saves a piece of JavaScript code to the bookmarks of mobile devices. You can find this JS Code at http: // localhost: 8081:

Javascript :(Function(E) {e. setattribute ("src", "http: // localhost: 8081/target/target-script-min.js # anonymous"); document. getelementsbytagname ("body") [0]. appendchild (E);}) (document. createelement ("script "));Void(0 );
 

I save this section of js to the name of the debug bookmarks, and then use mobile devices to access the page I want to debug, such as the http://iinterest.net, and finally click the debug bookmarks on OK.

4. Real machine debugging.

1,Mobile devices must haveWi-Fi wireless connectionAnd in the same network segment as the computer.Server, You can search onlineXAMPPOrWamp,)PagePut it in the corresponding folder on the server. I installed XAMPP and put it in the htdocs directory. Open the address of this page on the mobile phone page, for example, http: // 192.168.0.102/index.html.Return to the http: // localhost: 8081 page and click the "Debug client User Interface:" link to go to weinre's debug interface. If the debug target is successfully added, you can see it here.

2,Next, we can debug the page in a familiar way, And the debugging results will be displayed on mobile devices in real time.

 

The MAC system is simpler. Run the app directly without using the command line to start weinre. The subsequent steps are the same as those for Windows.

 

Reference: http://www.iinterest.net/2012/02/08/debugging-mobile-web-applications-with-the-weinre/