Anyone who wants to test their website comprehensively should not do so only on a computer running Windows. For Apple users in particular, it is important to know whether a website runs flawlessly on different iOS devices. Fortunately, this is very easy to do: With a Mac and the free Xcode program, you can have virtually any iPhone available directly in the simulator! In this blog post, we will show you how to check your website in the Safari browser on different Apple products (e.g. iPhone or iPad) in just a few steps—including access to the developer tools.
Why test iOS devices?
Apple products have their own display formats and operating system versions. While responsive web design guarantees a flexible layout, browser and version differences can only be predicted to a limited extent. With Xcode's iOS Simulator, you can quickly and easily ensure that your website also works perfectly on devices such as iPhone 13, 15, 16 Pro, or future generations.
Step 1: Preparations
Safari: Safari is installed by default on your Mac. You need it both to use the Web Inspector later and to directly check on your computer whether the website renders correctly.
Xcode: Download Xcode from the Mac App Store. Depending on your internet connection, the installation may take some time. Once installed, your Mac is ready to simulate various iOS devices.
Step 2: Create a new project in Xcode
1. Open Xcode: Start Xcode and select the “Create a new Xcode project” option on the start screen.
2. Select the project type: Under iOS, select the App type and click “Next”.
3. Project settings: Enter any values for the product name, organization, etc.—this information is irrelevant for our purposes.
4. Select the interface: Whether you choose SwiftUI or Storyboard does not matter either. Simply select one of the options; both work equally well for launching the simulator.
5. Save the project: Save the project wherever you like so that you can quickly reopen it if needed, and then click „Create“.
Step 3: Select the desired simulator device
In the top menu bar of Xcode, you will find a dropdown menu to the right of the Start/Stop button. Initially, “My Mac” is selected here.
1. Change the device: Click this menu and select a desired iPhone from the list (e.g. iPhone 13, 15, 16 Pro, etc.).
2. Additional simulators: If your desired model is not available, click “Add Additional Simulators…” and download additional devices.
3. Start the simulator: Press CMD + R to run the project. The iOS Simulator will then open automatically with the device you selected.
Step 4: Use Safari in the simulator
Once the iOS Simulator opens, you will see the home screen of the selected iPhone. Here you will also find the Safari app.
1. Open Safari: Tap (or click) Safari in the simulator.
2. Open the website: Enter your website's URL and observe how it is displayed on the iPhone.
Step 5: Enable developer tools in Safari on your Mac
To use the Web Inspector for debugging and analysis purposes, you need to enable the developer features in Safari on your Mac.
1. Open Safari settings: In Safari on your Mac, go to Safari > Settings > Advanced in the top menu bar.
2. Enable the Web Developer menu: Check „Show features for web developers“. The new Developer menu item will then appear in Safari's menu bar.
Step 6: Inspect the website
You can now directly access the website in the simulator and retrieve detailed information:
1. Use the Developer menu: In Safari on your Mac, go to Developer > [Simulator Name]. Your currently open simulator with the active device (e.g. iPhone 14) should be displayed there.
2. Select the website: Click the open website in the simulator. The Web Inspector opens and displays the page's HTML, CSS, and JavaScript data—ideal for checking or debugging layout and code details.
Conclusion:
With little effort, you can use a Mac and Xcode to simulate a range of iOS devices and thoroughly test your websites in Safari. Whether for responsive design, performance optimization, or debugging: the iOS Simulator combined with Safari's developer tools is an unbeatable duo for web projects. This ensures that your visitors—whether they are using an iPhone 13, iPhone 16 Pro, or older models—always enjoy an optimal user experience.
Our Munich web agency, Econcess, places great emphasis on a vibrant design to appeal to as many customers as possible. If you are now interested in a website for your company, please feel free to contact us. We specialize in customized solutions and offer professional support in implementing your digital projects.
