I’m revisiting one of my more popular posts, Using Xcode iPhone Simulator to Develop Mobile websites, which is nice but a little out of date. 

You’ll need to download and install Xcode for OS X to access the iOS simulator. Xcode is a free download from the Mac App store. 

Updated: 11/22/15

Xcode 7 has been out for awhile now, and these instructions are still valid but a new user may not realize that. I’ve since updated the instructions to reflect this. I added instructions on how to download different iOS versions.

image

How to launch the iOS simulator

Launch Xcode (you may need to agree to Apple’s terms and conditions and wait as it installs component if its your first launch).

image

Once launched either right click the icon in dock or locate it from the Open Developer Tool located under Xcode.

image

Protip: Once launched, you can permanently position the iOS simulator in your dock and skip Xcode altogether.  You can quit Xcode and the iOS simulator will stay launched

Copy and Paste!

You can copy and paste text into the iOS Simulator which requires tediously hitting paste on the open simulator window, then tapping and holding and pasting using the simulator itself. However if you hit command-v (paste) then command-shift-V you can directly paste text into text fields. It’s extremely handy for URLs.

Inspect Element

Launch Safari on your computer and go to settings and to “Advanced”

image

Make sure show Development menu is checked. 

Launch your iOS Simulator, and fire up safari and go to the web page you’d like to perform inspect element/ use the javascript console on.

Go back to Safari and click on the development and select your iOS simulator you’d like to inspect.

image

Protip: you’ll need to likely have the latest version of Safari to pair with Xcode, be sure you have all the latest OS X updates installed.  If you still can’t connect, try quitting Safari and relaunching followed the iOS simulator. The connection can  be finicky. If I’ve had my Mac Pro or MacBook Retina open for days on end,  sometimes a full reboot is the only way to fix the connection.

Also, the Simulator is 99% accurate but I have had on rare occasion render issues on hardware that did not occur in the simulator. It pays to do actual hardware tests for UI interactions as its where you’re most likely to see differences.

Pinch and Zoom

Hold the option key to bring up the finger pads. By default the zoom behavior will be on the center of the screen. Hold Shift-Option to recenter the zoom. Release the shift key to zoom.

Launch iOS Simulator from the Terminal

From the console, paste:

open -a /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/Applications/iPhone\ Simulator.app

Protip: you can create aliases to the iOS simulator.app. Right clicking Xcode and using “Show packages” following the path outlined above will allow you to see the actual application.  Also, due to El Capitan’s user restrictions, by default this will no longer work 

Drag and Drop in Simulator

image

Like most things in OS X, you can drag and drop files directly to your iOS simulator (images, webpages, PDF, anything that Safari supports). If you’re looking to serve static assets off a local workspace, it works in a pinch. 

Protip: You can save images to the Photos app in the iOS Simulator. Drag an image over, and then save from Safari. You can test file uploads this way.

Download different iOS versions

Under the preferences, you can download alternate iOS versions to use with your iOS simulator. As a general rule, Apple will allow you to download the previous iOS the current version of Xcode.

As a front end web developer, the .x releases tend to be pretty indistinguishable. Usually you’ll only need one version of the previous OS, rather than each 8.x iteration.  

Keep Xcode 5 for iOS 6 testing

Simply rename Xcode 5 before updating to keep your old version. You already updated and still need iOS6? I wrote a post detailing on how to download Xcode 5 if you already updated.

Don’t forget Android…

Do you wish you had the same awesome simulator for Android like iOS? See my post on GenyMotion, an alternative to using the dog-slow simulator bundled in the Android SDK.