在 ASP.NET Core 中的浏览器链接

作者： Nicolò Carandini、 Mike Wasson和Tom Dykstra

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

浏览器链接安装

将VisualStudio包添加到项目。对于 ASP.NET Core Razor Pages 或 MVC 项目，还应按照 ASP.NET Core 中的 Razor 文件编译中所述启用 Razor （cshtml）文件的运行时编译。仅当已启用运行时编译时，才会应用 Razor 语法更改。

将 ASP.NET Core 2.0 项目转换为 ASP.NET Core 2.1 并过渡到AspNetCore 元包时，请安装用于浏览器链接功能的VisualStudio包。默认情况下，ASP.NET Core 2.1 项目模板使用 Microsoft.AspNetCore.App 元包。

"ASP.NET Core 2.0 Web 应用程序"、"空" 和 " web API项目" 模板使用AspNetCore 元包，其中包含VisualStudio的包引用。因此，使用 Microsoft.AspNetCore.All 元包无需采取进一步的操作即可使用浏览器链接。

ASP.NET Core 1.x Web 应用程序项目模板具有的包引用Microsoft.VisualStudio.Web.BrowserLink包。其他项目类型要求您将包引用添加到 Microsoft.VisualStudio.Web.BrowserLink。

配置

在 Startup.Configure 方法中调用 UseBrowserLink：

app.UseBrowserLink();

UseBrowserLink 调用通常置于仅在开发环境中启用浏览器链接的 if 块内。例如：

if (env.IsDevelopment())
{
    app.UseDeveloperExceptionPage();
    app.UseBrowserLink();
}

有关更多信息，请参见在 ASP.NET Core 中使用多个环境。

如何使用浏览器链接

如果你拥有打开 ASP.NET Core 项目，Visual Studio 将旁边显示浏览器链接工具栏控件调试目标工具栏控件：

浏览器链接下拉菜单

通过浏览器链接工具栏控件，可以：

同时在多个浏览器中刷新 web 应用。
打开浏览器链接仪表板。
启用或禁用浏览器链接。注意：默认情况下，在 Visual Studio 中禁用浏览器链接。
启用或禁用CSS 自动同步。

同时在多个浏览器中刷新 web 应用

若要选择启动项目时要启动的单个 web 浏览器，请使用 "调试目标" 工具栏控件中的下拉菜单：

F5 下拉菜单

若要同时打开多个浏览器，请从相同的下拉选择 "浏览方式 ... "。按住Ctrl键以选择所需的浏览器，然后单击 "浏览"：

同时打开多个浏览器

以下屏幕截图显示了 Visual Studio，其中打开了索引视图和两个打开的浏览器：

与两个浏览器同步示例

将鼠标悬停在浏览器链接工具栏控件上，以查看连接到项目的浏览器：

悬停提示

更改 "索引" 视图，当您单击浏览器链接刷新按钮时，将更新所有连接的浏览器：

浏览器-同步到更改

Browser 链接还适用于从 Visual Studio 外部启动的浏览器并导航到应用 URL。

浏览器链接仪表板

从 "浏览器链接" 下拉菜单打开 "浏览器链接仪表板" 窗口，以管理与打开的浏览器的连接：

browserslink-仪表板

如果未连接浏览器，则可以通过选择 "在浏览器中查看" 链接来启动非调试会话：

browserlink-dashboard-no-connections

否则，会显示连接的浏览器，其中显示了每个浏览器显示的页面的路径：

browserlink-dashboard-two-connections

你还可以单击单独的浏览器名称以仅刷新该浏览器。

启用或禁用浏览器链接

禁用浏览器链接后，必须刷新浏览器才能将其重新连接。

启用或禁用 CSS 自动同步

启用 CSS 自动同步后，在对 CSS 文件进行任何更改时，将自动刷新连接的浏览器。

工作原理

Browser Link 使用SignalR在 Visual Studio 与浏览器之间创建信道。启用浏览器链接后，Visual Studio 将充当一个 SignalR 服务器，多个客户端（浏览器）可以连接到该服务器。浏览器链接还在 ASP.NET Core 请求管道中注册中间件组件。此组件从服务器插入对每个页面请求的特殊 <script> 引用。可以通过在浏览器中选择 "查看源" 并滚动到 <body> 标记内容的末尾来查看脚本引用：

    <!-- Visual Studio Browser Link -->
    <script type="application/json" id="__browserLink_initializationData">
        {"requestId":"a717d5a07c1741949a7cefd6fa2bad08","requestMappingFromServer":false}
    </script>
    <script type="text/javascript" src="http://localhost:54139/b6e36e429d034f578ebccd6a79bf19bf/browserLink" async="async"></script>
    <!-- End Browser Link -->
</body>

不会修改您的源文件。中间件组件动态注入脚本引用。

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

览器链接