Test your apps on real iOS devices, without devices

The situation

As a web developer working on the frontend, it is crucial to test websites and apps in as many browsers and devices as possible. The differences are not that crazy anymore nowadays when you don't have to support IE11. But still, you will find bugs in different browsers.

I don't own a Apple mobile device as I am a Android user. It's not practical to buy devices only for testing as these would be outdated faster than you can imagine. You can catch some bugs in Safari also on the desktop version, but not all of them, and additionally, the screen sizes also play an essential role in the game. So which possibilities do we have?

Current state – third-party apps

For the last couple of years, I used Browserstack, a service that promises real devices emulated in your browser. The set of supported devices is excellent. From Windows desktops with IE11 to the latest iPhones, almost every device and OS combination is available you could think of. Sadly Browserstack is not fast, and testing local sites is a pain. Sometimes it works for me, sometimes it doesn't, just not stable enough for my taste. And to deploy all the time to test a site is not practical.

Once again, facing dirty iOS bugs that were reported from peers on their devices, I was not able to reproduce on Safari on my Mac, I decided to find another solution.

Simulation on the Mac

After some research, I realized it's easier than I thought. In the development suite Xcode, which is needed to develop iOS apps, a pretty fancy device simulator is included. It's possible to start up iOS devices on your Mac, which run on your Mac hardware, behaving like a real device. It's running the real iOS just on your Mac instead of an iPhone or an iPad.

I knew already that in Xcode, there is this Simulator. Still, I didn't realize that it's perfectly integrated into Safari on the Mac, so testing and debugging websites and other browser-based apps is a breeze.

Get our hands dirty

Let's find out how this works, and it's surprisingly simple. First, download and install the latest version of Xcode if you haven't already. You can do that directly in the official app store. It takes some time, as it's pretty big.

Once Xcode is downloaded and installed, you can open up Xcode. Once the app started, you can find the Simulator in the menu bar under Xcode > Open Developer Tool > Simulator.

Once the Simulator itself has started, choose a device to start from the menu bar under File > Open Simulator and select a device of your liking.

The chosen device will come up and boot itself.

Once ready, you can use it as a real device. You can use Safari to browse the web, install apps, or whatever you like.

To test your site, now open Safari and enter your development URL. I quickly started a clean Vue3 project with the Vue CLI running Vite as a dev server. Access to local sites just works, and it feels like using the browser on your Mac. It's just awesome.

If you find a bug and want to debug it, open the desktop version of Safari on your Mac. Once open, you can choose the running tab in the running device from the menu bar under Develop followed by the device and the tab. A regular dev tool window from Safari opens, and you can start debugging the site. Pretty nice, right?

In the case you don't see Develop in the menu bar, you have to enable it first. To do this, open the Preferences in Safari from the menu bar under Safari > Preferences... or just hit cmd + , on your keyboard. In the preference panel, open the advanced tab and activate Show Develop menu in menu bar by clicking the checkbox. Now the Develop menu shows up in your menu bar.

Of course, you can open multiple devices in parallel and test a site on different devices in one go. I find that super-efficient.

What I would love to see in the future, though, is the possibility to connect the opened devices somehow, so they act in sync. This way, you could navigate a website or app on all devices simultaneously, combined with a big or multiple desktop screens testing could be super-efficient.