How to use XCode iOS Simulator for responsive web testing on Mac

Test your website on every iOS device

With iOS remaining the only competitor to Android in the mobile market (especially when you look at the higher price range, the gap shrinks), web developers cannot neglect to optimize web pages for iOS. The web browser of choice for iOS users will most likely be Apple Safari. With the rise of Progressive Web Apps (PWA), users expect high quality apps not only as native apps but also in their browser.

So how can you you test your web page on Safari for iOS?

• Manual testing on real iOS devices.
• Using cross-browser testing services like Browserstack. Performance is usually alright and they offer various features but they are usually not free and debugging is often cumbersome.
• Use XCode simulator to emulate an iOS device.

In this tutorial, we will look at how you can use the XCode simulator to debug a web page. XCode is a free IDE available for Mac devices used for developing all kind of apps for Apple devices: iOS apps, Mac apps, Watch apps and more. In our case, we will make use of the emulation capabilities XCode provides.

Let us have a look why we should use XCode Simulator to test our web pages.

Advantages of using XCode Simulator for web testing

• Good performance even on older Mac devices. Most web pages and even single page applications should work flawlessly.
• Debugging with Safari developer tools is possible so you can use all features the developer tools have to offer like setting breakpoints.
• Changes in your code are reflected automatically (either reload the web page or use a Live Reload / Hot Module Reload solution).
• You can use all iOS devices to test your web apps: e.g. iPad Pro, iPhone X, iPhone 8, …
• XCode is free to download so it is easy to use it.

Disadvantages of using XCode Simulator for web testing

• Works only on Mac as Safari is only available on Mac.
• You cannot use other browsers to debug (e.g. Google Chrome), you have to use Safari. This is fine as all other web browsers are available on other platforms (e.g. Windows) where we can debug as well.
• Performance and reliability will be better (although not a whole lot) on real devices.

How to launch iOS simulator with Safari developer tools

1. Install XCode. If you are developing on Mac, chances are you already installed XCode. You can either use the Apple App Store (easiest way) to install XCode or get the DMG/XIP file to install it if you do not use the App Store.
2. Start iPhone/iOS Simulator.app to launch the Simulator. If you have not created a simulator yet, you need to do this in XCode. You can have multiple simulators as you might want to test on different devices. I recommend creating a shortcut so you do not need to open XCode every time you want to launch a simulator.
3. Open the Safari browser in the Simulator. As mentioned above, other browsers like Chrome are not supported.
4. Open the Safari browser on your Mac device to connect it with the Safari browser in the simulator. Now you should be able to use the Safari developer tools like in any other web page: see the DOM, set breakpoints for debugging, perform network analysis and much more.

Conclusion

Thanks for reading this article about how to use XCode for testing web applications on simulated iOS devices. With XCode, Apple provides a free and easy to use way for designers and developers to test any web apps on iOS devices on Mac computers. How are you testing your websites on iOS? Let me know in the comments.