How to Debug Android WebView Content

Generally, using an Android WebView is a fire-and-forget operation. Load a URL. Display the contents. The end.

However, on those rare occasions when things don’t work, wouldn’t it be nice to be able to check out and debug what’s in the loaded HTML and JavaScript?

The solution is simple: Chrome.

Using Chrome’s remote debugging tools, you can connect to your device and use Chrome’s Developer Tools on your desktop to inspect the contents of a WebView on your app. You can examine the WebView’s HTML elements, view its source, and debug any JavaScript just as you would with a web page loaded in your desktop browser.

With your devices connected and USB debugging enabled, open Chrome on your desktop and select “Inspect Devices” from the Tools menu.

Note: Depending on your version of Chrome, this option may not exist. A sure-fire way to get there is to simply type “chrome://inspect” into the address bar.

From this page, select “Devices” and you’ll see a list of all currently connected devices.

Clicking the “inspect” link below an existing WebView will open the Developer Tools.

From there, you can inspect and debug the WebView content. Happy debugging!

For more insights on design and development, subscribe to BPXL Craft and follow Black Pixel on Twitter.

Black Pixel is a creative digital products agency. Learn more at blackpixel.com.