iosiphonemobile-safarisafari-web-inspector

View local development server on USB-connected iOS device


I have my OS X development laptop hooked up to the net via an iPhone 5 connected with USB (Personal Hotspot). With a web server running locally for my development work, can I load pages from this server on my iPhone and then inspect them with Safari's Web Inspector? I have tried 127.0.0.1 and my connected IP public address but no success.


Solution

  • It is possible to do this - it just required a bit of investigation as to how the networking is arranged when using an iPhone via USB with Personal Hotspot. There are two steps:

    Firstly, using USB, the USB port is setup as a network interface. The precise (and technical) details can be seen with ifconfig however what you need to know is what IP address is used for the USB interface.

    Go to Network Preferences and select the iPhone USB on the left hand side. You will see a message like iPhone USB is currently active and has the IP address 172.20.10.2. Note that this is not the publicly available IP address, it is the network interface on the Mac. This is the ip address you need to type into the browser on your iPhone to see your local development server.

    Secondly, you need to make sure that your local development server is serving the USB interface. This will obviously vary depending on your server but typically there will be a HOST parameter that directs the server to bind to that IP address. Again, use the IP address you found above to instruct the web server to serve pages on that IP.