题记:Browser Link是VS 2013开始引入的一个强大功能,让前端代码(比如AngularJS的代码)在VS中的修改更加轻而易举。

前 端代码是运行在浏览器中,而Visual Studio通常只会和服务端代码交互。微软通过Browser Link技术在VS和浏览器之间架起了一个桥梁。这一技术是基于SignalR来实现的,虽然感觉把他们连接起来没有什么大不了的。但是,当你无数次在浏 览器上按F12来查看前端代码,你可知道Browser Link可以让你方便的回到VS中去浏览和修改他们。当你厌烦了在浏览器中修改出所需效果之后,还要把CSS代码复制回VS中的时候,你可知道 Browser Link可以简化这一流程。

当然为了实现以上效果,除了在VS中启用Browser Link功能外,还需要安装Web Essentials这个扩展。如果我们使用的是类似AngularJS这样的前端框架的话,由于它的前端页面一般是html而非csthml,那么我们还需要添加静态页面的支持

在以上环境都准备好之后,在调试的时候会在下部会浮动一个工具条(也可以通过Ctrl来开关),如下图:

这 个工具条上,最常用的按钮就是“Inspect”和“Save F12 Changes”。你可以用“Inspect”按钮来在VS中定位和查看元素标签或CSS、JS代码。如果你习惯在浏览器的F12工具中调整CSS的话, 那么用“Save F12 Changes”按钮来把修改自己保存回VS的源代码中。

关于Browser Link的更多详细用法,可以访问Browser Link的官方文档:http://www.asp.net/visual-studio/overview/2013/using-browser-link,或者“阅读原文”查看Angular First上的介绍文章。

原文地址:http://angularfirst.com/client-side-productivity-with-browser-link/

Browser Refresh

With Browser Refresh, you can refresh multiple browsers that are connected to Visual Studio through Browser Link.

To use Browser Refresh, first create an ASP.NET application, using any of the project templates. Debug the application by pressing F5 or clicking the arrow icon in the toolbar:

You can also use the dropdown to select a specific browser for debugging.

To debug with multiple browsers, select Browse With. In the Browse With dialog, hold down the CTRL key to select more than one browser. Click Browse to debug with the selected browsers. Browser Link also works if you launch a browser from outside Visual Studio and navigate to the application URL.

The Browser Link controls are located in the dropdown with the circular arrow icon. The arrow icon is the Refresh button.

To see which browsers are connected, hover the mouse over the Refresh button while debugging. The connected browsers are shown in a ToolTip window.

To refresh the connected browsers, click the Refresh button or press CTRL+ALT+ENTER. For example, the following screenshot shows an ASP.NET project, which I created using the MVC 5 project template. You can see the application running in two browsers at the top. At the bottom, the project is open in Visual Studio.

In Visual Studio, I changed the <h1> heading for the home page:

When I clicked the Refresh button, the change appeared in both browser windows:

Notes

  • To enable Browser Link, set debug=true in the <compilation> element in the project’s Web.config file.
  • The application must be running on localhost.
  • The application must target .NET 4.0 or later.

Viewing the Browser Link Dashboard

The Browser Link dashboard shows information about the Browser Link connections. To view the dashboard, select the Browser Link dropdown menu (the small arrow next to the Refresh button). Then click Browser Link Dashboard.

The dashboard lists the connected Browsers and the URL to which each browser has navigated.

The Prerequisites section shows any steps needed to enable Browser Link for that project. For example, the following screenshot shows a project where “debug” is set to false in the Web.config file.

Enabling Browser Link for Static HTML Files

To enable Browser Link for static HTML files, add the following to your Web.config file.

  1. <configuration>
  2. <system.webServer>
  3. <handlers>
  4. <add name="Browser Link for HTML" path="*.html" verb="*"
  5. type="System.Web.StaticFileHandler, System.Web, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"
  6. resourceType="File" preCondition="integratedMode" />
  7. </handlers>
  8. </system.webServer>
  9. </configuration>

For performance reasons, remove this setting when you publish your project.

Disabling Browser Link

Browser Link is enabled by default. There are several ways to disable it:

  • In the Browser Link dropdown menu, uncheck Enable Browser Link.

  • In the Web.config file, add a key named “vs:EnableBrowserLink” with the value “false” in the appSettings section.
    1. <appSettings>
    2. <add key="vs:EnableBrowserLink" value="false"/>
    3. </appSettings>
  • In the Web.config file, set debug to false.
    1. <system.web>
    2. <compilation debug="false" targetFramework="4.5" />
    3. </system.web>

How Does It Work?

Browser Link uses SignalR to create a communication channel between Visual Studio and the browser. When Browser Link is enabled, Visual Studio acts as a SignalR server that multiple clients (browsers) can connect to. Browser Link also registers an HTTP module with ASP.NET. This module injects special <script> references into every page request from the server. You can see the script references by selecting “View source” in the browser.

Your source files are not modified. The HTTP module injects the script references dynamically.

Because the browser-side code is all JavaScript, it works on all browsers that SignalR supports, without requiring any browser plug-in.

Using Browser Link in Visual Studio 2013的更多相关文章

  1. [转]Using Browser Link in Visual Studio 2013

    本文转自:https://docs.microsoft.com/en-us/aspnet/visual-studio/overview/2013/using-browser-link Browser ...

  2. Microsoft Visual Studio 2013 Update 5 direct download link for full ISO

    From:http://www.nickdu.com/?p=604 Visual Studio 2013 Update 5 is now released and maybe you are also ...

  3. Visual Studio 2013中因SignalR的Browser Link引起的Javascript错误一则

    众所周知Visual Studio 2013中有一个由SignalR机制实现的Browser Link功能,意思是开发人员可以同时使用多个浏览器进行调试,当按下IDE中的Browser Link按钮后 ...

  4. 关闭 Visual Studio 2013 的 Browser Link 功能

    最近公司弄新项目需要用 MVC,就把 IDE 升级到了 Visual Studio 2013,在开发的时候发现有好多请求一个本地49925的端口 . 很奇怪,一开始以为是 Visual Studio ...

  5. Visual Studio 2013 Web开发、新增功能:“Browser Link”

    微软正式发布Visual Studio 2013 RTM版,微软还发布了Visual Studio 2013的最终版本..NET 4.5.1以及Team Foundation Server 2013. ...

  6. Visual Studio 2013 Web开发、新增功能:“Browser Link”

    微软正式发布Visual Studio 2013 RTM版,微软还发布了Visual Studio 2013的最终版本..NET 4.5.1以及Team Foundation Server 2013. ...

  7. 禁用Visual Studio 2013的Browser Link功能

    禁用Visual Studio 2013的Browser Link功能 GET http://localhost:37478/7fd25f8af33f443494e765be19be6240/brow ...

  8. Visual Studio 2013 的 Browser Link 功能

    Visual Studio 2013 的 Browser Link 功能 最近公司弄新项目需要用 MVC,就把 IDE 升级到了 Visual Studio 2013,在开发的时候发现有好多请求一个本 ...

  9. Visual Studio 2013中的“Browser Link”

    前几天,参加了,VS13的新特性的讲座,回来便试了一下, 默认Html会引用如下脚本: <!-- Visual Studio Browser Link --> <script typ ...

随机推荐

  1. 【PL/SQL编程】注释说明

    1. 单行注释 由两个连接字符“--”开始,后面紧跟着注释内容. 2. 多行注释 由/*开头, 由*/结尾.

  2. 4.CRT远程连接的使用

    目录: 1.为什么需要远程连接? 2.一般的远程连接工具有哪些? 3.远程连接的原理? 4.远程连接的软件的功能和使用相关技巧? 1.为什么选择远程连接? 因为在实际工作中,机房一般都不可能在办公室, ...

  3. php小练习——实现几种不同的金字塔

    首先,从简单的着手,打印出金字塔的右半部分,代码如下 <?php $n=5; //金字塔行数 //外层的for循环控制层数 for($i=1;$i<=$n;$i++){ //内层的for循 ...

  4. 毕业生、程序猿转岗该如何选择Java、大数据和VR?答案在这里!

    许久不见的朋友请我吃饭,期间给我介绍他一个弟弟,说明年要毕业了,还不知道找啥工作,说有培训机构让他学VR.大数据什么的,不知道前景咋样,想咨询一下我.相信很多朋友面临毕业,都不知道该从事哪个行业,自己 ...

  5. 最简单的记录程序运行时间的方法:[记录PHP程序运行消耗时间]

    比较实用的debug方法:具体参考地址已经记不清了,这里重写成类方便调用 /** * @author logonmy@126.com * @Date: 13-7-23 * @desc example ...

  6. squid http_access中的逻辑关系

    http_access通过acl实现访问控制,方法 acl A acltype argument acl B acltype argument 逻辑关系:或 http_access allow|den ...

  7. Linux部分常用命令学习(一)

    什么是linux命令? 是一个可执行程序,就像我们所看到的位于目录/usr/bin 中的文件一样. 属于这一类的程序,可以编译成二进制文件,诸如用 C 和 C++语言写成的程序, 也可以是由脚本语言写 ...

  8. HihoCoder - 1615矩阵游戏II(贪心)

    矩阵游戏II 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 给定一个NxN的整数矩阵,小Hi每次操作可以选择两列,将这两列中的所有数变成它的相反数. 小Hi可以进行任意 ...

  9. 帮你彻底解决eclipse(myeclipse)中写struts.xml配置文件

    其实,在自己写struts.xml的时候,竟然没有代码提示功能.让我非常的烦恼,其实解决这个问题的关键还是system不知道他的dtd的规则无法提示配置信息 很简单,那就让它知道就OK了!!! 道理明 ...

  10. CLR值类型和引用类型

    知识点:引用类型.值类型.装箱.拆箱 CLR支持两种类型:引用类型和值类型.引用类型在堆上分配内存,值类型在线程栈上分配内存.值类型与引用类型如下所示: 值类型对象有两种表示形式:未装箱和已装箱.将一 ...