Android WebView debugging

This tutorial guides you through debugging WebView content inside Android applications with WebDebugX. You will learn how to connect an Android device, debug the WebViews inside an app, analyze performance problems, and work around the common debugging pitfalls.

Before you start

Before debugging an Android WebView, make sure you have:

• The latest version of WebDebugX installed
• The Android device you want to debug (phone or tablet) at hand
• The Android app containing the WebView installed
• The device and computer on the same network (if you are using WiFi debugging)

Tip: for Android WebView debugging you need USB debugging and WebView debugging enabled on the device. If you are the app developer you also need to enable WebView debugging in the app — see section 4 of How to enable Web Inspector.

Connect the device

1. Connect the Android device to the computer with a USB cable
2. Allow USB debugging on the Android device (if prompted)
3. Launch WebDebugX
4. WebDebugX detects your Android device automatically

Select a WebView

1. In the WebDebugX device list, click your Android device
2. On the device detail page you will see the list of debuggable apps
3. Find the app containing the WebView and click it
4. On the app detail page you will see every WebView in that app
5. Select the WebView you want to debug

Tip: if you cannot see the app’s WebViews, make sure the app has WebView debugging enabled and the WebView has actually loaded content. On Android 4.4 and above the app must call WebView.setWebContentsDebuggingEnabled(true).

Debugging WebView content

Inspect the HTML structure

1. In the debugging interface, click the Elements tab
2. You will see the full DOM tree inside the WebView
3. Click an element to view its attributes and styles
4. Right-click an element to edit, delete or add elements
5. Use the Select element tool (the arrow icon at the top left) to pick elements directly on the page

Debug JavaScript

1. Click the Console tab
2. Execute JavaScript in the console
3. View JavaScript errors and logs
4. Use console.log(), console.error() and similar methods to output debugging information

Monitor network requests

1. Click the Network tab
2. You will see every request the WebView makes
3. Click a request to view details, including request headers, response headers and response content
4. Use filters to narrow down specific types of requests
5. Enable Preserve log to keep request records across page navigations

Debug JavaScript sources

1. Click the Sources tab
2. Find the JavaScript file you want to debug in the file tree
3. Click a line number to add a breakpoint
4. When execution reaches the breakpoint, inspect variable values and step through the code
5. Use the Watch panel to track variable values

Debugging WebView–native interaction

Android WebViews usually need to talk to native code, and WebDebugX has dedicated tooling for those interactions.

JavaScript interface debugging

Debug the JavaScript interface between the WebView and native code:

1. In the Console panel, type window to see all available global objects
2. Look for the JavaScript interface objects injected by the native code
3. Try calling those interface methods and watch the console output
4. Use console.log() to output the arguments and return values of the interface methods

Tracing native method calls

Trace the native methods the WebView calls:

1. In the debugging interface, click More tools (the three dots)
2. Choose JavaScript bridge
3. You will see a list of every native method the WebView has called
4. Click a method to view details of the call, including arguments and return value
5. Use filters to narrow down specific types of calls

Debugging WebViewClient and WebChromeClient

Debug the WebView’s lifecycle events and callbacks:

1. In the debugging interface, click More tools (the three dots)
2. Choose WebView events
3. You will see all of the WebView’s events and callbacks
4. Enable the events you want to trace
5. Interact with the WebView on the Android device and watch which events fire

Performance analysis

WebView performance panel

1. Click the Performance tab
2. Click Start recording
3. Interact with the WebView on the Android device
4. Click Stop recording when you are done
5. Analyze the timeline — CPU usage, rendering events, and so on

Memory analysis

1. Click the Memory tab
2. Choose an analysis type (heap snapshot, allocation timeline, and so on)
3. Click Start recording
4. Interact with the WebView on the Android device
5. Click Stop recording when you are done
6. Analyze memory usage and look for possible leaks

Network performance

1. Enable Preserve log in the Network panel
2. Reload the WebView content and review every request
3. Analyze load times and sizes
4. Look for resources you can optimize — compress images, combine CSS / JS files, and so on
5. Use network throttling to simulate different network conditions

Advanced techniques

Simulate different network conditions

1. In the Network panel, open the Throttling dropdown
2. Choose a preset (3G, 4G or Offline)
3. Or choose Custom and set upload / download speed and latency
4. Reload the WebView content and observe the loading behaviour

Debugging iframes inside a WebView

1. Find the iframe element in the Elements panel
2. Right-click the iframe and choose Inspect iframe
3. WebDebugX switches to the iframe’s context
4. You can now debug the content inside the iframe

Save and restore a debugging session

1. In the debugging interface, click File > Save session
2. Enter a session name and pick a location
3. Later, restore it via File > Open session
4. This is particularly useful for long debugging runs or team collaboration

Troubleshooting

The WebView does not appear in the device list

• Make sure the app has WebView debugging enabled
• Check that the device and computer are connected properly
• Restart WebDebugX and the Android device
• Make sure the Android device is unlocked and has trusted the computer

For a fuller checklist, see Device not found.

JavaScript will not execute in the WebView

• Check that JavaScript is enabled in the WebView
• Make sure no JavaScript error is blocking execution
• Try reloading the WebView content
• Check the WebView’s security settings