iPhone/iPad Simulator for Visual Studio at NashDotNet

NashDotNet

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 From 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.

Select iPhone Simulator from the Browser extension gallery

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

Select Browse with in Visual Studio

Step 7: Add a new Browser to the list

Select Add

Select Add (new browser)

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

Browse for the 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
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 and Rename

Arguments: 1 – iPhone Simulator, 2 – iPad Simulator

Step 11:

Run the project with this new browser

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.

About these ads

9 thoughts on “iPhone/iPad Simulator for Visual Studio at NashDotNet

  1. NinoCapo says:

    Thank you much!! Very helpful

  2. Thank you very much for this great resource!

  3. Hello, i believe that i noticed you visited my weblog so i came to return the choose?
    .I’m trying to find things to enhance my site!I guess its adequate to make use of a few of your ideas!!

  4. Bernie says:

    Great post! I was looking for something like this the other day. So quick and easy to setup.

    Like you said it is ideal for quick mockups but no substitute for the real thing – still I’m working on an MVC solution with a large number of Bootstrap responsive designed pages at the moment and this is going to save me a lot of time checking the layouts for iPhones and iPads without having to have a device on hand.

    Thanks.

  5. Abe Diaz says:

    I’m glad it worked for you :-) are you using mobile templates in MVC or creating your own mobile view?

  6. Bernie says:

    Hi Abe. I’ve opted for standard MVC views which utilise a responsive design (namely Boostrap’s responsive design framework). For the particular project I’m on it makes more sense.

  7. Abe Diaz says:

    That’s what I guessed. I see almost nobody using the templates.

    Good luck with that!

  8. Her Zaman En Az Kod O Zaman TEKKOD says:

    Perfeect

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Connecting to %s