iOS WebView debugging

This tutorial guides you through debugging WebView content inside iOS applications with WebDebugX, covering both WKWebView and UIWebView. You will learn how to inspect the HTML, CSS and JavaScript inside a WebView, and how to solve the common WebView debugging problems.

Before you start

Before debugging an iOS WebView, make sure you have:

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

Tip: for iOS WebView debugging the app itself must have Web Inspector enabled. If you are the app developer you need to add that configuration — see section 4 of How to enable Web Inspector.

Connect the device

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

Select a WebView

1. In the WebDebugX device list, click your iOS 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 Web Inspector enabled and the WebView has actually loaded content.

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

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

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

WKWebView vs UIWebView

iOS has two main WebView components, and they differ in what you can debug.

WKWebView

WKWebView is Apple’s recommended modern WebView component, with better performance and capabilities:

• Supports more modern web features
• Better JavaScript performance
• Supports more debugging features
• Shown as WKWebView in WebDebugX

UIWebView

UIWebView is the older component. It is deprecated, but some apps still use it:

• Relatively limited features
• Poorer JavaScript performance
• Fewer debugging capabilities
• Shown as UIWebView in WebDebugX

Tip: if you are the app developer, migrate from UIWebView to WKWebView — Apple has marked UIWebView as deprecated and it is no longer recommended for new apps.

Common WebView debugging scenarios

Debugging WebView load failures

If the WebView will not load content correctly:

1. Check in the Network panel whether the requests succeeded
2. Verify the request URLs are correct
3. Look at the response status codes and bodies
4. Check the Console panel for JavaScript errors

Debugging WebView–native interaction

If the interaction between the WebView and native code is broken:

1. In the Console panel, check whether the JavaScript bridge object was injected correctly
2. Use console.log() to output the arguments passed to bridge methods
3. Add logging in the native code to confirm the method is being called
4. Check that the data format is correct (JSON parse errors, for instance)

Optimizing WebView performance

1. Use the Performance panel to analyze load and rendering performance
2. Check JavaScript execution time
3. Analyze network request load times
4. Optimize the order and size of resource loading

Advanced techniques

Simulate different network conditions

1. In WebDebugX, open the Throttling dropdown in the Network panel
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

If the WebView contains iframes, you can debug them separately:

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 Web Inspector enabled
• Check that the device and computer are connected properly
• Restart WebDebugX and the iOS device
• Make sure the iOS device is unlocked and has trusted the computer

JavaScript will not execute in the WebView

• Check that JavaScript is enabled in the WebView
• Confirm the WebView has fully loaded
• Try reloading the WebView content
• Check whether a JavaScript error is blocking execution

The WebView content renders incorrectly

• Check that the CSS loaded correctly
• Look in the Network panel for failed resource loads
• Check that the WebView’s viewport settings are correct
• Try clearing the WebView cache and reloading