ASP.NET Core 中的浏览器链接Browser Link in ASP.NET Core
- 本文内容
浏览器链接设置Browser Link setup
- ConfigurationConfiguration
如何使用浏览器链接How to use Browser Link
同时在多个浏览器中刷新 Web 应用Refresh the web app in several browsers at once
工作原理How it works

ASP.NET Core 中的浏览器链接Browser Link in ASP.NET Core

本文内容

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

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

浏览器链接设置Browser Link setup

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

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

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

ASP.NET Core 1.x“Web 应用程序” 项目模板具有 Microsoft.VisualStudio.Web.BrowserLink 包的包引用。其他项目类型需要添加对 Microsoft.VisualStudio.Web.BrowserLink 的包引用。

ConfigurationConfiguration

在 Startup.Configure 方法中调用 UseBrowserLink：

app.UseBrowserLink();

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

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

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

如何使用浏览器链接How to use Browser Link

打开 ASP.NET Core 项目后，Visual Studio 会在“调试目标” 工具栏控件旁显示浏览器链接工具栏控件：

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

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

同时在多个浏览器中刷新 Web 应用Refresh the web app in several browsers at once

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

若要同时打开多个浏览器，请从相同下拉菜单中选择“浏览方式…” 。按住 Ctrl 键选择所需浏览器，然后单击“浏览” ：

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

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

更改“索引”视图，在单击浏览器链接刷新按钮时会更新所有连接的浏览器：

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

浏览器链接仪表板The Browser Link Dashboard

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

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

否则会显示连接的浏览器，以及每个浏览器所显示的页面的路径：

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

启用或禁用浏览器链接Enable or disable Browser Link

在禁用浏览器链接之后重新启用它时，必须刷新浏览器才能重新连接它们。

启用或禁用 CSS 自动同步Enable or disable CSS Auto-Sync

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

工作原理How it works

浏览器链接使用 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 支持的所有浏览器，而无需浏览器插件。