The debugging method of mobile-end real Machine

The most recent analysis of Web pages, performance differences on Android and iOS, in addition to the operating system itself, should be explored in more places, the first step is to analyze on the real machine. So summarize a few ways.

1.Mac + +iphone+ Lightning+safari Browser

Steps:

1) Use: Lighting line to connect Mac to iphone

2) iphone open Web Inspector (set->safari-> Advanced->web Checker)

3) iphone opens the page for analysis with Safari

4) Mac open Safari Browser (menu--development---the corresponding phone name--to debug the page), click to enter Safari Developer Tools

5) You can see the debug interface is like this

Disadvantage: Cannot debug the page inside the WebView

2. Android Phone + Android Data cable + PC

Steps:

1) Connect your phone to your computer with a data cable

2) mobile Phone open use debugging (Android different models to open the steps are not the same, do not know Baidu a bit)

3) Open Chrome, enter chrome://inspect/#devices, tick discover USB devices

4) Use mobile chrome to open the page you want to debug (if it is another WebView page, you need to configure the startup code in the app, the official tutorial)

5) Select the page you want to debug to enter

6) You can see that this is the Debug interface

Cons: Pro-Test, Mac debugging interface and Xiaomi 6 mobile phone interface often different steps, operation is very inconvenient, fortunately, the console still can see things normally

3.weinre

Steps:

1) can be directly npm install this module, and then launch, open the management interface can

2) Install the whistle directly, with the weinre. can also proxy different environments, specific tutorials see: https://avwo.github.io/whistle/rules/weinre.html

Cons: Can be said to be minimalist, simple steps, debugging simple, can be adjusted also simple (is to check the elements, see the console, not like the chrome analysis tools)

The debugging method of mobile-end real Machine