Android WebView Remote Debugging

H5 debugging way generally with chrome emulator is good, but encountered the app on the clumsy count. At this time also have to use remote debugging, remote debugging is to force, but at present there is no good article on the internet to explain, to properly configure it down or very difficult, today toss a half day, finally fix, share

Configure requirements

Say its configuration is also very sophisticated, and iOS development, are the threshold of goods, tell everyone the cock silk mistakenly, but this condition as the cock silk I also was a ball, the only requirement is Android system to support more than 4.0

App Code

If you need to debug then, in the code must first in the development package before the APK generation, add the following two sentences in the Manifest.xml file

{    "name": "My extension",    ...    " Permissions ": [      " Debugger ",    ],    ...}

The point is permissions and other functions like to register first, refer to Https://developer.chrome.com/extensions/debugger

Then also in the main file to add this sentence, said to launch the function in Android, saying that the development of the app is a bit of waste wood, this code is difficult to remember and functional coupling tight, non-ctrl+c,ctrl+v How to break, details https:// Developer.chrome.com/devtools/docs/remote-debugging#debugging-webviews

if (Build.VERSION.SDK_INT >= build.version_codes. KITKAT) {    if (0! = (getapplcationinfo (). Flags &= applicationinfo.flag_debuggable)) {        Webview.setwebconten Tsdebuggingenabled (True);}    }

Installing device drivers

Plug in the device's USB for OEM installation, a lot of automatic Update driver do not believe Ah, from here to drive http://developer.android.com/tools/extras/oem-usb.html installation mode "Take Win7 as an example"

• 1. Linked devices
• 2. Click My Computer right button to select Manage
• 3. Select Device Manager
• 4. After finding the appropriate device
• 5. Right-click to select Update Driver software
• 6. Select browse for the computer to find the driver software (install http://developer.android.com/tools/extras/oem-usb.html according to the instructions in this) I used the http:/because it was the Googlenesus series. /developer.android.com/sdk/win-usb.html)
• 7. Click Next to install the driver

These are relatively simple, but it is important to note that there are also drivers that are not only native drivers but also interface that are perfectly fitted. That's what my nexus has to do. For the first time, I thought my machine didn't support remote debugging. (according to the instructions in this installation http://developer.android.com/tools/extras/oem-usb.html) I'm using the Googlenesus series./HTTP// Developer.android.com/sdk/win-usb.html

Debug hybrid

Enter the URL chrome://inspect/#devices tick, and then hybrid the page naturally presented, click Inspect can be the theory is such, but, if your effect is OK, I knelt, today studied for half a day mainly encountered this sill. For a reason, there were two variables undefined

Ncaught Referenceerror:inspectorfrontendapi is not defineduncaught referenceerror:webinspector are not defined

Looking for a long while indeed stackoverflow on the same question, but no one answered ... http://stackoverflow.com/questions/21801324/ Inspectorfrontendapi-is-not-defined-during-chrome-remote-debugging later found not to answer but is so, through the clutch tool, learned that the original request was rejected, This is only the great celestial being able to come out. I used three kinds of proxy way fq,facebook are tired of watching or not access to, Facebook has been my fast play bad. Finally, the VPN solution, (recommended Greenvpn free) But fortunately this access is a configuration file, that is, after the execution of a successful save, will no longer continue to access. OK, let's do it, break it down and start debugging slowly.

Reference articles

Https://developer.chrome.com/devtools/docs/remote-debugging

Https://developer.chrome.com/devtools/docs/debugger-protocol

Https://developer.chrome.com/extensions/debugger

Http://developer.android.com/tools/extras/oem-usb.html

Http://developer.android.com/tools/device.html