Debugging Overview

Debug C# or VB

First look at the debugger - Visual Studio (Windows)MicrosoftLearn

Debug the WebView (JavaScript)

By default, WebView debugging is enabled on all Wisej.NET Hybrid Debug builds and disabled on Release builds.

You can manually override the setting in the Hybrid Client Startup.cs file:

.UseWisejHybrid((config) =>
{
	// forces the WebView to be inspectable using DevTools.
	config.Inspectable = true;

	// Provide the startup URL for the Hybrid WebView.
	config.StartupUrl = "http://localhost:5000/";
});

Android

To debug an Android WebView using Chrome's developer tools, follow these steps:

1. Enable Developer Options on Your Android Device: On your Android device, go to "Settings" > "About Phone" and tap on the "Build Number" multiple times until you see a message confirming that Developer Options are enabled.

2. Enable USB Debugging: In the "Developer Options" settings, enable "USB Debugging." This allows your device to communicate with your development machine.

3. Connect Your Device to Your Computer: Connect your Android device to your computer using a USB cable.

4. Open Chrome on Your Computer: Launch the Google Chrome browser on your development machine.

5. Access Chrome DevTools: In Chrome, open a new tab and type "chrome://inspect" in the address bar. This will open the "Chrome Inspect Devices" page.

6. Discover Your Device: Under the "Devices" section, you should see your connected Android device listed. Click on it to open the DevTools for your device.

7. Inspect the WebView: In the DevTools window, you can now see the WebView content running on your Android device. You can inspect HTML elements, check the console for JavaScript errors, monitor network requests, and use the various debugging features offered by DevTools.

iOS / macOS

To debug an iOS WebView using Safari's developer tools, here's a step-by-step guide:

1. Enable Developer Mode on Your iOS Device: On your iOS device, go to "Settings" > "Developer" and enable "Web Inspector" or "Remote Web Inspector," depending on your iOS version.

2. Connect Your iOS Device to Your Mac: Connect your iOS device to your Mac using a USB cable or make sure both devices are on the same Wi-Fi network.

3. Open Safari on Your Mac: Launch the Safari browser on your Mac.

4. Enable Developer Menu in Safari: In Safari, open the "Safari" menu and go to "Preferences." In the "Advanced" tab, check the box that says "Show Develop menu in menu bar."

5. Access Safari's Web Inspector: On your iOS device, open the app containing the WebView you want to debug. Then, on your Mac, go to the "Develop" menu in Safari's menu bar. Your iOS device should appear in the dropdown list. Hover over your device's name, and you will see a list of open web pages in the app.

6. Select the WebView to Debug: Click on the WebView you want to debug in the list of open web pages. This will open Safari's Web Inspector, allowing you to inspect and debug the WebView content.

7. Inspect and Debug: Within Safari's Web Inspector, you can inspect HTML elements, check the console for JavaScript errors, analyze network requests, and use various debugging features. You can set breakpoints, step through JavaScript code, and modify the DOM in real-time to diagnose and fix issues in your WebView content.

Windows

1. Press F12