Debug local sites on multiple devices using Fiddler as proxy

Here's a thing I learned the other day and maybe I'm slightly behind the ball on this, but here's a tip for all you hot shot beard grown developers out there who's in current need of debugging and checking your local sites on other devices in your local development environment. Perhaps you're building a responsive site and want to check on your mobile device of choice that things align smoothly.

1. Download & install Fiddler

In case you dont have it installed; you need to download and install Fiddler.

Visit http://www.telerik.com/download/fiddler, download and run the installer.

Savvy OS X developers – try this: http://bit.ly/1iwOm8g

2. Setup Fiddler as proxy

  1. Open Fiddler
  2. Navigate to "Tools" -> "Fiddler Options" -> "Connections"
  3. Remember the value of "Fiddler listens to port"
  4. Check "Allow remote computers to connect"

 3. Check your local IP

  1. Run ipconfig /all from your command prompt
  2. Note your local IPv4 address

4. Setup proxy settings on your device

In this case I'm using iPhone, but in regards to all the massive configurations you can do on your Android and Windows Phone device, this shouldn't be to hard to find.

  1. Enter "Settings" -> "Wifi"
  2. Navigate to current connection (by tapping on it)
  3. Scroll down to "HTTP Proxy" section
  4. Flip to "Manual".
  5. Set values
    • Server: [insert your IP from Step 3]
    • Port: [insert your port from Step 2 ("Fiddler listens to port")]

NOTE: If your proxy contains any values, remember them reset after your done debugging

5. Try the connection.

Navigate to your local sites using local hostnames, such as Site.local och custom-domain-set-in-hosts-file.com on your target host (i.e. your development environment).

Please note; iPhone has trouble resolving sites using .local, quick workaround is to add another TLD such as .com at the end and your should be fine.

6. Happy debugging!