How to debug web content in a webview?

It's often helpful to debug a webpage hosted in a webview in order to inspect its layout or troubleshoot JavaScript. Fortunately, it's easy to remotely inspect webviews that are running in your application. Start by enabling the Remote Debugging option on your WebViewPrefab or CanvasWebViewPrefab (or call Web.EnableRemoteDebugging() instead if you prefer):

Enable Remote Debugging

Next, follow the instructions for your 3D WebView package:

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. Install Chrome on your dev computer if you haven't already.

  2. While your application is running (and after it has created webviews), open Chrome and navigate to http://localhost:8080 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.

  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. 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. Important note: Since FireFox doesn't maintain backwards compatibility with debugging older versions of Gecko, FireFox 98 must be used for remote debugging. You can download FireFox 98 from the Mozilla FTP and then decline requests to enable automatic upgrades.

  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

First, if you're experiencing an issue where the page isn't rendering or working correctly, please see this article. For debugging web content on UWP, there are two options:

Debugging with legacy Edge browser

This first option is recommended because it is generally the easier than remote debugging on UWP. 3D WebView for UWP / Hololens is powered by the UWP WebView component, which internally uses the the EdgeHTML browser engine (v18). EdgeHTML is the browser engine that was previously used by Edge browser until it switched to Chromium in 2020. So, the easiest way to debug web content is to load the web page in an instance of the legacy Edge browser (v18) and use the browser's dev tools to inspect the page. Note: new versions of the Edge browser app (including on Hololens) use Chromium instead of EdgeHTML, so they don't exhibit the same quirks as legacy Edge (v18). To make it easy for people to test web content in the legacy Edge browser, Microsoft has partnered with BrowserStack to provide free access to use legacy Edge:

  1. Go to the BrowserStack page for Edge browser and click the "Get started free" button.

  2. Create a new BrowserStack account or sign in with an existing account.

  3. To launch the legacy Edge browser, select Windows 10 in the left pane and then click version 18 of Edge. Note: the BrowserStack UI may say "Each device is available for up to 1 minute during Free Trial", but this is incorrect; thanks to the Microsoft partnership, there is no time limit for Edge.

BrowserStack UI

  1. After BrowserStack launches the legacy Edge browser instance, you can load your URL in the browser to check if it renders correctly.

  2. Once your web page has loaded, right-click on the page and select "Inspect element" to debug the page with the browser's dev tools. This will allow you to view the JavaScript console to check for errors, which can occur if the page uses JavaScript features not supported by EdgeHTML.

Remote debugging on UWP

Another option for 3D WebView for UWP / Hololens is to 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

2D WebView for WebGL

With 2D WebView for WebGL, you can inspect web content using the developer tools of the browser in which the Unity app is running. Here are links to instructions on how to access the developer tools of popular browsers: