Weinre Real-Time debugging of Web pages on your phone

H5 page, the general use of Google Browser simulator debugging page. But once the individual model has the bug, in the Google again show not come out.

So you have to use the Weinre tool to debug.

Weinre Tool powerful feature: Open the page in the bug model, with this tool, you can quickly locate the bug and find out the solution.

In other words, when you open the page with your phone, the computer's mouse is placed on the code, and the phone can show which module the code corresponds to. You can modify the style in real time.

Begin:

First of all, you have to use the node. js and NPM environments .... If not, how to install Baidu under. You can install the global.

Secondly:

1.npm-g Install weinre//Global installation Weinre

2. weinre--boundhost [hostname | IP address |-all-]--httpport [port]//Start weinre

Example: Weinre--boundhost 192.168.1.130--httpport 9999//Start weinre (192.168.1.130 must be a native address, 9999 is the port number, any port number, generally do not 80 or 8080)

3. Open cmd, input: weinre--boundhost 192.168.1.130--httpport 9999

.

4. Open Browser: Enter 192.168.1.130:9999

5, put the " step 1" inside the statement into the page to be debugged <script src= "http://192.168.1.130:9999/target/ Target-script-min.js#anonymous "></script>

then click " step 2"

　　　　　　

6. Use your phone to open the page that you want to debug, that is <script src= "http://192.168.1.130:9999/target/target-script-min.js#anonymous" ></script> A page with this line of code

And then the address that was refreshed

7. Click Step 1, and then click Step 2 . You can see the effect of the phone and then debug it on the Web. General debugging compatibility issues You can do this

　　　　　　　　

Weinre Real-Time debugging of Web pages on your phone