About Mobile front-end Android interlock

Why do you want to tune

A: Is crazy coding, the product mm come over, anxiously said two weeks ago a page on the phone display slightly misplaced, but small Ben on the display normal!

B: Based on the principle of love tossing, as a big front end, the basic skills in the mobile internet age.

How to tune:

1:ADB Chrome Extension

2:opera Mobile

3:weinre

4:adobe Egde Inspect CC

Way one: ADB Chrome extension: Specific reference: here

Step one: ADB extension

Step Two: Install the mobile phone driver

Step three: Mobile Chrome developer tools, start USB Web debugging

Step four: Adb->view inspection Targets

Details: Mobile phone driver If you don't find it, pack a 91 or pea pod.

Pros and Cons: Simple configuration to get started quickly. But the ADB makes a temper, and it's fast and slow.

Optimization: Fix slow can try to get a server locally using the Android SDK.

Basic Configuration Download Adt->cmd (adb forward tcp:8888 localadstract:chromedevtoolsremote)->localhost:8888

Mode two: Opera Mobile

Step one: Download Opera desktop version (low version) Download Opera simulator

Step Two: Open the desktop version of Dragonfly click on the remote debugging settings port in the upper right corner

Step three: Enter Opera:debug in the simulator to set the port connection.

Details: Opera desktop version of the debugger is actually not dragongly, lower version (10.52).

Advantages and Disadvantages: simple and convenient, supporting the simulation of various models of the display effect. However, it is not possible to select elements in an unfriendly manner.

Way Three: weinre (web in remote)

Step One: Install node. js. = Install weinre (npm install-g weinre)

Step two: Start the server Weinre–httpport 8080–boundhost-all-

Step Three: Add the following in the target debug file:

 <script src="http://本机ip:8080/target/target-script-min.js#anonymous"></script>

Step four: Localhost:8080/client can be debugged

Details: The script tag introduced must have #anonymous, otherwise you cannot see the debug file.

Advantages and Disadvantages: high-end, easy to operate, can be debugged with the browser's own debugger, suitable for hobby different developers.

The disadvantage is that it facilitates front-end development.

optimization: Each time manually introduced JS very uncomfortable, very low efficiency. Bookmark form, each time in the current page to introduce JS.

javascript:(function(e){    e.setAttribute("src","http://192.168.1.5:8080/target/target-script-min.js#anonymous");    document.getElementsByTagName("body")[0].appendChild(e);    alert(‘has executed!‘);})(document.createElement("script"));void(0);

Conclusion:

Mobile Debugging although fun, but too frustrating, to ensure efficiency, only as a last magic weapon

Problem: Bug Phenomenon--local debug--Locate bug-> determine if the alignment

About Mobile front-end Android interlock