Reproduced Browser Link feature in Visual Studio Preview 2013

Http://blogs.msdn.com/b/webdev/archive/2013/07/29/10430221.aspx

Browser Link feature in Visual Studio Preview 2013

Browser Link is just a channel between your Visual Studio IDE and any open Browser. This would allow dynamic data exchange between your Web application and Visual Studio.

This feature are enabled by default in Visual Studio Preview. When Browser Link was enabled we register an HttpModule with ASP, which would then inject a <script> reference to Every page request from the server. It's This JavaScript, that does the magic of connecting, the browser to Visual Studio. For Preview, we had a feature called the "Refresh Linked Browsers" That makes use of this channel between Browsers and ID E.

Because The Browser-side code is all JavaScript, it should work on all browsers, without requiring any other browser plug- In. It also works on Ipad/iphone emulators. The connection between the browser and Visual Studio uses SignalR, an ASP. Technology for Bi-directional Communication Over HTTP. When Browser link was enabled, Visual Studio acts as a SignalR server, to which multiple clients (the browsers) can connect .

Let me try to walk you through the feature with a few questions:

1. What is does the Browser Link feature look like?

As mentioned earlier, "Refresh Linked Browser" is the only feature and we have a for Preview. This shows-with-a little Refresh icon in your toolbar next-to-debug drop down.

This feature becomes active as soon as the navigate to a page in your current project. You could do F5, Ctrl+f5, ' View in Browser ' or open any Browser and paste your requested URLs to get this started.

In the image below you can see that:

1. "Refresh Linked Browsers" is active as if you are Browsers opened at the this point.

2. Brower Link feature is on by default.

3. "Refresh Linked Browsers" has a keyboard shortcut (Ctrl+alt+enter).

2. How would I know which browsers is connected to VS?

Once Navigate to your page using various browsers, they would be listed in a ToolTip as you hover over the Refresh icon

The tooltip would look like the image below. Note that the tooltip shows how many browsers is connected. It also lists the connections with their respective URLs.

If There is no browsers open for the project currently open in Visual Studio, the tool tip would look like the image below . At this point you can do a View on Browser of a page to start the connection.

3. How does does "Refresh Linked Browsers" work?

Let us assume so want to quickly see how "default.aspx" renders in various browsers.

Start off with launching "Browse with" and select multiple browsers (IE, Firefox, Chrome etc). At this point, VS'll show you there is 3 browsers connected.

Make a edit to Default.aspx file . Change text in

4. How does I know if Browser Link is turned on?

Go to ' View Source ' of your rendered page and you'll see a script tag at the very bottom. See image below. The presence of this script indicated, Browser Link feature is enabled.

4. How does I turn off Browser Link?

You can uncheck "Enable Browser link" and it would be the turned off "Browser link" for the future requests made.

You can also with the following appsettings in your Web. config file.

1. Set appsetting "Vs:enablebrowserlink" to "false". This would disable Browser Link.

2. Set debug= false in Web. config file. This would also disable Browser Link. Note that debug= True was required for the Browser Link feature to work.

5. What's coming up for RTM?

For RTM we'll have Browser Link available as a extensible API for users to write extensions so can talk to various BR Owsers and VS. Stay tuned and we'll be posting details of this soon.

known Browser Link issues for Preview:

1. The Browser Link script tag is injected after the body tag. This would be moved inside the body tag for the next release.

2. "Refresh Linked Browsers" won't work for HTML pages. This can is fixed by enabling Run all Managed Modules in your Web. config settings.

3. Browser Link does not work for sites this aren ' t hosted on localhost.

4. We don't work on default Website Templates. This is because debug flag was set to False in Web. config. You'll have a to set the debug flag to True for Browser Link to start working.

-----------------------------------

simulate Popular Mobile Devices for testing

Http://www.asp.net/mobile/device-simulators

You can download emulators for popular mobile devices and browsers by following these links

Device or Browser	Emulator/simulator
Browserstack Hosted Browser Virtualization	Browserstack Hosted Browser Virtualization Test your local or production environment in any browser on any platform. You can create a tunnel between your machine and the Browserstack network in your own hosted virtual machine. Make sure to get Thebrowserstack Visual Studio Extension for a even more seamless experience.
Windows Phone	Windows Phone SDK Downloads The Windows Phone Software development Kit (SDK) includes all of the tools, the need to develop apps, and games for Win Dows Phone
Iphone/ipod/ipad	Electric Plum IPhone and IPad simulators for Windows, as well as a responsive design tool. Can integrate with VS. "Browse with." Option.
Android	Android SDK Homepage
Opera Mobile/opera Mini	Latest versions: Opera Developer Tools Home Opera Mini 4.2: Online java-based simulator
Windows Mobile 6.5.3	Windows Mobile 6.5.3 Developer Tool Kit Note that to give the phone network access, you also need the VPC network Adaptor included in Virtual PC . To connect IE on the phone to your Visual Studio development server, see Kiran Patil ' s blog post .
Windows Mobile 6.1	Emulator images for Visual Studio 2005/2008

Note that if you want to view your application on a real mobile device (which are the only option for fully testing IPhone Or iPad, since there ' s no true emulator for Windows) you'll need to host your application in IIS or IIS Express. You can ' t easily use Visual Studio's built-in Web server for this, because it won ' t respond to requests from S.

Reproduced Browser Link feature in Visual Studio Preview 2013