If you’re a happy web-developer doing you job chances are you got a real device to test your web-applications, but it’s very unlikely you got all devices and all iOS versions at the same time. In case you need to support mobile Safari — this article is for you.
This morning I had an issue with iPhone 6 specifically, and it’s not a big deal, right? We got a browser-stack. But it’s sooooooooo slow. And paid. I said: ‘man, you got a mac with Xcode, let’s do it this way’, but turned out that iPhone simulator’s Safari doesn’t have ‘Web inspector’. Wow! And obviously the desktop safari doesn’t see the emulator.
In case it’s your first time with mobile debugging — if we go simple way and we got a real device, it’s as simple as going to Settings -> Safari -> Advanced and enable ‘Web Inspector’ option. Then — you’re just going to your desktop Safari and Chose in the main menu -> Develop -> Your Device ->Page you want to debug. That’s it!
So, let’s go stet by step, how to make it all work with the emulator.
- Turned out that Safari has it’s own developer’s branch for beta testers and geeks, like it’s own ‘Canary’ =), and it’s called “Safari Technology Preview”. Let’s download it from here: https://developer.apple.com/safari/download/
- Download the emulator you need. Xcode -> Preferences -> Components -> Just chose what you need here.
- Run it! After a while you will be able to go to Xcode -> Open Developer Tool -> Simulator. Just push and run the mobile Safari there.
- Now open this purple beauty — “Safari Technology Preview”. And in the menu choose — Develop -> Simulator -> Page you want to debug.
That’s it! Enjoy.
Happy development and a bug-less flow for all, see yah’!
