I thought it was a good idea to write down this super quick guide following a ticket we received while ago regarding an issue that only occurred on Safari Mobile, therefore it was testable only on a real iPhone and/or a simulator.
So if you are more of an Android-y person like me the simulator is the solution right for you, so there are no more excuses to not to test the features on Safari Mobile before sending them into production 😜
📥 You need to install these 3 things:
1. First of all you need to update your OS to Big Sur. I know the OS update is a long and tedious process and you have been putting it off for weeks, but now is the time to do it. Why so...?
2. ...Because you will need it to install XCode, as it is picky and requires the latest version of the operating system. XCode is mandatory and you will need it to start the simulator. The download and the install will may take centuries and at times you will feel like it's not progressing at all, but trust it and let it do its magic.
3. Meanwhile, download Safari Technology Preview for Big Sur.
You will need this version of Safari to be able to inspect the page directly from the simulator, as normal Safari does not do it very well.
You can find the installation software here.
✈️Time to run the simulator!
1. Open XCode, right-click on its icon in the dock and go to Open Developer Tool / Simulator
2. Once the simulator is up and running open the iPhone's Safari browser and digit your app localhost url.
3. Now it's time to use Safari Technology Preview. Open it.
4. If you don't see the tab 'Develop' on the top menu you have to activate it:
5. click on Safari Technology Preview app menu then go to Preferences -> Advanced and then check "Show Develop" .
6. Finally, go to Develop/ Simulator - …. / localhost to make the inspector of the web page you want to debug in the simulator, and then you're done!
Hope you'll find this guide useful. Good hunt 🏹!