Debugging Safari Mobile

Quick steps to debug Safari Mobile using an iOS simulator on Xcode.

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
• 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

Here's a YouTube I found with fuller steps

Here's another great article on the subject of debugging on mobile safari