Debugging and sniffing mobile device traffic

So, you’re developing you’re mobile web app when suddenly things start to go awry on the device. Request don’t seem to be sending out properly and your responses just don’t seem to be right. In a desktop environment you could easily pop open your web inspector to see what’s going on as network requests are sent and received but in a mobile environment what are you to do? Well don’t fret, if you’ve got a Mac (or a PC with similar functionality) sniffing out device traffic is as easy as a few clicks.

The basic idea is that you’ll share your desktop’s internet connection with your mobile device and then watch any traffic you want from your desktop. This involves a few simple steps:

  1. Share your desktop’s internet connection.
  2. Use the shared connection from your mobile device.
  3. Sniff your traffic.

Sharing your desktop internet connection with your mobile device

In a Mac environment this is easy (and you should be able to do something similar in Windows). The only requirement is that you’ll need a wireless card (comes built-in to all modern Macs) and you’ll need a second internet connection such as the ethernet port (since your wireless card will be occupied sharing your connection). Once you have these, simply go to:

Apple Menu > System Preferences… > Sharing (under Internet & Wireless)

In this pane, click on the “Internet Sharing” text but don’t check the box yet. Select Ethernet from “Share your connection from” and then check the box next to AirPort in “To computers using”. Now check the box next to “Internet Sharing” on the left. It should look something like this:

This tells your mac to take the incoming Internet connection on your Ethernet port and send it out to other connected devices on your wireless AirPort port. If everything went well you’ll also notice the icon for your AirPort connection looks like a little arrow pointing up:

NOTE: This creates an OPEN network without a password that anyone can connect to. If you’re in an area where you would rather have a private network, select the “AirPort Options…” button in the sharing pane and adjust settings as necessary before you start up your shared connection.

Connecting to the your shared connection from your mobile device.

Now you can connect any Wi-Fi device to your shared network including other computers, iPhones, iPads, Android phones, whatever.

For an iOS device, simple go to Settings.app > Wi-Fi and select your shared network (in my case “Jeffrey Sambells’s MacBook Pro”).

For Android you can find similar settings in Settings > Wireless & Networks > Wi-Fi Settings.

Once you’re connected to your shared Wi-Fi your mobile device will act as usual but all it’s traffic will be routing through your desktop computer–perfect for sniffing.

TIP: I find it’s often a good idea to enable Airplane mode on your mobile device so that you can be sure the requests will go over Wi-Fi instead of the cell network. To do this, just turn on Airplane mode in settings and then enable just Wi-Fi to connect to your shared connection.

Sniffing your mobile traffic.

Now comes the fun part. Since all the traffic from your device is now routing through your shared network, you can watch that network and see what’s going on.

I’ve found the easiest way to do this is using an app like HTTPScoop. If you set HTTPScoop watch your AirPort interface and then hit Scoop you’ll get a list of all the HTTP connections that occur to and from the mobile device:

and you can inspect each request for headers, raw data and the content of the request:

This is very useful for debugging you app’s requests and response as well as poking to see how other apps (including Apple’s built in apps) communicate with the network. Every wonder how map tiles load into the Maps.app? Or maybe you’re curious what info all your installed apps are sending out about you. Know you can find out.

If you need deeper details about the network traffic, there’s a number of other apps you can use that provide more details packet analysis.

Enjoy.