Cross Browser Debugging integrated into Visual Studio with BrowserStack
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:
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!
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.
About Newsletter
William Wingler
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.
This looks very much like the now defunct tool that Microsoft had for cross-browser testing. Whatwasitsname?
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.
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.
Also, I was having a tough time figuring out how to get the BrowserStaack option. Installing ASP .net and Web Tools did the trick.
I wonder each day why standards organisations exist if no one actually bothers to use the standards they produce.
"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.
Others? free?
Can't find "More emulators" menu item after installing update 2 CTP either.
Do any other steps that we need?
Comments are closed.