Web Design Tutorial: Use Xcode’s IOS Simulator to Test Mobile Websites -HD-


Today we are going to take a look at how you
can use the free program Xcode on the App Store to test your website on mobile devices. Now unfortunately, at this time Xcode is only
available on Mac, so these features won’t be available to PC users. So the first thing to do is to go ahead and
get Xcode installed. So go ahead and open up the App Store and
then search for Xcode. Now when it comes up, go ahead and install
it for free. As you can see, I already have it installed. So once you get Xcode installed, go ahead
and go over to your applications and open up Xcode. Now when the application opens up, go ahead
and click on the “Xcode” menu and then go down to “Open Developer Tool” and then over
to “iOS Simulator.” Now this will actually open up as a separate
application, so you can feel free to close Xcode so that everything runs a little faster. So once this finally loads up, you can see
that you now have an iPhone on your screen that you can use just like a normal iPhone. So feel free to go ahead and open up Safari
on the phone and go to any website that you want to test on this mobile device. Now the great thing about the iOS Simulator
is that you can also turn the phone into landscape mode by holding command and then pressing
the left and right arrow keys. You can also simulate the pinching gesture
by holding option and then dragging. So this isn’t all that the simulator can do. So once you’re done testing on iPhone, go
ahead and go up to the “Hardware” menu and then down to “Device” and then select other
devices such as the iPhone with Retina display, or even the iPad. Now keep in mind that some of the other device
interfaces are often larger, and you will need to go up to “Window” and then down to
“Scale” to adjust them accordingly. So lastly, what kind of developer would you
be without some developer tools. So go ahead and open up Safari on your Mac. Now if you don’t already have a development
menu in your top bar, go up to the “Safari” menu and then down to “Preferences.” So then click on the “Advanced” tab and then
check the checkbox called “Develop menu in menu bar.” So now you can go up to your development menu
and then down to “iPad Simulator” or “iPhone Simulator”, and you can see current websites
you have open in the device browser and inspect them. Again, make sure that you have Safari open
in the device simulator when you go to this menu. So now you can feel free to use this interface
just like you do other development tools in other browsers. So these things should go ahead and get you
started testing your website on mobile devices using your Mac. So as always, if you enjoyed this web design
tutorial, be sure to subscribe, rate, comment, and share it with your friends.

Add a Comment

Your email address will not be published. Required fields are marked *