Scott Hanselman

Simulating an iPhone or iPad browser for ASP.NET Mobile Web Development with WebMatrix 2 or Visual Studio 2012

June 11, '12 Comments [27] Posted in Apple | ASP.NET | Tools | WebMatrix
Sponsored By

I mentioned the Electric Plum Mobile Simulator as a nice way to check your site on an iPhone while using a Windows machine in my post called "Create a great mobile experience for your website today. Please."

Microsoft WebMatrix 2 RC is out this week and has a nice feature included - support for the Electric Plum Mobile Simulator for iPhone and iPad built right in. WebMatrix is Microsoft's lightweight editor for ASP.NET, PHP and node.js, as well the best way to install open source applications. It's a bit of a playground for the team. Features can be tried out in WebMatrix, and if they pop, we can move them into Visual Studio. I've been singing about Electric Plum for months, so I'm happy to see it in WebMatrix.

Here's how to use the iPhone simulator there, and how to add an iPhone Simulator to Visual Studio 2012 RC's list of browsers manually.

First, install WebMatrix 2 RC. You'll want this even if you're going to add Electric Plum to Visual Studio. From the Run menu, select Add new...

Adding iPhones to the WebMatrix run menu

From here, you'll go to the Browser Extension area where you can add not only iPhone and iPad but also the Windows Phone 7 emulator.

New Mobile emulators in WebMatrix 2 include iPhone

Now the Run button has more browsers as a choice. Here I've left the iPhone as the default choice.

My Run button now has an iPhone picture on it

And when I run it, I get the nice Electric Plum iPhone simulation with my current site loaded automatically. (Did you notice that WebMatrix used NuGet to install this feature? All these extensions are buried in C:\Users\YOU\AppData\Local\Microsoft\WebMatrix\Extensions\20RC currently)

Electric Plum Mobile Simulator

To add this browser to Visual Studio 2012 RC, go to the new browser button (integrated with the Debug button) while in a web project and select Browse With... and add in C:\Users\YOU\AppData\Local\Microsoft\WebMatrix\Extensions\20RC\iPhoneSimulator\ElectricMobileSim\ElectricMobileSim.exe. For arguments put in 1 for the iPhone.

Adding Electric Plum's iPhone simulator in my Visual Studio

Now, make another entry for IPad and use arguments "2" for iPad. Your VIsual Studio 2012 RC menu should now look like this.

Look, iPhone's in my Visual Studio Menu

Now, this is just using the basic version of Electric Plum that you can download inside WebMatrix. You can get a MUCH more functional version for $29.99. It will give you a developer console, GPS support, accelerometer and some additional HTML5 support like local storage, etc. If you're seriously doing iPhone websites on a Windows machine, it's a bargain and you get both iPhone and iPad plus a load of features.

(NOTE: I am NOT affliated with Electric Plum nor do I sell their products. I just think they are cool folks.)

Have fun! Do you want to see stuff like this in VS? Tell me in the comments and I'll make sure the right people see your voice!

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. I am a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web
Monday, June 11, 2012 10:14:18 PM UTC
I always love to see cross platform stuff! The day I don't have to leave VS to 'get it done' on Android, iOS, and Windows Phone is a day I breathe a sigh of relief and find some solace in my technology agnostic bend.

I used to get excited about making sure I could leverage each platforms special features for each app... nowadays I don't so much... Give me abstractions please so I can work on content! I am happy to live a simpler life. Does that make any sense?

Someday ask me to point on the doll where Xcode has touched me...
Monday, June 11, 2012 10:43:51 PM UTC
Cool — yeah, that would definitely be a very useful feature to have integrated directly into Visual Studio. ASP.NET MVC 4 nicely supports display modes, and being able to quickly and easily test designs on mobile device simulators goes hand in hand with that, in my opinion. +1!
Monday, June 11, 2012 11:40:53 PM UTC
A couple of things of note.

Hopefully Shaun will release a professional version SOON that supports parameters passed in. The current paid version does not support those parameters yet.

The version from WebMatrix can coexist with the paid version. So dont be afraid to install it.

And yeah Electric Plum rocks. Will be showing this VS integration off Wed @TRINUG in my MVC 4 presentation.

Monday, June 11, 2012 11:54:14 PM UTC
oops forgot something.

If you want to be able to do the trick that Scott blogged about in a previous post, launching multiple debuggers , and you want one ipad and one iphone. You need to make two copies of the application folder and reference each one separately.

Tuesday, June 12, 2012 3:11:58 AM UTC
Love it! Months ago I went to Apple looking into what it would take to test my site on an iPhone simulator. What I thought would be a simple download turned into a monstrosity of complexity, and I quickly abandoned the effort in favor of finding an actual device. Have yet to track down an iPad.

An easy to use emulator would be a welcome addition!
Tuesday, June 12, 2012 9:25:07 AM UTC
Cool - this is what i need to do right now. How did we ever get anything done without nuget???
Tuesday, June 12, 2012 8:00:20 PM UTC
I was on the edge of buying Flash 6.0 which will make iPhone apps on a PC. Seeing as how I use VS all the time maybe that is the way to go. Nuget still bugs me trying to install Nuget.
John A Davis
Saturday, June 16, 2012 12:38:02 PM UTC
This is a superb information and you have described everything very clearly and really i got a lot from this article, Thanks for spreading this information here..
Wednesday, June 27, 2012 5:39:46 PM UTC
Would definitely love to see this integrated into visual studio. Because right now I don't know how to test it without running macosx or using the iPhone.
Thursday, July 26, 2012 2:45:21 PM UTC
Fantastic no more online simulators, thanks.
Tuesday, October 02, 2012 1:48:08 PM UTC
How do i install this in VS2012 web express edition? I don't see this under extensions. I installed webmatrix2 and i don't see this option. Can you please share screenshots or steps to install the same in web express edition?
Chandrasekar
Tuesday, October 09, 2012 1:36:26 PM UTC
I've just installed webmatrix 2 and guess what...no ElectricMobileSim.exe! I have to say that this is extremely annoying...I've searched my entire C:/ to no avail.

Please please can you either be prepared to update posts such as this or dont bother giving the info - no use whatsoever if you can't find the thing in the first place.

I also notice that the other individual that has had the same issue as myself has not had an answer in 9 days.
Darren
Tuesday, October 09, 2012 1:37:30 PM UTC
...sorry 7 days. Either way this is of no use if you cant install it following the instructions you've provided.
Darren
Tuesday, October 09, 2012 5:27:56 PM UTC
Darren - I've been blogging and offering free and (I think) useful information here for over a decade. I can't always keep 3000 posts up to date. I'd appreciate your patience and kindness, when possible.

You can search your hard drive as much as you like but I'd encourage you to go to the folder I suggested. I'm looking at C:\Users\Scott\AppData\Local\Microsoft\WebMatrix\Extensions\20\iPhoneSimulator\ElectricMobileSim.exe right now.

Also, Google will also show you that you can download the ElectricPlum tools now and they'll integrate with VS directly.
Friday, October 19, 2012 3:56:50 AM UTC
Darren, simply create a new site in Web Matrix. Once you do that, you should easily figure out how to add the EPlum extensions.
Tuesday, October 30, 2012 5:57:28 PM UTC
Thanks Scott for all of the posts. We do appreciate them. But it is looking like ElectricPlum free version is no longer available. It didn't install with WebMatrix just now and if you look it up in VS2012 extensions the link takes you to a 404 error page.
Mary
Wednesday, October 31, 2012 12:35:41 AM UTC
Hi Mary, sorry you are running into problem with the installation. Could you please provide more details on the Electric Plum "didn't install with WebMatrix"? Did the installation of the extension hang or result in any specific error?

Thanks,
Thao
Thao Doan
Wednesday, November 14, 2012 1:32:13 PM UTC
Thank you for this post!
Its nice to have the option from Visual Studio. I am using it for the iPad emulator... the option to change to landscape or portrait is cool.
However, this iPad emulator does not render the page exactly like an iPad. I am doing some specific things for iPad using CSS and canvas which do not seem to work the same way through the emulator as they do on an actual iPad.
Someone needs to make an iPad simulator that uses Safari as its base browser engine.
Greg
Wednesday, December 05, 2012 9:50:46 PM UTC
I just installed WebMatrix 2.0 and installed the emulators w/o any problems. The Electric Plum site does indicate that if you want to install the emulators directly it will cost you $39.
I think the issue darren was having was that unless you config windows to show the "hidden" files you wont see the AppData folder. I really hate that too.

Anyhow, It's still there and free provided you install WebMatrix exactly as Scott indicates!

Thanks Scott!!!
Steve
Monday, December 31, 2012 8:34:28 PM UTC
Yes! kudos for the non-invasive yet easily enabled approach. Tools like this that keep me in one environment are great!
Thanks for the heads up
Tuesday, January 08, 2013 2:52:04 PM UTC
This works great and thank you so much for posting this article. I would however love to see this integrated into VS.
Cindi
Thursday, January 31, 2013 7:16:08 PM UTC
The iPhone doesn't shrink the webpages like my real iphone. How do you move the page? I can't see anything.
Hollie
Wednesday, February 27, 2013 1:48:46 PM UTC
Good simulator, but doesn't show up the errors during the development of a web page. For that I had to walk to the local electrical retailers and wait behind some kids fooling around on the iPad!
Joe
Friday, April 12, 2013 7:59:09 PM UTC
The Elctric Plum "simulator" does not do a good job. It's a desktop safari simulator. It's missing critical things like "window.onorientationchange". Without that, there's no way to test iPhone and iPad specific websites
Denar
Tuesday, April 16, 2013 3:23:05 PM UTC
very very neat :)
Got it running in VS 2012, nice to see the power of MVC applications at the mobile presentation layer
jp
Tuesday, May 07, 2013 7:23:53 PM UTC
This is such a time saver Scott. I was tired of changing user agents in browsers to simulate asp.net mobile friendly views. Many thanks for sharing.

-Mitul
Mitul Suthar
Tuesday, June 25, 2013 8:58:35 AM UTC
Thanks for sharing !
Chandrasekar
Comments are closed.

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.