Mobile Development Debugging tool artifact--weinre how to use

Front-end Development debugging Prerequisites:

1. Dom Operation Breakpoint Debugging;
2. debugger breakpoint debugging;
3. Native method Hook (individuals have not yet tried, do not know how the effect);
4. Remote mapping local testing;
5. Weinre Mobile Debugging (detailed introduction);

Like Dom breakpoint debugging and Debugger breakpoint debugging I think we often use the method, or is the current comparison of Firefox more popular Fiexbug debugging tools, today we are mainly research weinre debugging tools;

Of course, as a front-end developer, it's tedious to support even the various versions of the phone, such as taking the iphone, though all are-webkit kernels, if you add animations like-webkit-translate ... of course, given the compatibility issue, You will take the forward prefix-webkit, but you want to mobile phone is mostly support HTML5 and CSS3, so try to-webkit without a prefix, the result, hehe, then the problem comes, iphone5s the following will have problems, the above will have no problem, so you know, It is best to prefix-webkit, but like the recent newer version of Andirod to CSS3 attribute support is still good;

Next, we introduce the following highlights:

Installing Weinre

Weinre can be followed by NPM (individuals are also recommended)

NPM install-g weinre  (after completion, you can see the version number on CMD to see if it succeeds)

　　

Weinre--httpport 8080--boundhost-all-

　　

ok! If there is no problem, we open Google Chrome (-webkit kernel) input: http://127.0.0.1:8080/will see the following interface

The above is the face of Lushan, "Debug Client User Interface" is the Weinre debug clients, click to see the current page has not been tested:

Targets display of None

ok! so let's go ahead and add debug Target

There are two ways of doing this:

1. Target Script (you need to add a JS to the page):

<script src= "http://192.168.1.69:8080/target/target-script-min.js#anonymous" type= "Text/javascript" ></ Script>

　　

Note: The red part is your own IP address and port number, self-adaptation to adjust;

1. We can also save a section of JS to the mobile device bookmarks
   JavaScript: (function (e) {e.setattribute ("src", "http://127.0.0.1:8080/target/target-script-min.js#anonymous"); document.getElementsByTagName ("Body") [0].appendchild (e);}) (Document.createelement ("script")); void (0);

Finally: Mobile phone test:

1. Mobile phone connection WiFi, must and computer in the same section of the network, I use the XAMPP simulation server, you can use the Internet to check the usage, and then test your own mobile phone to test the page can be;
   Now go back to the computer http://127.0.0.1:8080 Click "Debug Client User interface:" If there is no problem, you have successfully added the debug Target:

Tip: Note that the phone does not lock the screen, or debugging will be disconnected!

1. Debug Start:

You can check each component!

Mobile Development Debugging tool artifact--weinre how to use