Scott Hanselman

Cross Browser Debugging integrated into Visual Studio with BrowserStack

January 31, 2013 Comment on this post [18] Posted in ASP.NET | VS2012
Sponsored By

imageTL;DR - Too Long Didn't Read Version

  • BrowserStack Integrated into Visual Studio
    • From a debug session inside Visual Studio 2012 today with ASP.NET 2012.2 RC installed. Click the dropdown next to your Debug Button, the click on "More Emulators" to go to http://asp.net/browsers and get the BrowserStack Visual Studio extension and three months free service. There's other browsers to download as well, like the Electric Plum iPhone/iPad simulator.
      • SIDE NOTE: When the VS2012.2 Update is finalized, you'll need to install just it and you'll get the ASP.NET Web Tools as well.
  • New Online Tools for Modern Sites
    • Head over to http://modern.ie for a bunch of tools for making cross browser sites easier, including on online site analyzer and downloadable Virtual Machines for any Virtual Platform.

I do a lot of cross-browser testing and I've been on a personal mission to make "Browse With..." and multiple browser debugging suck less in Visual Studio. This has been going on for years.

But still, it's too hard. There's been some Virtual Machines up on the Microsoft Download Center but it's tedious to dig around and get the one you need.

BrowserStack

Today the IE team announced new site at http://modern.ie to make cross-browser testing easier. Even cooler, they launched a partnership with BrowserStack.com to give us all a three month free trial to their hosted browser virtualization service.

BrowserStack has a cloud of virtual machines with every browser imaginable. You can pick your OS, browser version and screen resolution, then effectively VNC (Remote) into them with their Flash plugin. It's totally seamless and really cool to see.

Here you can see how hideous my site is in IE6 on Windows XP running within BrowserStack. Keep reading, it gets better. Well, IE6 doesn't get better, but this story does.

My site looks like crap on IE6. As it should.

Integrating BrowserStack with Visual Studio 2012

Even better, I noticed that BrowserStack has nice hackable URLs like this:

http://www.browserstack.com/start#os=Windows&os_version=XP&browser=IE&browser_version=6.0&zoom_to_fit=true&url=hanselman.com&resolution=1024x768&speed=1

When I saw how clear it was, I immediately started writing a Visual Studio plugin - like within 5 minutes - then stopped after a half hour.

I said, this is too obvious. Someone has already done written this, right? I google. Yes, they beat me to it, 5 days ago.

BrowserStack already has a lovely Visual Studio Extension up and ready to go.  It adds BrowserStack as a new browser choice within your Visual Studio 2012 debug dropdown.

image

Start Debugging, pick my OS and Browser, in this case, Safari on a Mac running Mountain Lion.

image

After you sign into BrowserStack with an account, you can setup a tunnel (using Java, but you can do it from the command line if you don't want to use an applet) between your local web server and BrowserStack and even debug in the cloud. Fabulous.

image

After I've setup this tunnel, here I am debugging a website running local via a remote Mountain Lion Mac running Safari 6. Or whatever. You get the idea.

Remoting into a Mac and DEBUGGING with Visual Studio

Here am I at a breakpoint. Ya, it's freaking me out also.

Remoting into a Mac and DEBUGGING with Visual Studio

Again, if you've got VS2012, can you get this now any number of ways. You can go to http://asp.net/browsers, you can go to http://modern.ie or you can just click "More Emulators" within Visual Studio itself.

image

Have fun!

About Scott

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

facebook twitter subscribe
About   Newsletter
Hosting By
Hosted in an Azure App Service
January 31, 2013 21:05
Wonderful resource, seems very useful for testing quickly.
January 31, 2013 21:58
Very interesting. Thanks for the write-up and information.
January 31, 2013 22:05
I don't have the "More Emulators..." option in the debug dropdown, and after installing the extension (and restarting VS), the BrowserStack option doesn't show in the dropdown either. I wonder if this has something to do with the edition/features of VS 2012 that I have installed?
January 31, 2013 22:26
I am with Ben. I don't see a "More Emulators..." option.
January 31, 2013 22:42
Brandon and Ben - My mistake. This is added with VS2012.2. Get the VS2012.2 update CTP to add this the More Emulators item (along with all the other update goodness).

As for the option not showing up at all, that's weird. I don't think you need any update just to use it, I'll ask BrowserStack.
February 01, 2013 3:06
Is "More Emulators..." only available on Ultimate?
February 01, 2013 3:43
Ah, you got me for a second here. I thought you were going to announce that my 10 years of whining to the VS team was about to end and that we'd finally get full integration of the VS javascript debugger with the debugging APIs of all the major browsers. I'll continue the whining then.

This looks very much like the now defunct tool that Microsoft had for cross-browser testing. Whatwasitsname?
February 01, 2013 6:09
Great post Scott.
I got everything setup with the Update 2 CPT, and running VS Ultimate, with the BrowserStack extension installed, yet I can't find any reference to the "More emulators" menu.

Any hints on how to get that?
Thanks.
February 01, 2013 8:32
Can't find "More emulators" menu item after installing update CTP2 either...
February 01, 2013 12:37
OK, I'm being told I messed up and that because the ASP.NET and Web Tools 2012.2 and Visual Studio 2012.2 (currently separate) haven't merged together yet - but they WILL in the final VS2012.2 release, that the More Emulators option and other Web things is in the ASP.NET 2012.2 RC.

We're talking about not-released stuff, but rest assured that when the VS2012.2 update is released you'll just need to install the one update and you'll get Web Tools as well.
February 01, 2013 13:49
Thanks a ton, Scott! Excellent guide.
Also, I was having a tough time figuring out how to get the BrowserStaack option. Installing ASP .net and Web Tools did the trick.
February 03, 2013 6:10
Great, thanks for the info Scott. Looking forward to the release of this new update and the more emulators functionality.
February 03, 2013 23:38
Alternately, Microsoft, Google, Mozilla, and Apple could actually develop to, you know, standards, and eliminate this problem.

I wonder each day why standards organisations exist if no one actually bothers to use the standards they produce.
K
February 04, 2013 17:43
Re.

"Alternately, Microsoft, Google, Mozilla, and Apple could actually develop to, you know, standards, and eliminate this problem."

Yep that's the way forward, won't help the already released browser versions though*, still need a way to test your site in those.

Except for sensible browsers like Chrome which auto-update to the latest version. IE take note.
February 05, 2013 5:15
Yeah, I like these in the cloud cross browser VM offerings. I went with Sauce to save a few bucks. Was pleasantly surprised how easy all of them worked.
February 06, 2013 1:06
Interesting indeed! Thank's Scott.
March 09, 2013 22:13
looking for some emulators to test mobile asp.net views. Already installed the electric mobile.
Others? free?
May 22, 2013 8:02
Hi Scott,

Can't find "More emulators" menu item after installing update 2 CTP either.
Do any other steps that we need?

Comments are closed.

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