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 Web.EnableRemoteDebugging() to start the Chromium DevTools server on port 8080.
void Start() {
  // Call this method before any webviews are initialized.
  Web.EnableRemoteDebugging();
  // Now webviews can be initialized...
}

Or if you want to start the DevTools server on a different port, you can call StandaloneWebView.EnableRemoteDebugging() and pass the desired port number.

void Start() {

  StandaloneWebView.EnableRemoteDebugging(3000);
}
  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 Web.EnableRemoteDebugging().
void Start() {
  // Call this method before any webviews are initialized.
  Web.EnableRemoteDebugging();
  // Now webviews can be initialized...
}
  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 2017 using the approach outlined in this MSDN article. Here's a summary of how to enable it:

  1. Right-click on your project in the Solution Explorer and then click "Properties" at the bottom of the context menu
  2. In the left pane of the properties view, click "Debugging"
  3. Set "Debugger Type" to "Script Only"

UWP debugger type

Now when your application is running in the debugger, you can open the JavaScript console via Debug->Windows->JavaScript Console or view the DOM Explorer via Debug->Windows->DOM Explorer. However, there are a couple of caveats to this approach:

  • Microsoft removed the JavaScript console in Visual Studio 2019, so Visual Studio 2017 is needed in order to use it
  • This approach works well when the application is running on the local machine, but I haven't successfully gotten it to work when the application is running on a remote device, like Hololens

This is currently the best option for debugging content in UWP webviews, but another option is to install and test with a legacy version of the Microsoft Edge browser (v19 or older). Legacy Microsoft Edge uses the same EdgeHTML engine that powers the UWP WebView component, so it exhibits the same quirks. In contrast, newer versions of Edge use Chromium instead of EdgeHTML, so they don't exhibit the same quirks.