If you create websites or web apps for the iPhone OS (iPhone, iPad, iPod Touch), it's important to setup a solid local development environment for testing. Using a desktop web browser (even Safari) or one of the many available "emulators" for testing is worthless because the real thing looks different.

The only way to test properly is with Apple's iPhone Simulator. Since you can't just type a local file path into the simulator, I'll show you step-by-step how to get it working (on a Mac).

What You Need

1- Install the SDK (with Xcode) and MAMP

The SDK is about 2.8GB so you should give it a while to download. Installation took about ten minutes for me.

What's MAMP?

MAMP is a great little application that gets you up and running with the local server environment on your Mac in about five minutes. All you need to do is install it like any other application.

2- Setup the location of your website or web app

Create a folder for your project. It can be anywhere on your computer. Place an index.html file in it with "hello world" or whatever you need to test that it's working when we open the simulator.

For this tutorial I'm going to call my folder "iphone-site" and put it in /Users/Nick/Sites/ on my computer.

Folder

3- Create an alias in MAMP

Go to the location where you installed MAMP (probably Applications), then open this file: /MAMP/conf/apache/httpd.conf. Around line 655 you should see the following code:

Alias /MAMP "/Applications/MAMP/bin/mamp"

<Directory "/Applications/MAMP/bin/mamp">
    Options Indexes MultiViews
    AllowOverride None
    Order allow,deny
    Allow from all
</Directory>

Add a line of space after this code, then create your alias with this code:

Alias /iphone-site/ "/Users/Nick/Sites/iphone-site/"
<Directory "/Users/Nick/Sites/iphone-site/">
    Options Indexes FollowSymLinks
    AllowOverride All
    Order allow,deny
    Allow from all
</Directory>

Replace the file path above with the file path to your site in both places.

Save the file and close it. Please note that if you ever make edits to the httpd.conf file while your MAMP server is running, you will have to restart the server to see those changes take effect. Also, if you ever change the location of your site, of course this file will have to be updated with the new file path.

What this does is keep the URL clean and easy to remember. Setting up an alias is not technically required, but I highly recommend it. Instead of the URL being this:

http://localhost:8888/Users/Nick/Sites/iphone-site/

The new, clean URL would look like this:

http://localhost:8888/iphone-site/

4- Test It

Launch MAMP and make sure that the server is running. The window should look like this:

MAMP Window

Now it's time to open the iPhone simulator. Open a finder window and navigate to the drive you installed the developer kit on (eg. "Macintosh HD"). The simulator is in the /Developer/Platforms/iPhoneSimulator.platform/Developer/Applications/ folder. It's a good idea to add it to your dock so you can access it easily in the future.

Once the simulator is running, open Safari. Navigate to http://localhost:8888/iphone-site/. Of course you will want to substitute iphone-site in the URL for the name of your project. You should see "hello world" (in very tiny text), which means you are good to go!

iPhone Simulator

Now you can develop iPhone websites and web apps without depending on an internet connection, which should speed up development time significantly. Whenever you start another iPhone project, simply add another alias to your httpd.conf file and get started!

Testing on the iPad

The iPhone OS SDK version 3.2 and up includes support for the iPad in the iPhone Simulator application. It's a little confusing, but think of the iPhone as more of an operating system rather than a device in this context. From the iPhone Simulator, click "Hardware" in the main menu, then "Device" and you can select between the iPhone and iPad.

Device Menu

What about debugging?

Mobile Safari has a debugging console, but I didn't find it too helpful for basic front-end development. There isn't a substitute for Firebug or Safari's developer tools, so I would suggest continuing to use those in a desktop browser if you get stuck. Using the same localhost URL will work in other browsers as well as the simulator.

Resource Library

Once you have your test environment going, it's important to familiarize yourself with the mobile Safari browser and how to make the most of it. Here is a set of articles to get you started: