Scott Hanselman

Cross Browser Debugging integrated into Visual Studio with BrowserStack

January 31, '13 Comments [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. 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
Thursday, January 31, 2013 5:05:40 PM UTC
Wonderful resource, seems very useful for testing quickly.
William Wingler
Thursday, January 31, 2013 5:58:11 PM UTC
Very interesting. Thanks for the write-up and information.
Matthew Staffeld
Thursday, January 31, 2013 6:05:11 PM UTC
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?
Ben Sgroi
Thursday, January 31, 2013 6:26:11 PM UTC
I am with Ben. I don't see a "More Emulators..." option.
Brandon
Thursday, January 31, 2013 6:42:25 PM UTC
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.
Thursday, January 31, 2013 11:06:48 PM UTC
Is "More Emulators..." only available on Ultimate?
Trevor
Thursday, January 31, 2013 11:43:14 PM UTC
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?
Friday, February 01, 2013 2:09:54 AM UTC
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.
Friday, February 01, 2013 4:32:42 AM UTC
Can't find "More emulators" menu item after installing update CTP2 either...
Friday, February 01, 2013 8:37:59 AM UTC
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.
Friday, February 01, 2013 9:49:13 AM UTC
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.
BuggyCoder
Sunday, February 03, 2013 2:10:43 AM UTC
Great, thanks for the info Scott. Looking forward to the release of this new update and the more emulators functionality.
Sunday, February 03, 2013 7:38:52 PM UTC
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
Monday, February 04, 2013 1:43:21 PM UTC
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.
Jon Hilton
Tuesday, February 05, 2013 1:15:22 AM UTC
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.
Tuesday, February 05, 2013 9:06:49 PM UTC
Interesting indeed! Thank's Scott.
Joao Albuquerque
Saturday, March 09, 2013 6:13:37 PM UTC
looking for some emulators to test mobile asp.net views. Already installed the electric mobile.
Others? free?
Wednesday, May 22, 2013 4:02:08 AM UTC
Hi Scott,

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

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