Weinre developing the installation under Mac Windows---reprint

Now and in the future, the Internet is becoming more and more mainstream with mobile devices. But for developers, mobile Web debugging has always been a problem, the pre-use simulator to assist debugging, but to the real-time debugging phase of the person is very headache. And Weinre is the weapon to solve this problem.

Weinre is intended to be a web Inspector remote, which is a long-range debugging tool. Functions and Firebug, Webkit inspector similar, can help us to change the page elements, styles, debugging JS, and so on, below is a brief introduction of how to use. The following are examples of Windows systems:

　First, make sure your computer is already set up in the Java environment. that is, the JDK is installed. Here is not much to say, search for a JDK on the Internet, step by step installation and OK.

Second, installation and operation of Weinre

1, download: http://ishare.iask.sina.com.cn/f/23607399.html, here directly download the jar package, download it and put it in a folder after the line does not need any processing.

　　　　2 . Run cmd, enter the code in the address bar of the folder where Weinre is located: Java-jar weinre.jar--httpport 8081--boundhost-all-(e.g.):

　　　　3. the corresponding information will appear after carriage return (note: Do not close cmd during debugging):

　　　　4, open the local browser, (using WebKit kernel browser (chrome, Safari)) to access the http://localhost:8081/, no accident can see the basic information weinre.

　　　　5, in the "Debug Client User Interface" is the Weinre debug clients, click Enter after you can see the target page has not been tested.

Third, add debug Target

In order for the page to be debugged to be weinre detected, 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.106:8081/target/target-script-min.js#anonymous" type= "Text/javascript" >
</script>

After adding to the mobile device to access the page, if you debug the page less can use this method, if more than recommended the second method

　　　　2. Target bookmarklet
This method is to save a section of JS to the mobile device bookmarks, can be found in the http://localhost: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);

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

　Four, the real machine debugging.

　　1, mobile devices must have WiFi wireless connection , and computer in the same network segment, (Ensure that the machine installed a server , you can search the Internet xampp or Wamp,) to debug the The page is placed in the appropriate folder in the server, I install XAMPP, so put it in the Htdocs directory. In the phone's page, open the address of this page, such as: http://192.168.0.102/index.html. Back to the http://localhost:8081 page, click on the "Debug Client User interface:" link into the Weinre debug interface, if you have successfully added the debug Target, you can see it here.

2, then we can use their familiar way to debug the page, and debugging results will be displayed in real-time on the mobile device

Mac system is simpler, without the command line, run the app directly to start Weinre, the next step is the same as Windows.

Local deployment Weinre help with mobile developmentposted on August 1, 2013

Weinre is an open source project that is used to do remote debugging work in Web development, which is quite a force. It was later donated to the Apache Foundation and ported from Ruby to JavaScript, which can now be installed directly from NPM. This tool has helped me a lot in the recent big refactoring of the advertising wall.

Installing weinre first to install node. js, the latter on Windows and Mac directly under the package can be installed, and automatically configure the environment, very convenient; I need to compile it on Linux, it is not complicated, I have a log written before, now also so that can see.

When the node. JS Environment is done, the weinre can be installed directly with NPM, preferably in the global context:

?

1	sudonpm installweinre -g

Next start weinre, I stuck here for a while, probably because I do not know the port listening, I thought the direct start is good, the results from the outside not connected (mobile phone even not even point reaction is not, difficult to troubleshoot), because the listener is the IP of localhost, that is, 127.0.0.1. Later try to bind the intranet IP, only to solve the problem:

?

12	# 8081是想找一个不常用的端口，后面的ip是我在内网的ipweinre --httpPort 8081 --boundHost 192.168.10.54

This time, both the machine and the phone can be accessed normally. Then there may be a little bit of a problem with your Mac. Although I shut down the firewall, the Unix IPFW is still working and will block access from the outside (not knowing why 80 is okay), so give the 8081 port a special license:

?

1	sudoipfw add 8081 allow from any to any

Then everything is done, add in the HTML <script src="http://192.168.10.54:8081/target/target-script-min.js#meathill"></script> (domain name according to the circumstances of the change), and then open the http://192.168.10.54:8081/client/#meathill can be viewed, if there are more than one terminal debugging, you can also click on the target machine.

Well, enjoy the easy and quick commissioning of the weinre.

Http://blog.meathill.com/tech/devtools/use-weinre-on-pc.html

Http://www.cnblogs.com/duanhuajian/archive/2012/10/28/2743832.html

Principle:

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 re-design 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 less than done. This article describes the debugging Tools Weinre is a good debugging tool to solve this problem.

What is Weinre?

Weinre is a remote debugging tool for Web Inspector remote. 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. This project is part of Apache Cordova.

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

Operating principle

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.

Get Weinre

Install Weinre with Package Manager (NPM) under any system that supports the node. JS Environment

?

1	npm install-g weinre

Using Weinre for remote debugging

1 start Weinrede bug service side

?

1	weinre --httpPort 8080 --boundHost -all-

2 Open Weinrede bug client via PC browser (WebKit kernel)

?

1	Open inyour pc browser http://localhost[Your IP]:8080

3 Add a script for communication in the page you need to debug

?

1

4 on the phone to access your test page, on the computer into the Weinrede bug client to see if the communication is successful, if everything is not a problem, visible to the following page

?

1	Open inyour pc browser http://localhost[Your IP]:8080/client/#anonymous

5 Finally, as you normally do debugging your page in real time, is not very cool.

Http://www.oschina.net/p/weinre

Weinre developing the installation under Mac Windows---reprint