how to enable WebKit's remote debugging/inspector of Android app using WebView?

Question

I need to inspect javascript execution (webview widget) in an android application, while debugging; through SDK & usb cable and/or http/websockets; from destop computer (e.g. chrome running on desktop).

Webkit's sources includes DebuggerServer implementation ( platform_external_webkit\Source\WebKit\android\wds\DebugServer.cpp ) accessible at cpp level, and bound if flag WDS is enabled (at build time?)

Source\WebKit\android\jni\WebCoreFrameBridge.cpp:#if ENABLE(WDS) Source\WebKit\android\jni\WebCoreFrameBridge.cpp: WDS::server()->addFrame(frame);

The default port for server is 9999

The sources show that all is implemented (at Cpp level) to enable the feature, but I have not found any reference searching the web for experiences using live debugging at javascript level in adroid devices automating webkit's inspector interface.

1.- Are the feature present, in binary form, executing in actual android devices? (has adroid's distribution of webkit been built without WDS flag enabled? :-( )

2.- Can the remote debug feature be enabled/used from javascript or application (at java level) e.g. at startup of app?

3.- In case it is possible to enable the webkit inspector/debugger feature, how to make it possible to interact from remote application ? (e.g. from another javascript app using websockets, or chrome on desktop computers).

Some paragraphs explaining the mechanics like https://developers.google.com/chrome-developer-tools/docs/remote-debugging#remote would be nice!

thanks in advance for any information, or references about this topic. I consider important to enable remote debugging (in the device) at javascript level to make it possible modern development of HTML5 applications and happy debugging experience.

cheers, Ale.

Solution 1

For android >= 4.4 (kitkat)

See Remote debugging on Android with Chrome

For android < 4.4 (Lower versions)

Use very good open source tool: weinre. See this video for help to use it. If you are familiar with grunt then you can use grunt-weinre

For quick view:

1. install weinre using npm
2. Do the configuration in your gruntfile.
3. Run the weinre grunt task.
4. Use this script to inject the weinre target code into your web page.

5. Open http://localhost:8082 in your browser and you will find devices running above script. You can debug all this devices.

NOTE: if you want to debug webview/browser in your mobile device then you need to replace localhost with your machine's IP running weinre. And yes, all the devices should be on the same network.

Solution 2

Now it is easy with Android 4.4. See https://developers.google.com/chrome-developer-tools/docs/remote-debugging#debugging-webviews

Solution 3

You can do remote debugging targeting the Android Browser with the weinre project. Or use Chrome remote debugging with the Chrome for Android browser. As far as I know, you can't target a WebView directly, but targeting the Android Browser should get you close.

Comments

[Pikachu]

Thats great, but how about Android < 4.4, I realy need to debug Galaxy S3 that uses Android 4.3

[Chaki_Black]

Thank you very much!! With help of your answer, video link, weinre and grunt-weinre I was able to debug ionic WebView running on android < 4.4