Xamarin Forms Debugging The WebView In Chrome

 
A lesser known feature of debugging on Android, is that you can debug a WebView inside an Android app, in real time. This can be done on your desktop, via Chrome. It allows you to modify HTML and execute Javascript in real time, in the WebView on Android.

WebView

First, we can start out with a simple WebView that shows, Google’s homepage.

<WebView Source="https://google.com" />

Emulator

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.

googlewebview

Chrome

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.

devtoolsremotedevices-1

Select Devices

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.

connectdevice

Inspecting

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.

inspectwebview

You can do almost anything with this as you would a normal webpage, including:

  • Adding or deleting html elements in real time
  • Running Javascript
  • Hovering over items to see their visual representation in the device / emulator
  • Seeing Visual Indicators for each element

Summary

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.


XAMARIN.FORMS MONTHLY NEWSLETTER

JOIN 1,000+ SUBSCRIBERS

  1. Don't miss out on updates
  2. The latest info from this site, Xamarin and the community
  3. Unsubscribe at any time*

* We use MailChimp, with double opt-in, and instant unsubscribe

Microsoft MVP | Xamarin MVP | Xamarin Certified Developer | Exrin MVVM Framework | Xamarin Forms Developer | Melbourne, Australia

Related Posts

One Comment

  1. Hines V

    Awesome article, had no idea this could be done for Android. I did know that it could be done for iOS though in a very similar way. Just start you iOS simulator, or a plugged in physical device running a debug or ad-hoc version of you app -> make sure the app has an active WebView opened -> open up Safari (be sure to enable the Developer menu setting) -> then click the Develop tab -> choose iPhone Simulator (or your physical device’s name).

Leave A Comment?