48

I'm trying to run javascript in WebView in an app. I'm developing on Nexus 7.

The html / javascript works fine on Chromium, but certain actions aren't happening on the tablet. Is there a way of seeing if any of the javascript itself is failing on the tablet? A kind of console view?

interstar
  • 26,048
  • 36
  • 112
  • 180

4 Answers4

50

You can actually receive the console messages from a WebView, which would allow you to catch the errors that it throws.

To do so:

  1. Enable JavaScript on your WebView
  2. Set a WebChromeClient
  3. Override onConsoleMessage

Example:

    final WebView webView = (WebView) findViewById(R.id.webview_terms_conditions);

    WebSettings webSettings = webView.getSettings();
    webSettings.setJavaScriptEnabled(true);

    webView.setWebChromeClient(new WebChromeClient() {
        @Override
        public boolean onConsoleMessage(ConsoleMessage consoleMessage) {
            Log.d("MyApplication", consoleMessage.message() + " -- From line "
                    + consoleMessage.lineNumber() + " of "
                    + consoleMessage.sourceId());
            return super.onConsoleMessage(consoleMessage);
        }
    });

    webView.loadUrl(getString(R.string.url_terms_conditions));

Similar to what it says here, though that doc isn't complete and it uses a deprecated method.

When running on Android KitKat, you can also enable remote debugging!

RominaV
  • 3,335
  • 1
  • 29
  • 59
  • the logs can be looked where in android studio 2.2 ? – user1788736 Jan 03 '18 at 09:55
  • 4
    heads-up: I barely noticed the difference in : `WebChromeClient()` and `WebViewClient`. So if you don't see `onConsoleMessage` it's because you've got the wrong Client ;-) – Someone Somewhere Aug 08 '18 at 12:20
  • It seems that in recent Chromium versions, `onConsoleMessage` will only be invoked if the app is debuggable. See also: https://bugs.chromium.org/p/chromium/issues/detail?id=905251 Chromium will not output to Logcat either. – Alex Suzuki Aug 15 '19 at 11:21
  • 1
    @user1788736 In the latest version of Android Studio, if you click on Run on the bottom of the window ([screenshot](https://i.stack.imgur.com/iWkGb.png)) you will see all the logs from your app. Unfortunately apps will output a lot of logs that aren't interesting, so the logs that you're actually interested in will be buried in logs that you're probably not interested in. Since most Javascript errors start with "Uncaught", you can work around that by searching for "Uncaught" (you can search in the logs by clicking in the logs and pressing CTRL+F). – Donald Duck Aug 11 '21 at 17:13
33

You can use Remote Debugging WebViews

Chrome Devtools Remote Debugging

More info

Debug WebViews in your native Android apps using Chrome Developer Tools.

On Android 4.4 (KitKat) or later, use DevTools to debug WebView content in native Android applications.

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    WebView.setWebContentsDebuggingEnabled(true);
}

Type chrome://inspect in pc browser enter image description here

Ahmad Aghazadeh
  • 16,571
  • 12
  • 101
  • 98
2

You might be able to use Firebug lite. It's just a bookmarklet so you can open it on any page.

Also, please search there are many other similar questions:

Community
  • 1
  • 1
sachleen
  • 30,730
  • 8
  • 78
  • 73
1

In Android Studio "Arctic Fox" just look in logcat. Message with "cromium" tag.

Falchio
  • 174
  • 1
  • 14