How to Test Your Website for Different Mobile Devices on MacOS

Developers must ensure a site  renders properly on different devices during the website development process. A number of testing approaches  offer varying levels of confidence. You can learn more in our previous article outlining the different approaches.

In this article we will learn how to test a website using:

• XCode’s iOS Simulator for simulating Apple devices
• Android Studio’s Emulator for emulating Android devices

XCode’s iOS Simulator

Let’s start with XCode’s iOS Simulator: 

1. Install XCode into your Mac system
   1. Go to https://developer.apple.com/XCode/resources/ 
   2. Select download and choose the website. This will ask you to sign in with your Apple ID. 
   3. Sign in and download the .xip file for latest version of XCode
   4. Open the downloaded .xip file in finder and double click on it to extract (this might take some time)
   5. After extraction, transfer XCode into your application folder (simply drag n drop)
   6. Setup is complete
2. Run iOS device simulator
   1. Launch XCode – you will see a welcome screen, as shown below,
3. Right click on XCode in the dock --> hover to `open developer tools` --> select `Simulator`.
4. This will launch a simulated iPhone.
5. You can select your desired device by right clicking on the Simulator icon in the dock --> hover over `Device` --> choose OS --> select device.  
6. Congratulations. You are done launching a simulated device of your choice for testing.

Tip:  You might want to keep simulator in the dock for faster access:

1. Right click on Simulator icon in the dock
2. Hover over `Options` --> select `Keep in dock`

3. Preparing Safari browser for debugging:
   1. Open Safari browser
   2. Go to preferences (press `command`  + ` ,`  keys )
   3. Go to `Advanced` tab
   4. Check mark `Show develop menu in the menu bar` option
4. Using Safari browser to inspect pages running in simulated device
   1. Open the site you want to inspect in the simulated device
   2. In the Safari browser(pc), click on `Develop` option from the menu bar
   3. From the dropdown menu --> hover over `Simulator` --> It will show you all the websites open in your simulated device
   4. Select the website you want to inspect
   5. Congratulations. Now you can proceed with your development journey.

Android Studio’s Emulator

Now let’s explore Android Studio’s Emulator:

1. Install Android studio
   1. Go to https://developer.android.com/studio and download the latest version of Android Studio for your system (choose between Intel or Apple Silicon)
   2. To install, simply drag the Android Studio to your Application folder
   3. If you are only using the Android Studio to run the emulator feel free to leave all the default settings.
2. By default, Android Studio usually creates an emulated device.
3. Launch Android Studio and you will see a welcome screen.
4. On welcome screen --> click on `More Actions` --> select `Virtual Device Manager`
5. It will show a list of installed virtual devices. Select the device of your choice and click on the green play button. This will launch the selected device.
6. If the desired device is not available on the list, you will need to create one by clicking on the ‘Create device’ button on the top left corner.
7. Once you have launched your Android emulator, open the website you want to inspect/debug/test in the browser of the emulated device.
8. If you are not able to open localhost sites on the emulator, replace `localhost` in the url with the local ip address of your system.

To get local ip address: 

1. Open terminal
2. Type below command:

ipconfig getifaddr en0

This will return your local ip address. If on a wired network , use below command to get local ip address:

ipconfig getifaddr en1

9. Now open Chrome browser on your system(pc) and in the URL field, type ` chrome://inspect `  and hit return. This will open DevTools page
10. In the DevTools page, from the left panel, select devices, make sure `Discover USB devices` and `Discover network targets` options are checked. 
11. This tab will show a list of pages open in the emulator, click on ` inspect ` under the website which you want to inspect . It will launch Chrome developer tools and you will be able to inspect and debug the site. 

Customers access websites  not only from computers, but mobile devices. It is important that developers take an extra step and confirm any created website looks as intended on a variety of devices. Add this simple and cost-effective step to your developer workflow as a standard procedure for quality assurance.