Mobile simulators for developing and testing your web apps

The best lessons are learned when major bugs are released in production — for me, I learned the importance of using mobile simulators while developing and testing web applications.

Why should you care about the mobile experience?

There’s a significant amount of mobile device web adoption globally, especially in emerging digital markets. In countries like India and Nigeria, mobile devices are many times the only means for people to be a part of the online ecosystem.

Mobile devices as a percentage of web traffic

With nearly 50% of worldwide web traffic coming from mobile devices, it’s crucial for web application developers to prioritize building great experiences for our mobile-only users as well! Let’s discuss the first important step in getting this journey started — getting your development environment set up for building and testing web applications on mobile simulators.

Set up your development environment

Both Apple and Android provide simulators for mobile application development purposes. Why limit that to only mobile application development?

As I’ve discussed, a large portion of our web traffic comes from mobile devices, and when start developing mobile-specific experiences, it critical to simulate mobile devices to ensure accurate testing.

I’ll first cover how to set up and use Apple’s iOS Simulator available via Xcode, and then follow up with instructions on Android’s Emulator available via Android Studio.

Note: a pre-requisite for utilizing the iOS simulator is having access to macOS.

iOS Simulator

Simulator Set Up Steps

1. Install Xcode.

2. Once installation is complete, open Xcode to see the Xcode Welcome Window.

3. Click on the XCode menu → Open Developer Tools → Simulator

Location for Simulator in Xcode Apple Menu
Safari open in iOS Simulator
Safari open in iOS Simulator
Safari open in iOS Simulator

4. Once the Simulator is open, you should see an iOS device.

5. Click on Safari and easily visit any local, stage, or live environment.

Pro Tip: Create a shortcut in your applications by running the below command for a faster way to access Simulator. You can now even access it via spotlight 🔍

ln -s /Applications/ /Applications

Few Helpful Features for iOS Simulator

Change Device Type

1. Open the Simulator app.

2. In the Apple menu, click on File → Open Simulator → iOS → selected desired device type. The new device will open up.

Open available iOS device simulators.

3. If desired device type or iOS version is not shown in the above menu, click on File → New Simulator → Enter a Simulator Name → Select desired device in the Device Type Dropdown, and select an OS Version. → Click Create once selections are made.

Add a new iOS device simulator.

4. Repeat Step 2. The added device should now show up in the iOS menu.

Open the Web Inspector

1. In the Simulator, open a website on Safari.

2. On your Mac, open the Safari application.

Note: If Safari was previously open on your Mac device, please Quit and re-open Safari to ensure the next steps work.

3. Click on the Develop menu in Safari → Find the Simulator in the dropdown → Click on the website address that you wish to inspect.

4. The inspector should now be open!

Open Web Inspector for Safari on the iOS Simulator

Android Emulator

Set up steps to be added soon… come back and visit!

Software Engineer @ PayPal. Everything Javascript, React, Food! Reach me on Twitter @vishakha_sehgal