Troubleshooting WebView by printing console messages or by remote debugging

Printing webview console messages to logcat

To handle console messages from web page you can override onConsoleMessage in WebChromeClient:

final class ChromeClient extends WebChromeClient {
    @Override
    public boolean onConsoleMessage(ConsoleMessage msg) {
        Log.d(
            "WebView", 
            String.format("%s %s:%d", msg.message(), msg.lineNumber(), msg.sourceId())
        );
        return true;
    }
}

And set it in your activity or fragment:

webView.setWebChromeClient(new ChromeClient());

So this sample page:

<html>
<head>
    <script type="text/javascript">
        console.log('test message');
    </script>
</head>
<body>
</body>
</html>

will write log ‘test message’ to logcat:

WebView: test message sample.html:4

console.info(), console.warn() and console.error() are also supported by chrome-client.

Remote debugging android devices with Chrome

Your can remote debug webview based application from you desktop Chrome.

Enable USB debugging on your Android device

On your Android device, open up Settings, find the Developer options section, and enable USB debugging.

Connect and discover your Android device

Open page in chrome following page: chrome://inspect/#devices

From the Inspect Devices dialog, select your device and press inspect. A new instance of Chrome’s DevTools opens up on your development machine.

More detailed guideline and description of DevTools can be found on developers.google.com

Found a mistake? Have a question or improvement idea? Let me know.

Table Of Contents