In my daily work, I often need to test our application on actual devices that will access it, especially devices like iPhone, iPad, Android and Windows Phone.
A great tool for inspecting what is being requested is named Fiddler. Fiddler allows you to monitor and follow traffic between a device and a server, including your local network. You can actually do a lot of things with fiddler like set breakpoints and alter both request and responses, an overall excellent tool for the belt.
Now in this post, I am going to walk you through what you need to do step by step to use your windows PC for inspecting iPad/iPhone requests and responses. Feel free to just skip through anything that you might already have done or know how to do.
Steps
- Install, run and configure Fiddler
- Configure iOS to use our PC as an HTTP Proxy
- Take a look at some requests and responses
Firewall, Router etc
When we install fiddler this will automatically add a rule to your firewall inbound rules allowing it to listen for traffic on any port that you have configured Fiddler to listen on. It might, however, be the case that something else like your router is preventing the selected port from being forwarded to your PC. Configuring this is outside the scope of this article but will need to be handled for everything to work.
Fiddler
Go download Fiddler and install it. Fire it up; select “Tools”, “Fiddler Options”, “Connections” where you should make sure that it is indeed using port 8888 and has “Allow remote computers to connect” checked. Let Fiddler keep running.
HTTP Proxy
On your iOS device select “Settings”, “Wi-fi”, “[network name]” and scroll to the bottom where you find “HTTP-proxy”. This should default be “Off”, but shift this to “Manual” and write in your IP under “Server” and 8888 under “Port”. Done.
Note: this screenshot is in danish but quite identical on English devices.
Inspect
Now everything should be up and running smoothly. Make sure Fiddler is running on your PC then open safari on your device and try to access http://google.com. In Fiddler, you should see something resembling this.
As you can see we are able to inspect all the requests made as well as their respective responses. In this screenshot we see that a GET request was issued, user-agent used was webKit, cache-control etc. On the response side of things, we find status code 200, the content-length of the document, the content-type etc.
By selecting the tab “TextView”, you are able to see the exact data which was sent as well as received. This makes it very easy to eliminate if for instance an Ajax request failed or the data returned was not correct.
I hope this helps you to get started. If you have any questions or something was not clear feel free to leave a comment. I all cases you should continue playing and working with Fiddler as I am sure you will find this tool very helpful in many scenarios.
Note: remember to disable ‘use proxy’ on your iOS device as your internet connection will not work if you close fiddler or turn of your PC.
Speak Your Mind