Cross Browser Debugging integrated into Visual Studio with BrowserStack

January 31, '13 Comments [18] Posted in ASP.NET | VS2012

TL;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.

In 2010, I used PowerShell and hacked together a browser switcher script in VS2010.
My buddy Kzu and friends saw this script, realized it sucked and made things better on VS2012 with their Default Browser Switcher addon.
I worked with Jorge on our team and we delivered a the browser switcher dropdown directly integrated in VS2012. This feature is also in WebMatrix.
Later the iPhone/iPad local simulator from Electric Plum added tight integration with Visual Studio so you can test locally.

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.

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.

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

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.

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.

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

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.

Have fun!

« Git support for Visual Studio - Git, TFS... | Blog Home | This Developer's Life 3.0.1 - Cancer »

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.

About Newsletter

Sponsored By

Hosting By

Comments [18]

Permalink

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.

Scott Hanselman

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?

Bertrand Le Roy

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.

Andres Clari

Friday, February 01, 2013 4:32:42 AM UTC

Can't find "More emulators" menu item after installing update CTP2 either...

Sean Feldman

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.

Scott Hanselman

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.

Andres Clari

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.

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.

Rob Levin

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?

Hannes Preishuebr

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

Name
E-mail	(will show your gravatar icon)
Home page
Remember Me

Comment (Some html is allowed: `a@href@title, b, blockquote@cite, em, i, li, ol, pre, strike, strong, sub, super, u, ul`) where the @ means "attribute." For example, you can use <a href="" title=""> or <blockquote cite="Scott">.
Live Comment Preview