How can I debug web content in a webview?

It's often helpful to debug a webpage rendered in a webview in order to inspect its layout or to troubleshoot JavaScript. Fortunately, it's easy to remotely inspect webviews that are running in your application. This article describes how to debug web content with each version of 3D WebView:

3D WebView for Windows and macOS

With 3D WebView for Windows and macOS, you can inspect web content with Chrome DevTools using the following steps:

  1. At the start of your application, add a call to StandaloneWebView.EnableRemoteDebugging(), passing a parameter for the port number on which to start DevTools.
void Start() {
  // Call this method before any webviews are initialized.
  StandaloneWebView.EnableRemoteDebugging(8080);
  // Now webviews can be initialized...
}
  1. Install Chrome on your dev computer if you haven't already.

  2. Run your application so that it calls EnableRemoteDebugging() and initializes one or more webviews.

  3. While your application is running, open Chrome and navigate to http://localhost:{port} to see a list of inspectable webviews.

list of webviews to debug

  1. Click a link to one of the webviews, and it will load a DevTools console through which you can inspect that webview's content.

DevTools console

3D WebView for Android

With 3D WebView for Android, you can inspect web content with Chrome DevTools using the following steps. Although these steps work for most Android devices, they don't work for Oculus Quest or Go due to a firmware limitation. For Oculus devices, 3D WebView for Android with Gecko Engine is recommended instead.

  1. Enable USB debugging on your Android device. If you use the device for development, then you've probably already done this.

  2. Install Chrome on your dev computer if you haven't already.

  3. Connect your Android device to your dev computer and run your application.

  4. While your application is running, launch Chrome on your dev computer and navigate to the URL chrome://inspect. This page shows you a list of inspectable webviews running on your connected Android device.

Chrome's inspect page

  1. Click the inspect link next to the webview that you wish to inspect. This will open a new Chrome DevTools window for inspecting that webview.

Chrome DevTools

3D WebView for Android with Gecko Engine

With 3D WebView for Android with Gecko Engine, you can inspect web content with FireFox DevTools using the following steps:

  1. At the start of your application, add a call to AndroidGeckoWebView.EnableRemoteDebugging().
void Start() {
  #if UNITY_ANDROID && !UNITY_EDITOR
    // Call this method before any webviews are initialized.
    AndroidGeckoWebView.EnableRemoteDebugging();
    // Now webviews can be initialized...
  #endif
}
  1. Enable USB debugging on your Android device. If you use the device for development, then you've probably already done this.

  2. Install FireFox on your dev computer if you haven't already.

  3. Connect your Android device to your dev computer and run your application.

  4. While your application is running, launch FireFox on your dev computer and navigate to the URL about:debugging. This page shows you a list of connectable devices.

FireFox's debugging page

  1. Click the Connect button next to your device, and then click the device name a second time to display a list of inspectable webviews.

FireFox's debuggable webviews

  1. Click the Inspect button next to the webview that you wish to inspect. This will open a new FireFox DevTools tab for inspecting that webview.

FireFox DevTools

3D WebView for iOS

With 3D WebView for iOS, you can inspect web content with Safari Web Inspector. First, there are a couple of limitations:

  • Debugging iOS webviews requires Safari, so your dev computer must be running macOS.

  • You can only debug webviews in applications loaded onto your device through Xcode. You can't debug webviews in apps installed through the App Store or Apple Configurator.

With those limitations in mind, here are the steps to remotely debug a webview in iOS:

  1. Enable the Safari Web Inspector on your iOS device by opening the iOS Settings app, navigating to Settings > Safari > Advanced, and toggling the Web Inspector option on.

iOS Safari settings

  1. Next, you must also enable developer tools in Safari on your dev computer. Launch Safari on your dev machine and navigate to Safari > Preferences in the menu bar. In the preferences pane that appears, click on the Advanced tab and then enable the Show Develop menu option at the bottom. After you do that, you can close the preferences pane.

Mac Safari settings

  1. Connect your iOS device to your dev computer and run your application.

  2. In Safari on your dev computer, click on Develop in the menu bar and hover over the dropdown option that is your iOS device's name to show a list of webview instances running on your iOS device.

Mac Safari develop menu

  1. Click the dropdown option for the webview that you wish to inspect. This will open a new Safari Web Inspector window for inspecting that webview.

Safari Web Inspector window

3D WebView for UWP / Hololens

With 3D WebView for UWP / Hololens, you can inspect web content with Visual Studio using the approach outlined in this MSDN article. This approach works well with UWP apps running on the local machine, but I have so far been unable to get it to work with remote devices, like Hololens.