The idea here is to be able to use Safari’s developer tools connected to the web page/application running on a real iOS device. You can achieve similar effect by using XCode’s Simulator app, but certain things don’t work there (looking at you, Apple Pay).
Enable USB internet sharing
- Open System Preferences > Sharing
- Select Internet Sharing
- If the checkbox next to Internet Sharing is enabled, uncheck it
- Check iPhone USB on the right side
- Check Internet Sharing on the left side. You will have to confirm it
- Find message saying: “Computers on your local network can access your computer at: xxxx.local”. The
xxxxpart is the host. You will need it later.
Make your application available on the new host
Now it’s necessary to make your application available on the new xxxx.local host. In nginx it is a matter of adding xxxx.local to the server_name directive:
server_name existing.server xxxx.local;For rails server it’s necessary to bind to all local interfaces:
rails server -b 0.0.0.0Connect your iOS device
- on iOS go to Settings -> Safari -> Advanced and toggle “Web Inspector”
- on Mac open Safari and go to Preferences -> Advanced and check “Show Develop menu in menu bar”
- connect iPhone via USB cable
- on Mac restart Safari
- on iPhone open http://xxxx.local
- on Mac open Safari and go to the Develop menu. You will now see the iOS device you connected to your Mac. Click on it to start debugging.
Troubleshooting
Sometimes Safari won’t show the connected iOS device. If that is the case, you can start with restarting Safari both on the iOS device and Mac. If that doesn’t work, restart the iOS device and then the Mac.
