How to debug Web pages on your phone and hybrid apps based on Cordova/phonegap

In the development of mobile phone pages and hybird applications, debugging has been a persistent problem, and sometimes need to write log and other ways to the salvation of the curve.

In fact, Chrome and Android (need 4.4+ version) has been provided as much as the computer version of the debugging function, but it seems that there are many people do not know, so write down to share to you. This article follows the CC agreement, welcome forwarding, but please specify the author and source (HTTP://NGNICE.COM/POSTS/659F97A6F06C90).

The operation is divided into two parts of the computer and mobile phone (or simulator), the operation flow is as follows:

1. Open the Settings | developer options on your phone | USB debugging ".
   For the lower version of Android, directly open, for more than 4.4, the "Developer Options" menu is hidden, open the method is in the "settings | about the Phone" screen to double-click the "version number" item (note, not "Android version" entry), generally need to double-click two consecutive times, At this point you will see a hint that the developer option is open.
2. Open chrome on your phone to browse the site or open the hybrid program.
3. Connect your phone to your computer via a USB cable, and ask if you want to turn on USB debugging to select "Yes". In the case of an emulator, enter the IP address of the ADB connect < emulator at the command line, which you can see in the connection details of the emulator's WLAN >
4. Open chrome on your computer and visit the chrome://inspect/#devices, which is a Chrome internal page where you'll see a list of the devices that are listed in the WebView that it contains.
5. Under this webview there will be a hyperlink button: "Inspect", click it, open a Devtools page, and debug the page on the computer using the same.
   Even when you hover your mouse over a node on its element page, Chrome also highlights the node as if it were a computer version of Chrome (but may slow down).

I'm not going to teach you the rest of it.

I use the hybrid framework is Cordova, if you do not use Cordova, then you may need to add the following code at the entry point of the program:
Webview.setwebcontentsdebuggingenabled (True)
Of course, wrap it in the if condition, lest the distribution be "debugged" by others.
The corresponding code in iconic is as follows, for reference:

Final StringPackageName= This.Cordova.Getactivity().Getpackagename();Final PackagemanagerPm= This.Cordova.Getactivity().Getpackagemanager();ApplicationInfoAppInfo;AppInfo=Pm.Getapplicationinfo(PackageName, Packagemanager.Get_meta_data);If((AppInfo.Flags& ApplicationInfo.Flag_debuggable) != 0 &&< Span class= "PLN" > Android.. Build. Version. Sdk_int >= Android.. Build. Version_codes. Kitkat { setwebcontentsdebuggingenabled true               /span>                

Reprint Source Ngnice

How to debug Web pages on your phone and hybrid apps based on Cordova/phonegap