How to Test Localhost on iPhone

So you’ve got MAMP all setup, you’re running your shiny new Macbook Pro as your development environment/server and, of course, you’re creating your latest project using responsive design.

But you go to type in localhost:8888/your_project/ on your iPhone only to realize…right, that doesn’t work.

Good news! By installing Xcode, the development platform for iOS, you then have access to an iPhone simulator. Lucky you!

It’s not exactly easy to find, though. You’ll need to open Finder and navigate to:

Macintosh HD > Applications > Xcode [Right Click and choose Show Package Contents] > Developer > Platforms > iPhoneSimulator.platform > Developer > Applications > iOS Simulator

a partial screenshot showing the mouse navigating to Develop > iPhone Simulator in Safari on a Mac Once you’ve opened that though, you’ll notice that you can’t use Webkit’s Inspector from directly within the simulator. If, however, you open up Safari and navigate to the Develop > iPhone Simulator menu option, you can pop open an Inspector window directly related to the Simulator from there!

screenshot showing the iPhone Simulator open beside the Safari Inspector window

Note that this method is specifically for testing websites running in a local environment, in Safari, and on iPhone. You can test websites that are live on the web on iPhone using a similar method, though. In my first screenshot above, you can see a menu item labeled, “myPhone”, which is simply the name I’ve given to my own iPhone, and is available because I’ve plugged my iPhone directly into my Mac via USB and have Safari running the page I want to inspect on the iPhone itself.

Up Next: How to Replace WordPress' Default jQuery with the Google Hosted Version