Remote real-Time debugging of Web pages on your phone

Source: Internet
Author: User

1. Installation
Requires node. JS Platform, install it first, open node. js command prompt, install weinre via NPM

Npm-g Install Weinre



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

Click to activate target



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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.