Categories
Web Development

Charles in Charge: Actual Mobile Testing with Charles Proxy

There are several decent mobile testing services out there. One that I’ve used significantly is Browserstack, which indeed is pretty good. Still, in my experience, nothing beats testing your site on an actual mobile device.

Further, though anyone with an internet connection can access a public site on their phone, if you have to access something on your computer or Sandbox/UAT server that’s available only by VPN connection, well… you’re up the proverbial creek. Or so you thought…

Accessing sites on your mobile device and through your computer’s internet connection is  made possible by the plethora of HTTP Proxy tools that are out there. But my favorite is Charles Proxy. They offer a persistent free trial version that runs for 15 minutes at a time (after which you’ll just need to restart it), so there’s no reason not to try. Download it for now, and if you like it and want to feed some hungry developers: buy it!

A few notes before we get started:

  • This tutorial is written for connecting to a Mac computer with an iPhone, but as a former Windows/Android man in my earlier life, the steps are for the most part the same.
  • Both your computer and mobile device must be connected to the same WiFi network. I would strongly advise that this network be a secured private one as we’ll temporarily opening up your machine for other devices to connect.
  • When finished testing, be sure to reset your phone’s proxy configuration back to “Off”. If you don’t, your phone won’t have any WiFi connection once Charles has been turned off, and you’ll be left wondering why the heck your phone won’t let you watch that cat video.
  • In the steps below, I am accessing a local site on my computer, which involves the additional step of configuring Apache to actually serve the page. That’s a separate tutorial for another time, but if you’re interested you can check out this tutorial which was how I learned to do that.

OK, let’s get started…

So let’s say you have this Sweet, Sweet Local Site (or something behind your Network Firewall). In either case, you can’t access it on your phone. In order to do so, you’ll need to enable Transparent HTTP proxying on your computer.

Start by opening Charles Proxy, select Proxy > Proxy Settings from the menu.
step-2

This will open up a window with a few panels.  In the first panel labeled “HTTP Proxy”, make a note of the Port number (which should be 8888), and check the box underneath which says “Enable transparent HTTP proxying”. This will basically allow devices connected to the network to connect to your machine via the aforementioned port. Again, warning that you should only be doing this on your home or privately secured network. Click “OK”.

step-3

Your Mac should now be open for your iPhone to connect.

Next, we’ll need your Mac’s network IP. For that we’ll use your terminal and grep. Open up your terminal and run the command: ifconfig | grep "inet". Basically what we’re doing here is searching through the network info dumped by the command ifconfig to find the IP address of your Mac. This value should be indicated by the keyword ‘inet’.

step-1

Grab your iPhone and open up Settings > Wi-Fi. To the far right of the currently selected network, touch the “i” icon to bring up information on the network.

step-4

Scroll down to the HTTP Proxy section, which should have a Configure Proxy option set to “Off”. Press that section and select Manual.

step-5step-6

This will bring up a section where you can enter the Server and Port that you want to proxy through. Enter the IP address and port number mentioned above for the values of Server and Port, respectively.

step-7

If you now try and access your site (or any website, for that matter) via your phone, Charles should now warn you via popup that a device is wishing to connect.

step-8

Click “Allow”. If everything went well, your iPhone should now be able to view the internet through your Mac’s network connection, and you can access Local and Fire-walled sites through your iPhone!

step-9

You can now test away! Just another reminder to reset your phone’s Proxy Configuration to “Off” when you’re done!

Happy testing!