1. Installation
Requires node. JS Platform, install it first, open node. js command prompt, install weinre via NPM
2. Start
After the installation is complete, we then start weinre
|
Weinre-httpport 8081-boundhost-all- |
|
The opening of this address means that Weinre started successfully. |
can be configured. weinre/server.properties let start weinre become more convenient, specific methods please refer to the official website, configuration, after you want to start weinre, directly run weinre command can, do not need to append those parameters each time.
3. Instrumenting your web page to act as a debug target
Append the following script to the page you will be debugging
<script src= "/Your IP address: 8081/target/target-script-min.js#anonymous" ></script>
4. Toss it so long, let me debug it remotely
Open the address of the page you want to debug on your phone
Start remote debugging in Weinre Access Points
|
Click Anonymous Access Points |
I can finally debug it! Then you can play whatever you want, everyone should be very skilled ...
The above for the http://www.douban.com/note/289846168/testing process found problems and solutions: 1. ipconfig see ip:10.62.0.173
CMD input: weinre--httpport 8080--boundhost 10.62.0.173
Mobile Access: http://10.62.0.173:8080/www/2.html
Computer also visited: http://10.62.0.173:8080/www/2.html
[Note: If you use wireless, you need to be the same hotspot. Both the phone and the computer have access to the same URL. ] (www is the directory I created: C:\Users\lenovo\AppData\Roaming\npm\node_modules\weinre\web\www)
This is just the URL of the mobile phone to access the computer IP. Did not connect the phone and the computer to debug together, at first thought this is OK, and later found to be wrong.
2. If: cmd under input: weinre--httpport 8080--boundhost-all-[8080 is the port number. ]
Note: If the weinre--httpport 8080--boundhost all, the error weinre:unable to resolve Boundhost Address:all "
The computer directly accesses the http://127.0.0.1:8080/client/
Access file: http://127.0.0.1:8080/www/2.html
(Local path: C:\Users\lenovo\AppData\Roaming\npm\node_modules\weinre\web\www)
3. The test is successful.
Visit: http://localhost:8080/client/#anonymous
Then there is one at the top: Targets: If the following information for none is not complete ... A. Mobile Access (note that Google or Safari is available): 10.62.0.172:8081/www/1.html (my ip10.62.0.172:8081) b. Computer access: Http://localho st:8080/client/#anonymous. appears similar to 10.200.108.11 [channel:t-5 id:anonymous]-http://10.62.0.173:8081/www/1.html Representative already mobile phone and computer connected up, mainly: The above text color is blue, but also need a mouse click, make it green, just represent can finally debug the page on the phone. C. After turning green, click on the Elements tab and the HTML structure of the current page will appear to debug. Enter alert (' 123 ') in the console, and the result appears on the phone on the horse. 1.html content:
<!doctype html>
<script src= "Http://10.62.0.173:8080/target/target-script-min.js#anonymous" ></script>
<script src= ". /target/target-script-min.js "/></script>
<body>
<style>
Body{background: #ff7300}
h3{font-size:50px;padding:100px;}
</style>
</body>
Fill: Sometimes fails, that is, Target is none. CMD to reenter the command, and then
Access http://localhost:8080/, continue: Debug Client User interface: http://localhost:8080/client/#anonymous
。。 Final 10.200.108.11 [channel:t-7 id:anonymous]-http://10.62.0.173:8080/www/1.html side can ...
Remote real-Time debugging of Web pages on your phone