Cross-browser testing on iOS devices from macOS

This article is part of a three-part series on cross-browser testing Windows, iOS, and Android from macOS.

If you’re developing on mac OS and you want to test on iOS you’re in luck. Apple provides the Xcode software for free which ships with a simulator that can be used to quickly test on Safari. You can even inspect the browser using familiar development interface provided by the desktop version of Safari. Let’s get started.

Note: This article was written using the following operating system and software versions:
– macOS Catalina, Version 10.15.7 on a MacBook Pro (Retina, 15-inch, Early 2013)
– Xcode 12.1

Launch the iOS Simulator from Xcode

The first thing you want to do is launch the App Store app on macOS and search for “xcode”. You’ll want to find the Xcode application offered by Apple and install. It’s pretty big so it might take awhile download.

After downloading, launch Xcode from the App Store and finish the installation.

From the Xcode home screen, navigate to Xcode > Open Developer Tool > Simulator to launch the simulator app.

This will automatically launch the most recent simulator, in this case the iPhone 12 Pro Max running iOS 14.1.

Because it launches a new application, you can right click in the dock and select “Keep in Dock” to launch the simulator standalone moving forward, without needing to go through Xcode first.

With your application running on localhost, you can navigate directly to it using the Safari browser, no special host names are needed.

You can launch additional devices by navigating to File > Open Simulator and selecting from any of the devices that are available to you.

Debugging with the Safari Web Inspector

One of my favorite parts of using the iOS Simulator on Mac OS is using the debugger and inspector on the desktop version of Safari connected to your Simulator’s browser. This feature allows you to quickly uncover rendering or scripting errors using familiar tools.

With the website open in your simulator, open the desktop version of Safari. Open preferences and navigate to the Advanced menu. Ensure “Show Develop menu in menu bar” is checked.

Now you can open the Develop menu and you should see any simulator instances that are running. You can open the menu for the simulator and select any of the available tabs open in the Safari browser to launch the Web Inspector for that tab.

With the Web Inspector open, you can now debug just like you would using the desktop version of Safari.