Quick Tip : Using Xcode for Free Responsive Design Testing on a Mac
At GRAYBOX almost all projects we're doing now are responsive designs so that our websites function great on a variety of mobile devices. This means we have a ton of testing devices now in the office including:
iPhone 3G (iOS 4) iPhone 4 (iOS 5) iPhone 4S (iOS 6) iPhone 5 (iOS 6) iPad 1 (iOS 5 Tablet) iPad 3 (Retina) (iOS 6 Tablet) iPad Mini (iOS 6 Tablet) Surface RT (Windows RT) Surface Pro (Windows 8) HTC HD7 (Windows Phone 7) Samsung Galaxy 3 (Android 3) Samsung Galaxy 4 (Android 4) Samsung Charge (Android 2) Kindle Fire HD 7 (Custom Android Fork) Nexus 7 (Android 4 Tablet)
As you can imagine, it's a lot of work to pull up our sites on these devices to test every template in a given website. To make this easier, we use a variety of virtual testing tools on our Mac's that help us save time and test efficiently.
For testing anything iOS we use Apple's free Xcode application to create virtual iPads and iPhones on our machines. This is a simple way to pull up a site on our computer, preview our development server and even debug using Safari's built in inspector tools.
To setup your own Xcode application, follow these steps:
On your Mac, open up the App Store and download XCode. It's free. https://itunes.apple.com/us/ap... up Xcode and you'll get a window like this:
Click on —Create a new Xcode project.
You'll get this screen:
Xcode is the application you use to create ALL iOS and OS X applications. But we don't want to do that, we just want a blank application so we can run the iOS simulator and test our websites.
Select "Empty Application" and hit "Next". Name it whatever you want and make sure "Devices : Universal" is selected. Hit "Next" when ready.
Save it whenever makes sense for safe keeping. You'll jump right to step 4 next time you need to test.
You'll get a complex project build screen, but have no fear as this screen doesn't matter much.
From here, you can launch the iOS simulator. In the top left, by your project name, select "iPhone Simulator" or "iPad Simulator" and hit the "Run" icon. It will compile the project and launch the iOS simulator in a new window. It will look like this:
So now you just have a big blank screen on a fake iPhone on your computer. Great. Hit the little home icon in the bottom middle to go to the iOS home screen, just like on a real iOS device.
Next, open Safari from your dock and navigate to the website you want to test. Just like magic, you now have a virtual iPhone working on your computer.
To switch to iPad view or turn on/off a Retina display, go to the Hardware > Device menu in the toolbar to select a new device. You can quickly switch between Tablet and Mobile views this way.
Finally, to debug your website using the common webkit inspector tools, open up Safari and select Develop > iPhone Simulator > URL of the website. If you don't have the Develop menu in your Safari, you'll need to turn it on in your advanced preferences.
Now you can modify live CSS, Javascript, HTML, console and manage resources/load just like any other website. Pretty freaking awesome and a huge time saver. This way we only need the real iOS devices when we do our final UAT testing.