First, we can start out with a simple WebView that shows, Google’s homepage.
<WebView Source="https://google.com" />
When the emulator loads you will just see the Google homepage. You need to keep your app running and the emulator open, while we connect Chrome to the WebView.
Open up Chrome on your desktop (not the emulator) and Press F12. Then, press the 3 vertical dots, then go to More tools > Remote Devices. Once you do this, a window will appear at the bottom of that column, showing Devices and Settings.
First press Devices, then select your device. Once you have done that you will see the WebView URL and an inspect button. Press the Inspect button.
Once you have pressed Inspect, you will see a window appear, that will show you the HTML of the WebView and give you all the controls of the WebView, that you would when debugging or inspecting a webpage in Chrome.
You can do almost anything with this as you would a normal webpage, including:
- Adding or deleting html elements in real time
- Hovering over items to see their visual representation in the device / emulator
- Seeing Visual Indicators for each element
It’s a fantastic tool for debugging those hard to debug issues in a WebView. It can be a great time saver, if you try changing elements until your webview looks right, then make changes to your server, rather than having to make a change server side and continually keep restarting your app, to see the changes.