I ran into a problem with a react web app that was only failing on iOS devices. I couldn’t understand the problem without debugging the issue on a device with safari and it took me a while to find them - so here they are in all their glory.
Quick steps to debug Safari Mobile using an iOS simulator on Xcode.
Pre-requisites
- Xcode
- Simulator
- Safari
Steps
Full steps including setup
- Open Simulator and browse to a website on the Safari browser.
- Open Safari on the desktop
- If you don’t have developer options enabled:
- Safari > Preferences
- Click Advanced
- Check the box > Show Develop Menu
- If you don’t have developer options enabled:
- Select Develop, your simulator should be available
- Select the simulator and select the web address of the page from your simulators safari browser.
- The console and developer tools are now working as if it was a standard web browser