39

I have a webview that works fine on iOS, but not Android. Is there a tool where I can connect to Android webview in browser and debug it using firefox or webkit console? Currently I have no idea what is causing the webview not to work in Android.

In iOS I am able to open my iPad or iPhone simulator, open the webview pane, and in my desktop browser I listen to port 9999, and it shows me the tools you see in webkit developer tool/debugging tools.

I am looking for similar tool for Android, or at least to get me started on debugging.

Sathyajith Bhat
  • 21,321
  • 22
  • 95
  • 134
user1118019
  • 3,819
  • 8
  • 40
  • 46
  • 1
    Do you have any portion of the Android SDK installed? There are tools included that will let you read the logcat from the device. Eclipse makes it easy(ish) to get set up. That is probably a good place to start. Unfortunately though depending on what error is actually causing your problems it may be somewhat up to the browser implementation on your device what if any info you can get about it from the logs. – FoamyGuy May 08 '12 at 23:06
  • yes i have adb log,but there is nothing else i need to do to make sure the webview will dump javascript related errors to logcat? – user1118019 May 09 '12 at 02:20
  • did you create the app with a webview, or are you using the stock device browser? if you created it, have you tried loading your page in the stock browser? – FoamyGuy May 09 '12 at 02:40
  • i have an app, the app has a webview, which will go to the link of a site i am creating (the one i want to debug). are u saying i should open that website (the one i want to debug) in the simulator's browser and not in my app for debugging? – user1118019 May 09 '12 at 02:51
  • As one step of debugging =) Depending on the browser implementation it may spit out some more info that a "plain" WebView would not into the Log – FoamyGuy May 09 '12 at 02:55

6 Answers6

27

The easiest way to debug WebView is to connect your Android device to PC by USB and inspect your WebView by Chrome dev tools.

So, you will need:

1) Activate USB debugging on our devise. You can find it Settings >> Developer Options >> Debugging >> USB Debugging (activate checkbox)

2) Connect you devise to Computer by USB

Note: If you are developing on Windows, install the appropriate USB driver for your device. See OEM USB Drivers on the Android Developers' site.

3) Open Chrome browser and type in the URL field: chrome://inspect/#devices

4) Confirm that 'Discover USB devices' activated

5) On your device, an alert prompts you to allow USB debugging from your computer. Tap OK.

6) On the chrome://inspect page displays every connected device. Click inspect for connected device and you will get console.

More detailed manual is Debugging Android WebView

Vladyslav Babenko
  • 1,349
  • 18
  • 26
  • By far, the best answer for me. – Vincent Sep 24 '16 at 23:18
  • This is easier than [the accepted solution by far](https://stackoverflow.com/a/10560232/1657502) (which is of 2012, things got easier since then). – Antônio Medeiros Jun 07 '18 at 03:03
  • 1
    This is more like debugging webpages opened on Android? You will have to enable debugging in android webview as well. Like in MatPag's answer. – Darpan Aug 13 '18 at 07:37
  • superb. i was trying to use espresso bt was not able to find the element ID. now i can use it to see the html page in webview and get the id. u saved my day bro. thanks. works like a charm even with emulators. – srv_sud Nov 28 '19 at 09:11
16

Check out weinre. It provides Chrome developer-like tools for debugging from WebKit browsers to browsers running on remote devices.

Paul Beusterien
  • 27,542
  • 6
  • 83
  • 139
  • cool thanks paul, but it works for android webview in the app (my app)? or only the generic android browser in the simulator? meaning is weinre only works for android browser? – user1118019 May 21 '12 at 21:41
  • Weinre has some limitations - it seems to limit the depth you can inspect elements, and it doesn't have javascript debugging. – NoBugs Oct 03 '13 at 05:20
  • 6
    if it doesn't debug javascript then why is this selected as the correct answer? the title says "How to debug javascript..." – Radu Simionescu Oct 31 '13 at 07:46
  • 1
    While not providing JavaScript run-control, at least when the answer was written, there was nothing closer to a full debugger. For example, beyond full HTML browsing and updating, it provides the capability to invoke JavaScript functions from the weinre console. – Paul Beusterien Oct 31 '13 at 15:06
  • The website ¨debug.phonegap.com¨ is a broken link. – imranal May 31 '16 at 21:22
  • I removed the broken link. – Paul Beusterien Jun 02 '16 at 02:40
11

Those are the steps i use to debug a WebView content in a device:

  1. Enabled Developer Mode in your device
  2. Plug the device in the PC and enable USB debugging (install driver if needed)

  3. Add this line in your custom Application class or in the Activity where the webview is loaded 

    //if your build is in debug mode, enable webviews inspection
WebView.setWebContentsDebuggingEnabled(BuildConfig.DEBUG);

  4. Open Chrome and go to chrome://inspect and you should see your device in the Remote Target list

  5. Start debugging of your app from Android Studio
  6. When a WebView will be added to the layout, in the tab you opened will appear a screenshot with a Inspect button, click there and a Chrome developer console will open
MatPag
  • 41,742
  • 14
  • 105
  • 114
  • Reference : https://developers.google.com/web/tools/chrome-devtools/remote-debugging/webviews – Darpan Aug 13 '18 at 07:37
9

If you are not using Android 4.4, according to http://developer.android.com/guide/webapps/debugging.html you're going to enjoy the old-school way of debugging ...

If you don't have a device running Android 4.4 or higher, you can debug your JavaScript using the console JavaScript APIs and view the output messages to logcat.

For Android 4.4 and better, you'll enjoy remote debugging, see https://developers.google.com/chrome-developer-tools/docs/remote-debugging#debugging-webviews

Starting Android 4.4 (KitKat), you can use the DevTools to debug the contents of Android WebViews inside native Android applications.

Someone Somewhere
  • 23,475
  • 11
  • 118
  • 166
0

I have worked with a webview using javascript in my previous project and i encountered the same issue. I have not found a way to directly debug my code, but i used a javascriptinterface to send information to my activity. This way you can log the activities of your javascript or show some Toast messages.

When your java methods aren't called, it generally means you have made some sort of error in your JS code.

I know this is no high tech solution to your issue, but it is something at least, and it worked for me.

Good luck, Wottah

Wottah
  • 320
  • 2
  • 13
  • what jaavascriptinterface is it? – user1118019 May 16 '12 at 16:41
  • you should read [this](http://developer.android.com/reference/android/webkit/WebView.html) before you go any further. if you dont get it I recommend reading up on the "addJavascriptInterface(Object, String)" method – Wottah May 21 '12 at 06:50
-1

Try to acces to ADB Logcat of the device by installing adb on your desktop...

ChristopheCVB
  • 7,269
  • 1
  • 29
  • 54
  • 2
    I stand corrected :-) http://stackoverflow.com/questions/468993/is-there-a-way-to-enable-the-javascript-error-debug-console-for-safari-within-android and http://richchetwynd.com/2010/05/javascript-debugging-on-android-browser/ – Bear May 09 '12 at 05:28