Tuesday, November 6, 2012

Debugging .NET code using Devices(iPad/iPhone) and Fiddler

While working on programs which are targeted for devices (mobile, tablets, etc) we often face a situation where we feel that just device simulators are not enough I wish if I could run my programs in debug mode using the physical device. And this scenario often arises because personally I too faced a scenario where I was able to run my website on the simulator without any issues but the same was not working as expected on the physical device.

So in this post I am going to show you how to debug the .NET codes using apple iPhone or iPad. To do this  you

  • First need to configure Desktop or Laptop computer where you are running your .NET code
  • Second Configure Devices iPhone or iPad

There are few perquisites which are required

  1. Of course a apple (iPhone or iPad) device which can be used to debug the codes, you can also use Andriod phones but ad hoc connections are not supported by default on Andriod phone.
  2. WiFi enabled on your PC with administrator privileges, you can either enable you Internet connection sharing on WiFi network or created a ad hoc network, details of which I am going to mention later.
  3. If you are going for ad hoc network you may need a proxy server installed on your PC, here I am going to use Fiddler, you can download from here: http://www.fiddler2.com/fiddler2/version.asp
  4. Visual Studio installed, I am going to use Visual Studio 2012 in this article, but this post holds good for any version of Visual Studio as long as it can support debugging.

In this post I am going to show connecting using iPhone/ iPad using ad hoc network using my Fiddler.

Now lets get started step by step starting from configuring my system to configuring the phone device.

Creating a ad hoc network

  1. Open Network and Sharing Centre (Control Panel\All Control Panel Items\Network and Sharing Center).
  2. Go to Manage wireless network –> Add, this will open a Popup screen where either you can Manually create a network profile or you can Create an ad hoc network

image

3. Once you get the following screen, you can enter the name of the ad hoc network of your choice, select WEP as Security type, give the Security key and select the checkbox to Save the network, as given in the screen below.

image

Now you system is almost ready to accept incoming connection through the wireless network devices, just make sure your wireless is turned on, go to the taskbar network icon and open the window, this will display the newly created ad hoc network by you as Waiting for users. 

image

Now since your network is ready to accept incoming connections I am going to set up my proxy server where I am going to use Fiddler. To configure Fiddler open the fiddler in your system, Go to Tools –> Fiddler Options –> Navigate to Connections Tab select the check boxes as given in the screenshot below and leave the port as default 8888 if not already in use in your system, this can be changed as required.

image

Now since your system is ready for device connection, the only thing left is configuring your device. To configure your device follow the following steps.

In your iPhone or iPad first go to Cellular Data settings this is applicable if you are using your network provider internet connection. Once you open this Cellular Data tab in your device, disable the cellular data as given in the screen below..

iPadDeviceiPhoneDevice1

Now its time to configure your Network Settings in iPad and iPhone

iPadDevice3

iPhoneDevice2iPhoneDevice3

In the screen above you have to configure your device to use Static IP Address, with the IP Address which should be in the same network address and subnet address. You just need to give some unused class D address which should be different from your system to which this is connecting. You can check your system IP Address of Wireless LAN adapter using ipconfig command in command prompt. This IP address will be the IP Address of the device (iPad/iPhone).

Now go to the HTTP Proxy settings on the same page below of device network settings, select the proxy settings as Manual. In the Server you have to enter the correct IP Address of the wireless LAN adapter of your system (Desktop/Laptop), enter the port which was configured on Fiddler as given in the fiddler settings above.

Once you have completed these settings your device is also ready to connect to the System. Once connected you can see the status as connected instead of Waiting for users in ad hoc network.

Now once everything looks fine, you can go ahead and first run the application in debug mode in your system, once your application opens in the web browser you can get the URL address on which your application is ready for debug. As per my convenience I have used a MVC application for debugging, but you can use any other types of web application also.

iPad1

Enter the Same URL (http://localhost:35510/) in your device. I have kept a line of code which gives me the UserAgent from where the request is coming from.

string userAgent = HttpContext.Request.UserAgent;

Following are the screens which I get in iPad and iPhone respectively

iPhoneDevice4   iPadDevice2 

Now if I go and set the breakpoint in the code, I can see the user agent which clearly shows the requested client user agent.

iPhone2Laptop

iPad2Laptop

In the above two screens you can see the user agent browser as Mozilla/5.0 (iPhone…) and Mozilla/5.0 (iPad…) for iPhone and iPad respectively.

Note: IP addresses are used in this article are just for illustration only, this is not directly or indirectly related to any existing IP address used anywhere in existence.

Hope this helps.

3 comments:

Anonymous said...

I have tried all the steps, but I am not able to bring up localhost on my Ipad. Can you please help.
Thanks.

Brij said...

What are the steps you are following, the steps mentioned here may be just indicative. There may be few other scenarios based on the different environment, please provide me more details on
1. The steps you have used
2. Your environment, etc

Brij said...

To access the application using localhost instead of machine name, make sure to switch off your mobile internet, and provide the Proxy settings correctly as mentioned in the post. The device IP address should be on the same subnet, for e.g if you Computer IP address is 123.456.789.01 then you device IP address should be 123.456.789.02 or 03 (should be available in your network) and Proxy IP address should be same as your computer IP address i.e : 123.456.789.01

Post a Comment