VizualBusiness: Cross Browser Debugging integrated into Visual Studio with BrowserStack

Thursday, January 31, 2013

Cross Browser Debugging integrated into Visual Studio with BrowserStack

Cross Browser Debugging integrated into Visual Studio with BrowserStack:

TL;DR - To Long Didn't Read Version

BrowserStack Integrated into Visual Studio
- From a debug session inside Visual Studio 2012 today, 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.
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.