Webapp development and debugging environment -- weinre configuration, webapp -- weinre

Webapp development and debugging environment -- weinre configuration, webapp -- weinre

Using the mobile phone simulator in Google's debugging tool to simulate mobile phone development for webapp, there is still some difference from the real machine, and the opera mobile phone simulator is not doing well. Sometimes the webapp developed on the pc works well, and there is a deviation on some real machines. At this time, we need to fine-tune it.
After being fine-tuned on the pc, it is released to the test environment and then displayed on the mobile phone. The development is slow and the efficiency is very low. At this time, I want to have a tool that can be debugged on the mobile phone. I can change the parameters at any time to see the effects on the mobile phone at any time, eliminating the trouble of release, retest, and inaccurate fuzzy estimation parameters, weinre is such a tool.
Weinre can remotely debug the page on the mobile phone on the PC, similar to the debugging tool of the pc browser, select a tag in the Code on the pc, the corresponding part on the mobile phone webpage will be highlighted and selected. You can change the property parameters on the pc to see the effect immediately on the mobile phone, for example:

How to configure and use weinre:


1. Configure the environment

1. Make sure that you have installed the nodejs environment. If not, download and install it on the official website.

2. nodejs v0.10 has been integrated with npm, so you can directly use npm for installation and enter npm install weinre-g in cmd.

3. After the installation is complete, you will see weinre under the directory C: \ Users \ Administrator \ AppData \ Roaming \ npm \ node_modules, which is its main directory.

4. Run weinre -- httpPort 8081-boundHost-all-in cmd to start weinre: Keep the cmd window closed during debugging.



Open a browser to access 192.168.0.20: 8081 (192.168.0.20 is my local lan ip address, which needs to be changed to yours). If the following page appears, it indicates that the installation is successful:

Click debug client user interface:

5. Set up a server on the PC

Weinre already contains an http server. Its root directory is C: \ Users \ Administrator \ AppData \ Roaming \ npm \ node_modules \ weinre \ web. Place the target page in this directory. To organize your target page, you can create a folder, such as www, in the current directory.



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

Note:This sentence is critical: weinre -- httpPort 8081-boundHost-all-must be written in this way,Case Sensitive

-- HttpPort 8081:Set the access port. Otherwise, port 8080 is used by default. The first letter of the Port must be in upper case. If it is not in upper case, the Port cannot be set. The default value is 8080:



In addition, we recommend that you do not change the default port 8080 to port 8081 .. Because eclipse will use port 8080 when running the project. If you set the weinre port to port 8080, and then start eclipse, eclipse prompts that the port conflict cannot run, try the following methods to disable the occupied port 8080:

-BoundHost-all -:This statement ensures that 127.0.0.1: 8081, localhost: 8081,192.168 .0.20: 8081 (192.168.0.20 is my local lan ip address) can be accessed.-BoundHost or Host has no upper-case letters.Is not guaranteed to be accessible at 192.168.0.20: 8081. This is very important becauseOnly 192.168.0.20: 8081 can be accessed on the mobile phone

Ii. weinre debugging

1. Access the debug page on the PC: 192.168.0.20: 8081.
2. Access the target file of the PC server through a mobile phone


1. Access the debug page on the PC: 192.168.0.20: 8081/client # anonymous
# Anonymous for the default ID, can be changed to custom ID, this can be used for multi-user debugging, refer to: http://wyqbailey.diandian.com/post/2011-11-09/20511143


2. Visit the target page on the server via mobile phone:
Note:The mobile phone needs to be connected to Wireless wifi, And the wifi address must be the same network segment as the computer IP address. For example, if all the computers in the company are in one LAN, one of them is used as a server to emit Wireless wifi, and the mobile phone is connected directly to this wifi, then you can access the weinre server.

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.20:8081/target/target-script-min.js#anonymous" type="text/javascript"></script>

(192.168.0.20 is the IP address of my local area network, which must be changed to yours)
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(I have not succeeded in this method. If you know how to do it, share it with me)
This method saves a piece of JavaScript code to the bookmarks of the mobile device. You can find this js Code at http: // 192.168.0.20: 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);

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.

The following shows the results. Here I use the demo page provided by weinre as an example:
Phone connection wifi access: 192.168.0.20: 8081/demo/weinre-demo.html



Then return to the PC and check the http: // 192.168.0.20: 8081/client/page. The target page address accessed on the mobile phone is displayed:



Click the link to change to green. Click elements at the top of the page to debug it. The initial effect is displayed:



Change the attributes to see the effects on your phone ~~

Note:When the html file is changed, the modified content is not synchronized to the mobile phone end. You must also access the page on the PC and refresh the page before the updated content is synchronized on the mobile phone end.

Summary:

Although the debugging results can be seen on the mobile phone in real time, each time you need to move the local static file to the weinre server, and then add the js header to the target page, when you encounter a page where only jsp does not have local static html, either convert all or part of the jsp page into html and then put it on the weinre server, or do not convert it to the weinre server, and estimate the parameter modification, and then release it to see the effect ...... limitations
(I tried to merge the address of the local static file with the address of the weinre server into the same one, so that the new version does not need to be copied frequently, but I found that the default path for weinre installation is C: \ Users \ hp \ AppData \ Roaming \ npm \ node_modules. I don't know how to change this path o (optional □╰) o. If you know, try again)
We recommend that you develop a webapp on the PC throughout the development process. After the beta version is released, you can use this method to debug the interface that is out of order on your opponent's machine and cannot use the PC debugging part.


You can use either of the following methods to access static files on the PC on your mobile phone (you can only access the files and cannot debug them in real time ):
1. Use nginx
Open the nginx configuration file:

Restart nginx and connect to the wireless network. Visit 192.168.0.20/static/login-register/login.html ~
(192.168.0.20 is my local lan ip address, followed by the file path under my configured path D: \ woqu_work_svn \ m, which needs to be changed to yours here)
Note: The mobile phone needs to be connected to Wireless wifi, And the wifi address must be the same network segment as the computer IP address. For example, if all the computers in the company are in one LAN, one of them is used as a server to emit Wireless wifi, and the mobile phone is connected directly to this wifi, then you can access the weinre server.

2. Upload static files to your server space

For example, you can upload a static file to SAE (SINA cloud) or your own domain name space, and then access the domain name address on your mobile phone (which of course can be accessed by O (others _ addresses) O ~)


Suggestion:
1. during webapp development, you can add a jump link to the page that can be connected, so that when you access the test link on your mobile phone, you can jump to other pages on the accessed page, instead of testing a page, you can enter a link address to test multiple pages at a time. Adding a jump link to a page that can be connected does not affect the changes of background personnel.
2. in addition, for pages from html to jsp, if the front-end personnel make changes to jsp later, the changes will also be synchronized to html, which will be helpful for subsequent tests, the html synchronization only involves some changes, which is not troublesome.


Refer:
Http://www.cnblogs.com/lvdabao/p/3436620.html

If any error occurs, please point it out ~~

How to configure the web development environment in myeclipse?

The web development environment depends on the container to be configured. That is, the local simulator. Weblogic, tomcat, websphere, or others. Download and decompress the tomcat JDK package. Run myeclipse and click "window". Enter "pre", find tomcat6.0 or 7.0 in the "server" option, and decompress the JDK and configure the file. Click Deploy... (too long to remember), find your project, and click OK. Start the server service on the right side, and click tomcat6.0 or 7.0 to start the service. OK.

How can I learn mobile webapp development?

Find resources online or submit a software course.