通过

在 Visual Studio 2013 中使用浏览器链接

浏览器链接是 Visual Studio 2013 中的一项新功能，用于在开发环境和一个或多个 Web 浏览器之间创建信道。 可以使用浏览器链接一次性刷新多个浏览器中的 Web 应用程序，这对于跨浏览器测试非常有用。

浏览器刷新

使用“浏览器刷新功能”，可以通过“Browser Link”同时刷新多个连接到 Visual Studio 的浏览器。

若要使用浏览器刷新，请先使用任何项目模板创建 ASP.NET 应用程序。 通过按 F5 或单击工具栏中的箭头图标来调试应用程序：

Visual Studio 的屏幕截图，工具栏中突出显示了箭头图标以演示应用程序调试过程。

还可以使用下拉列表来选择用于调试的特定浏览器。

Visual Studio 的屏幕截图，工具栏和下拉菜单中突出显示了箭头图标，其中显示了浏览器列表。

若要使用多个浏览器一起进行调试，请选择“与...一起浏览”。 在“ 浏览使用 ”对话框中，按住 Ctrl 键以选择多个浏览器。 单击“ 浏览 ”以使用所选浏览器进行调试。 如果从 Visual Studio 外部启动浏览器并导航到应用程序 URL，则浏览器链接也适用。

“浏览使用”对话框的屏幕截图，说明选择一个或多个浏览器。其中，三个浏览器已被突出显示并选中。

浏览器链接控件位于带有圆形箭头图标的下拉列表中。 箭头图标是“ 刷新 ”按钮。

Visual Studio 的屏幕截图，其中“刷新”按钮以红色边框显示。“刷新”按钮是一个圆形箭头。

若要查看哪些浏览器已连接，请在调试时将鼠标悬停在 “刷新 ”按钮上。 连接的浏览器显示在工具提示窗口中。

Visual Studio 的屏幕截图，其中突出显示了“刷新”按钮以指示鼠标悬停在按钮上。工具提示显示连接的浏览器。

若要刷新连接的浏览器，请单击“ 刷新 ”按钮或按 Ctrl+Alt+Enter。 例如，以下屏幕截图显示了使用 MVC 5 项目模板创建的 ASP.NET 项目。 可以看到应用程序在顶部的两个浏览器中运行。 在下方，项目在 Visual Studio 中打开。

A S P dot Net 项目的屏幕截图，其中应用程序在两个浏览器中并排运行，项目在 Visual Studio 中显示。

在 Visual Studio 中，我更改 <了主页的 h1> 标题：

Visual Studio 的屏幕截图，其中显示了 A S P 点 Net 项目，并突出显示了 H 1 标题。

单击“ 刷新 ”按钮时，更改将显示在两个浏览器窗口中：

ASP.NET 项目的屏幕截图，其中更改在并排显示的浏览器窗口中出现，项目在 Visual Studio 中的下方显示。

备注

  • 若要启用浏览器链接，请在项目的 Web.config 文件中将编译元素设置为debug=true<>。
  • 应用程序必须在 localhost 上运行。
  • 应用程序必须面向 .NET 4.0 或更高版本。

浏览器链接仪表板显示有关浏览器链接连接的信息。 若要查看仪表板，请选择“浏览器链接”下拉菜单（ “刷新 ”按钮旁边的小箭头）。 然后单击 “浏览器链接仪表板”。

Visual Studio 的屏幕截图，其中突出显示了“刷新”按钮，并在下拉菜单中突出显示了“浏览器链接仪表板”。

仪表板列出了已连接的浏览器和每个浏览器已导航到的 URL。

浏览器链接仪表板的屏幕截图，其中显示了已连接的浏览器，以及每个浏览器导航到的 URL。

“ 先决条件” 部分显示了为该项目启用浏览器链接所需的任何步骤。 例如，以下屏幕截图显示 Web.config 文件中“debug”设置为 false 的项目。

浏览器链接仪表板的屏幕截图，其中“先决条件”部分指示必须为项目启用调试。

若要为静态 HTML 文件启用浏览器链接，请将以下内容添加到 Web.config 文件中。

<configuration>
  <system.webServer>    
    <handlers>
      <add name="Browser Link for HTML" path="*.html" verb="*" 
           type="System.Web.StaticFileHandler, System.Web, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" 
           resourceType="File" preCondition="integratedMode" />
    </handlers>
  </system.webServer>    
</configuration>

出于性能原因，请在发布项目时删除此设置。

浏览器链接默认处于启用状态。 可通过多种方式禁用它：

  • 在“浏览器链接”下拉菜单中，取消选中“ 启用浏览器链接”。

    Visual Studio 的屏幕截图，其中显示了“启用浏览器链接”，并在“浏览器链接”下拉菜单中取消选中。

  • 在 Web.config 文件中，添加名为“vs：EnableBrowserLink”的密钥，并在 appSettings 节中添加值为“false”。

    <appSettings>
  <add key="vs:EnableBrowserLink" value="false"/>
</appSettings>

  • 在 Web.config 文件中，将调试设置为 false。

    <system.web>
  <compilation debug="false" targetFramework="4.5" />
</system.web>

它的工作原理是什么？

Browser Link 使用 SignalR 在 Visual Studio 和浏览器之间创建通信信道。 启用浏览器链接后，Visual Studio 充当多个客户端（浏览器）可以连接到的 SignalR 服务器。 Browser Link 还会向 ASP.NET 注册 HTTP 模块。 此模块将特殊 <脚本> 引用注入每个从服务器来的页面请求。 可以通过在浏览器中选择“查看源”来查看脚本引用。

浏览器中“查看源”窗口的屏幕截图，其中显示了 h t t p 模块注入的特殊脚本引用。

源文件未修改。 HTTP 模块动态注入脚本引用。

由于浏览器端代码都是 JavaScript，因此它适用于 SignalR 支持的所有浏览器，而无需任何浏览器插件。

  • Last updated on