Testing Your Website in Xcode Simulators Without Opening Xcode

Front-end-developer

I've heard you groan when you were prompted to download Xcode. We all do it. It's a 12.88GB monster of an application that brings even my "this-should-be-powerful-enough-to-create-a-small-planet" Macbook to its knees. But you REALLY want to test your website in the iOS simulator and get a more "virtually realistic" experience than just the chrome dev tools.

It's possible.

1. Navigate to your applications folder and right click on the Xcode application. Select "Show contents".

xcode-post-1.png#asset:3024

2. Inside the Contents folder, find the Developer --> Applications subfolder.

xcode-post-2.png#asset:3025

3. Drag the icon for Simlator.app to the desktop. This will create a shortcut.

xcode-post-alias.png#asset:3027

4. Close the Contents of Xcode and test the Simlator ailias by double clicking. The app should open directly.

Fun notes:

Copy and Paste

You probably don't want to keep typing your URL in the simlator, especially if you're following a link from a PR or other location. Since you have access to your clipboard in the simulator, simply copy and paste the URL in the mobile browser.

Copy from desktop

xcode-post-3.png#asset:3026

Click once to simulate a "tap" in the URL window and let the `paste` prompt appear and click.

xcode-post-4.png#asset:3029

Inspect inside the simulator

With Safari open in the simulator to the webpage you want to inspect, open your desktop safari browser (I know I know).

Be sure you have your Developer Menu enabled (Check this in Preferences 'Show Develop menu in menu bar').

xcode-post-prefs.png#asset:3030

In the Develop menu drop down, you have the option to inspect the website in the simulator. This opens the same, familiar developer tools you're familiar with in safari.

xcode-post-inspect-simulator-short.png#asset:3033

(Note: if you have your phone connected to your mac, you also have the option to inspect the code from the website pulled up on Safari on your phone.)

xcode-post-iPhone-inspect.png#asset:3034



*This website runs on Craft CMS, a megastar CMS built by some great people. It just so happens version 3 was released today, on time, on schedule, and on target. I <3 Craft CMS. You might, too. 


(This is not a paid sponsorship. This is just one developer to another.)

Related Entries

Coming Up