iPhone Simulator!

So in a bit of a different and more technical direction, I want to share something that I came across in my current job that I thought was really neat.  One of our clients  was experiencing a bug that only happened on his iPhone, specifically an iPhone 6s Plus.  I’ve got a different version iPhone, so when I tried to replicate his error on my own mobile device, I wasn’t seeing it.  Well a big part of my job is being able to replicate our customers bugs so I can engineer a solution for them.  I can’t very well do that without being able to see the error.  Enter the simulator!

Now I don’t know how cool or useful the simulator would be if you weren’t in development in some capacity.  If you often found yourself on an Android phone and wondered “how would my user experience change if I was on an iPhone….” then maybe this is a useful tool.  But I imagine the main function of the tool is to test your software on multiple platforms easily without having to physically own all the devices.  Much like running virtual machines for Windows vs Mac for example.

Anyway, here’s how you fire it up.  First make sure you have Xcode installed.  You can open the simulator right from within Xcode by following the drop down items: Xcode > Open Developer Tool > Simulator like the picture below.  You’ll also notice a bunch of other developer options which are fun to mess around with.

Screen Shot 2017-03-24 at 4.22.52 PM

This will fire up the simulator.  Another way is to simply do a spotlight search (Command-Space) for “Simulator” and it should pull up.  You might have to Xcode installed already for this to work.  Once it’s up, you can go to any website you want and see how it would look on a variety of iPhones.

Here are some questions that I had to look up while I was using it, so I’ll put them here for others to hopefully save some time.  Okay, I lied… It’s mostly for me to have listed so I don’t have to look it up again 🙂  But there are things that aren’t intuitive because it is just a simulator and not an actual phone, so something like doing the pinch gesture requires something creative.

How do I “pinch” to zoom in/out?
– Hold “option” and you’ll see two dots appear that represent your to fingers.
– More info available here on pinching and moving where the pinch motion occurs under the “Simulating User Gestures” section.  Other gestures/info there too.

How do I take a screen shot?
– “Command-S” or go to File > Save Screen Shot.   It’s odd to me that it’s under “File” but it is, and it saves to your desktop.

How do I debug?
– Open a Safari window.  Then follow the drop down as pictured below: Develop > Simulator > your_website_url
– This will open up a new Web Inspector instance where you can interact with the console or set breakpoints in the debugger.

Screen Shot 2017-03-24 at 4.50.44 PM

In general, the Apple website has pretty good info on working through the simulator.  You can check out their comprehensive docs here.  But some of the questions I wished were a bit easier to find, hence the list.  I think that’s it for now.  But it’s definitely a fun little way to test your website or technology out on different iOS platforms.

Until next time,
Sean

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: