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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.