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 will allow dynamic data exchange between your web application and Visual Studio.

This feature is enabled by default in Visual Studio 2013 Preview. When Browser Link is enabled we register an HTTPModule with ASP.NET, which will then inject a <script> reference to every page request from the server. It is this JavaScript that does the magic of connecting the browser to Visual Studio. For Preview, we have a feature called the “Refresh Linked Browsers” that makes use of this channel between browsers and IDE.

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.NET technology for bi-directional communication over HTTP. When Browser link is 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 does the Browser Link feature look like?

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

This feature becomes active as soon as you 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 url to get this started.

In the image below you can see that:

1.  “Refresh Linked Browsers” is active as you may have browsers opened at this point.

2.  Brower Link feature is ON by default.

3.  “Refresh Linked Browsers” has a keyboard shortcut (Ctrl+Alt+Enter).

2. How will I know which browsers are connected to VS?

Once you navigate to your page using various browsers, they will be listed in a tooltip as you hover over the Refresh icon

The tooltip will look like the image below. Note that the tooltip shows how many browsers are connected. It also lists the connections with their respective urls.

If there are no browsers open for the project currently open in Visual studio, the tool tip will look like the image below. At this point you can do a View in Browser of a page to start the connection.

3. How does “Refresh Linked Browsers” work?

Let us assume that you 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 will show you that there are 3 browsers connected.

Make an edit to Default.aspx  file . Change text in <h1> ASP.net </h1> to ASP.NET 4.5. Now click on the refresh button or do Ctrl+Alt+Enter to save and refresh the page. This will update all the browsers at once. Note that, this will only refresh the browser. It will not navigate to the page for you.

4. How do I know if Browser Link is turned ON?

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

4. How do I turn off Browser Link?

You can uncheck “Enable Browser Link” and it will be turned off “ Browser Link” for all future requests made.

You can also use the following appsettings in your web.config file.

1. Set appSetting “vs:EnableBrowserLink” to “false ““. This will  disable Browser Link.

2. Set debug= false in web.config file. This will  also disable Browser Link. Note that debug= true is required for Browser Link feature to work.

5. What is coming up for RTM?

For RTM we will have Browser Link available as an extensible API for users to write extensions that can talk to various browsers and VS. Stay tuned and we will 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 will be moved inside the body tag for the next release.

2. “Refresh Linked Browsers” will not work for HTML pages. This can be fixed by enabling  Run All Managed Modules in  your web.config settings.

3. Browser Link does not work for sites that aren’t hosted on localhost.

4. We do not work on default Website Templates. This is because  debug flag is set to false in web.config. You will have 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 an even more seamless experience.

Windows Phone

Windows Phone SDK Downloads

The Windows Phone Software Development Kit (SDK) includes all of the tools that you need to develop apps and games for Windows Phone

iPhone / iPod / iPad

Electric Plum

iPhone and iPad Simulators for Windows, as well as a Responsive design tool. Can integrate with VS 2012 "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 2007 . 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 is 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 other machines.

[转载]Browser Link feature in Visual Studio Preview 2013的更多相关文章

  1. please wait while windows configures microsoft visual studio professional 2013 [转载]

    2016年5月30日 VS3013安装update 2以后,打开offie出现"please wait while windows configures microsoft visual s ...

  2. Microsoft Visual Studio Ultimate 2013 RC 离线安装程序

    Microsoft Visual Studio Ultimate 2013 RC 离线安装程序 ☆ 微软官网地址:☆ http://www.microsoft.com/en-us/download/d ...

  3. Microsoft Visual Studio Ultimate 2013 Update 2 RC 英文版--离线完整安装ISO+简体中文语言包

    VS2013.2_RC_EN_Full.iso:名称:Microsoft Visual Studio 2013版本:Ultimate 2013 Update 2 RC语言:English在线下载:ht ...

  4. Visual Studio Ultimate 2013 with Update 4

    Visual Studio Ultimate 2013 with Update 4 是一个先进的开发解决方案,各种规模的团队通过它均可设计和创建引人注目的应用程序,使用户兴致勃勃. Visual St ...

  5. Microsoft Visual Studio Ultimate 2013 with Update 3 CN+EN

    官方90天试用版. Microsoft Visual Studio Ultimate 2013 with Update 3 - 简体中文DVD5 ISO image (SHA-1: 9A306631A ...

  6. Microsoft Visual Studio Ultimate 2013 旗舰版 有效注册密钥

    Visual Studio Ultimate 2013 KEY(密钥):BWG7X-J98B3-W34RT-33B3R-JVYW9 Visual Studio Premium 2013 KEY(密钥) ...

  7. Visual Studio 2010/2013 查看DLL接口(函数)

    1. “应用程序" Visual Studio 2010/2013 的Visual Studio Tools文件夹中打开Visual Studio Command Prompt 命令提示窗口 ...

  8. Visual Studio Community 2013,功能完整,免费使用

    http://www.infoq.com/cn/news/2014/11/VSC2013 微软刚刚宣布了.NET平台的开源计划,与此同时,它还推出了源自Visual Studio Profession ...

  9. Microsoft Visual Studio Ultimate 2013密钥

    Visual Studio Ultimate 2013 KEY(密钥):BWG7X-J98B3-W34RT-33B3R-JVYW9Visual Studio Premium 2013 KEY(密钥): ...

随机推荐

  1. 运用fancybox弹出div的方式弹出视频界面

    fancybox可以弹出很多窗体,甚至一个swf格式的小视频.但这样的swf视频播放的时候并没有任何的控件.只能重头看到尾,或者关闭.我们可以利用fancybox弹出div盒子的方式配合html5很快 ...

  2. process.tar.gz

    exec1.c #include <stdio.h> #include <unistd.h> int main() { char *arglist[3]; arglist[0] ...

  3. 四则运算level2

    package j; import java.util.Scanner; public class Main { public static void main(String[] args) { Sc ...

  4. C与C++的编程风格区别

    c和c++都是在实践中发展起来的语言.实用性极强.c是与UNIX/Linux的发展相辅相成的.而C++是B.S为了摆脱c与硬件以及底层过于紧密的苦恼,而开发的语言.C++可以说就是c语言的超集.任何c ...

  5. svn 创建主干 分支版本

    转载  https://www.cnblogs.com/dongzhiquan/p/5222018.html SVN分支与合并 一. 分支与合并的概念 二. SVN分支的意义 三. 如何创建分支与合并 ...

  6. <转>HTML、CSS、font-family:中文字体的英文名称

    宋体 SimSun 黑体 SimHei 微软雅黑 Microsoft YaHei 微软正黑体 Microsoft JhengHei 新宋体 NSimSun 新细明体 PMingLiU 细明体 Ming ...

  7. [Asp.net MVC]Asp.net MVC5系列——布局视图

    目录 系列文章 概述 布局视图 系列文章 [Asp.net MVC]Asp.net MVC5系列——第一个项目 [Asp.net MVC]Asp.net MVC5系列——添加视图 [Asp.net M ...

  8. 【Vue学习笔记1】基于Vue2.2.6版本

    记录一下自己关于Vue学习的过程,便于以后归纳整理以及复习. 1.下载引用vue.js 下载: npm install vue ,然后引用. 或直接线上引用: <script src=" ...

  9. git merge以及比较两个repo

    一.需求 1)有两个相关的branch github下载的repo有master和work两个分支,由于远端已经更新,master分支落后于远端分支,work分支又有新的更新内容,需要将远端maste ...

  10. IntelliJ IDEA2017 修改缓存文件的路径

    IDEA的缓存文件夹.IntelliJIdea2017.1,存放着IDEA的破解密码,各个项目的缓存,默认是在C盘的用户目录下,目前有1.5G大小.现在想要把它从C盘移出. 在IDEA的安装路径下中, ...