Browser testing is tedious, not even registering a blip on the web design fun-o-meter. On one hand, it is but much less frustrating today since more browsers auto-update and we’ve been able to ease back on supporting legacy versions of IE (remember the png fix?). But on the other hand, there is now a vast landscape of mobile devices and operating systems—and production is a terrible place to discover bugs.

Testing web pages on localhost is fairly straightforward with iOS. There is a simulator packaged with Xcode as a developer tool which allows for testing every Apple device with each operating system. However, Android—though a simulator is available—is a totally different beast. A beast that doesn’t play nice with localhost.

Charles Proxy

If you work for a company with a development server, this post is probably moot. But if not, Charles Proxy is a lifesaver. Setting it up is deceptively simple. In addition to the Charles app, you’re going to need the Charles Proxy Firefox Add-on.

Setting up your devices

Open your System Preferences and make sure that Wi-Fi is connected and selected. Underneath the status on the right side, there will be a sentence with something like, “Wifi is connected to [NETWORK] and has the IP address of XXX.X.X.XX.” That is your LAN IP. Write it down or commit it to memory, we’ll be using it soon.

With Charles and Firefox running and all of your devices connected to the same network, you will just need to make a few modifications to your proxy settings. On Android, long press on network name, select modify network, then advanced proxy settings, and change none to manual. On iOS, click the “i” icon on the wireless network and scroll to the HTTP PROXY section at the bottom.

On either operating system, enter the settings below, leaving the rest of the fields blank.

Proxy Hostname: LAN IP
Proxy Port: 8888

The first time your device tries to connect, there will be a dialog window in the Charless application requesting access. Allow it.

Testing

Now you are ready for testing. Go to your local host in the mobile browser and you should be up and running.

For Jekyll, I was able to visit the local version of this page by serving it with bundle exec jekyll serve --host=0.0.0.0 and navigating to http://0.0.0.0:4000.

If you are using MAMP, you might need to change your port to something other than 8888 to avoid conflicts.

With the device connected to your computer via USB, you can go to chome://inspect on your computer to run the web inspector as you typically would.

I hope this helps. Happy testing!