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

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

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

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

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

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

在 方法中调用 UseBrowserLink：

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

有关详细信息，请参阅 。

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

  • 同时在多个浏览器中刷新 Web 应用。
  • 打开“浏览器链接仪表板” 。
  • 启用或禁用 CSS 自动同步。

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

F5 下拉菜单

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

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

与两个浏览器同步示例

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

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

browsers-sync-to-changes

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

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

browserlink-dashboard-no-connections

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

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

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

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

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

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