WebApp Development Debugging Environment--weinre configuration

Google Debugging tools in the mobile phone simulator analog phone WebApp development, and the effect of the real machine is still some deviation, opera mobile phone simulator effect is also poor. Sometimes developed on the PC WebApp effect is good, in some real machine on the deviation, this time we need to fine-tune.
After fine-tuning on the PC to the test environment to see the effect on the phone, development is very slow, very low efficiency. At this time, I think there is a tool that can be debugged on the phone, can change the parameters at any time to see the effect on the phone, to avoid the publication of the test, fuzzy estimate of the number of inaccurate parameters of the trouble, Weinre is a tool.
Weinre can remotely debug the page on the phone on the PC, similar to the debugging tools of the PC browser, select a tag in the code on the PC, the corresponding part on the mobile page will be highlighted, change the attribute parameters on the PC, can immediately see the effect on the phone, for example:

Configuration and usage of weinre:


I. Configuring the Environment

1. First ensure that you install the NODEJS environment, if not, first go to the official website to download the installation.

2. Nodejs v0.10 is already integrated with NPM, so it can be installed directly with NPM and entered directly in cmd: NPM install WEINRE-G.

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

4. Execute weinre--httpport 8081-boundhost-all-in cmd, start weinre: keep cmd form closed during debugging



Open the browser access to ask 192.168.0.20:8081(192.168.0.20 is my local LAN IP address, here need to change to your), assuming that the following page, such as the installation of the successful install:

Click Debug Client User interface:

5. PC-Side Build server locally

Weinre already includes a httpserver, and its root folder is C:\Users\Administrator\AppData\Roaming\npm\node_modules\weinre\web. The target page is placed under this folder. In order to organize your target page, you can create a new folder under the current folder, such as www.



Try 192.168.0.20:8081/demo/weinre-demo.html on your PC

Note: This sentence is key: weinre--httpport 8081 -boundhost-all-  must write like this, distinguish uppercase and lowercase

-- Httpport 8081 : set access port, assuming that there is no this sentence is 8080port by default. Port first letter must be uppercase, do not capitalize the port is not successful, still not the default 8080:



It is also recommended not to use the default 8080port, changed to 8081. Since eclipse will use 8080port to execute the project, assuming that the port of Weinre is set to 8080, and then start Eclipse, Eclipse prompts the port conflict to not execute, and can try to switch off the 8080port consumed:

-boundhost-all-: This sentence is guaranteed with 127.0.0.1:8081, localhost:8081, 192.168.0.20:8081(192.168.0.20 is my local LAN IP address) are able to access, no this sentence or less-boundhost or host does not have an initial capital letter, there is no guarantee that 192.168.0.20:8081 can access to ask, this is very important, because on the phone only to access to ask 192.168.0.20:8081

two. Using weinre debugging

1.  PC-side access to the debug side page: 192.168.0.20:8081.
2.  Mobile phone access to pcserver target file


1.  PC-end access to the Debug side page: 192.168.0.20:8081/client#anonymous
# Anonymous is the default ID, can be changed to its own defined ID, this can be used for multi-user debugging, references: http://wyqbailey.diandian.com/post/2011-11-09/20511143


2. Mobile access to the target page placed within the server:
Note: mobile phone needs to connect to Wi-Fi , the address of WiFi needs to be the same network segment as the computer's IP. For example, the company all computers in a local area network, one computer as the server emitted wireless WiFi, the phone directly connected to the WiFi, you can visit weinreserver.

In order for the page to be debugged to be detected by weinre, there are two ways to add debug Target:
(1) , Target Script

This method needs to add a JSto the Debug page:

<script src= "http://192.168.0.20:8081/target/target-script-min.js#anonymous" type= "Text/javascript" ></ Script>

(192.168.0.20 is my local LAN IP address, you need to change it here)　　　
After joining on the mobile device to visit the page can be, assuming that the debugging of the page is less able to use this method, if more than one recommended alternative method

　　　　(2), Target bookmarklet(This method I did not succeed, assuming you know how to make, then share)
This method is to save a section of JS to the mobile device bookmarks, can be found in the http://192.168.0.20:8081/JS:

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

Save this JS to the name debug bookmark, then use the mobile device to access the page I want to debug, say Http://iinterest.net, and then click the Debug bookmark to OK.

below to see the effect, here I use the demo page with Weinre to do demo example:
Phone connected to WiFi access after: 192.168.0.20:8081/demo/weinre-demo.html



Then back to the PC to see the http://192.168.0.20:8081/client/page, the mobile phone to visit the target page address:



Click on the link, turn green, click on the top of the elements, you can debug, there has been the most beginning effect:



Change the properties below to see the effect on your phone ~ ~

Note: when changes are made to the HTML file, the changed content is not synced to the phone, and it must be visited on the PC, and the phone will not synchronize the updated content until it is refreshed.

Summarize:

Although this method can see the effect of debugging in real-time on the phone, but each time it is necessary to move the local static files to Weinreserver, and then add the JS header to the target page, encountered only JSP no local static HTML page, Either convert all or part of the JSP page into HTML and put it on the weinreserver or do not convert closed eyes the expected number of changes after the announcement to see the effect ... There are certain limitations.
(I tried to merge the address of the local static file with the address of the weinreserver to the same, so that the new version number was not copied frequently, but found that the default path for the Weinre installation was C:\Users\hp\AppData\Roaming\npm\node_ Modules, do not know how to change this path O (╯-╰) o, assuming you know can be tried)
It is suggested that the development of WebApp, the entire development on the PC, published after the test version of the mobile phone on the confusion of the interface and can not use the PC debugging part of this method for debugging.


There are two ways to access static files on your PC from the phone-only access to see the results can not be debugged in real time）：
1. Using Nginx
Open Nginx configuration file:

Restart Nginx, mobile phone connection wireless network, visit: 192.168.0.20/static/login-register/login.html Try it ~
(192.168.0.20 is my local LAN IP address, followed by the path under my configured paths D:\woqu_work_svn\m, which needs to be changed to yours) 　
Note: mobile phone needs to connect to the wireless Wifi,wifi address needs and the computer's IP for the same network segment. For example, the company all computers in a local area network, one computer as the server emitted wireless WiFi, the phone directly connected to the WiFi, you can visit weinreserver.

2. Upload a static file to your own server space

For example, the ability to upload a static file to the SAE (Sina Cloud) or your own domain name space, and then phone access to the domain name address (this is of course to be able to interview O (∩_∩) o~)


Suggestions:
1.webapp development, will be able to connect the page with a jump link, so that when we visit the test link on the phone, we can jump to other pages in the interview page, instead of testing a page to enter a link address, can enter a test multiple pages. and the ability to connect to the page plus a jump link to the background staff changes have no effect.
2. In addition, for the page from HTML to JSP, assuming that in the late front-end staff on the JSP has been modified, then also synchronize the changes to the HTML, so that the subsequent test is helpful, and the part of the synchronization to the HTML is only part of the modification, not trouble.


References:
Http://www.cnblogs.com/lvdabao/p/3436620.html?

If you are not welcome to indicate ~ ~

WebApp Development Debugging Environment--weinre configuration