Abe Diaz

If you have been looking for a quick way to see how your MVC pages would render on an iPhone or iPad… I have some good news for you. This week while attending aspConf i saw Scott Hanselman run an MVC app directly from Visual Studio in what looked like an iPhone Simulator (link). Indeed it was, I googled and found a blog post that detailed how to do this. I will try to explain in detail for those interested.

Step 1: Download Microsoft WebMatrix 2.0 RC

You will need to download WebMatrix 2.0 RC in order to get the browser extensions to support this.

Step 2: After install, Open a site in WebMatrix

Step 3: Select a site and click Ok

Step 4: Select Add New from the Options in the Run Menu

Select Add New

Step 5: Select the iPhone simulator from the Browser extensions gallery. Either option (iPhone/iPad) will work as it is the same simulator.

Install iPhone (or iPad) Simulator

Step 6: Open Visual Studio with you Web Project. From the Debug control select Browse with

Select Browse with in Visual Studio

Step 7: Add a new Browser to the list

Select Add (new browser)

Step 8: in Program, look for Electric Plum’s Simulator

Browse for Electic Plum’s executable

Step 9: Navigate to this Directory:

C:\Users\USER\AppData\Local\Microsoft\WebMatrix
\Extensions\20RC\iPhoneSimulator\
ElectricMobileSim\ElectricMobileSim.exe

Browse for: ElectricMobileSim.exe

Step 10: Add arguments and Rename the Browser.

Argument “1”: iPhone Simulator

Argument “2”: iPad Simulator

Arguments: 1 – iPhone Simulator, 2 – iPad Simulator

Step 11:

Run the project with this new browser

Step 12: Enjoy!

You can now test out your web app on this iPhone or iPad simulator. While nothing compares to actual testing on a device this is a great option for .NET Developers who need a quick way to test directly from Visual Studio their work. This is great for testing the new MVC 4 Mobile templates too.

For non .NET Developers you may want to try out Adobe’s Shadow also; it is a Chorme extension that connects to physical devices too.

Update: David Neal from NashDotNet also mentioned that this is a great way to develop quick mockups when you need it as you can take screenshots from the simulator.

Update: ElectricPlum Studio is no longer free but the lite version comes bundled with WebMatrix now and still does all you need!