Link do navegador no ASP.NET Core

Observação

Esta não é a versão mais recente deste artigo. Para a versão atual, consulte a versão do .NET 10 deste artigo.

Aviso

Esta versão do ASP.NET Core não tem mais suporte. Para obter mais informações, consulte a Política de Suporte do .NET e do .NET Core. Para a versão atual, consulte a versão do .NET 10 deste artigo.

Por Nicolò Carandini e Tom Dykstra

O link do navegador é um recurso do Visual Studio. Ele cria um canal de comunicação entre o Development ambiente e um ou mais navegadores da Web. Use o link do navegador para:

  • Atualize seu aplicativo web em vários navegadores ao mesmo tempo.
  • Testar em vários navegadores com configurações específicas, como tamanhos de tela.
  • Selecionar elementos de interface do usuário em navegadores em tempo real, veja a que marcação e origem ela está correlacionada no Visual Studio.
  • Realize a automação de teste do navegador em tempo real.

Compilação em runtime versus recarga dinâmica

Use o link do navegador com compilação em runtime ou recarga dinâmica para ver o efeito das alterações em runtime nos arquivos Razor (.cshtml). Recomendamos hot reload.

Quando você tem um projeto ASP.NET Core aberto, o Visual Studio mostra o controle da barra de ferramentas do link do navegador ao lado do controle da barra de ferramentas Debug Type:

menu suspenso de links do navegador

No controle da barra de ferramentas do link do navegador, você pode:

  • Atualize o aplicativo Web em vários navegadores ao mesmo tempo.
  • Abra o Browser Link Dashboard.
  • Habilitar ou desabilitar o Browser Link.
  • Habilitar ou desabilitar a Recarga Dinâmica do CSS.

Atualize o aplicativo Web em vários navegadores ao mesmo tempo

Para escolher um único navegador da Web a ser aberto ao iniciar o projeto, use o menu suspenso no controle de barra de ferramentas do Destino de Depuração:

Menu suspenso F5

Para abrir vários navegadores ao mesmo tempo, escolha Procurar com... na mesma lista suspensa. Mantenha pressionada a tecla Ctrl para selecionar os navegadores desejados e clique em Procurar:

Abrir muitos navegadores ao mesmo tempo

A captura de tela a seguir mostra o Visual Studio com a exibição Índice aberta e dois navegadores abertos:

Exemplo de sincronização com dois navegadores

Passar o mouse sobre o controle da barra de ferramentas do link do navegador para ver os navegadores que estão conectados ao projeto:

Dica ao focalizar

Altere o modo de exibição de Índice e todos os navegadores conectados serão atualizados quando você clicar no botão de atualização do link do navegador:

Os navegadores sincronizam com as alterações

O link do navegador também funciona com navegadores que você inicia de fora do Visual Studio e navega até a URL do aplicativo.

Abra a janela painel Browser Link no menu suspenso do Browser Link para gerenciar a conexão com os navegadores abertos:

how-to-open-browserlink-dashboard

Os navegadores conectados são mostrados com o caminho para a página que cada navegador está exibindo:

Painel do link do navegador com duas conexões

Você também pode clicar em um nome de navegador individual para atualizar somente esse navegador.

Ao habilitar novamente o link do navegador depois de desabilitá-lo, você deve atualizar os navegadores para reconectá-los.

Habilitar ou desabilitar a Recarga Dinâmica do CSS

Quando o hot reload de CSS está habilitado, os navegadores conectados são atualizados automaticamente quando você faz qualquer alteração nos arquivos CSS.

Como funciona

O link do navegador usa SignalR para criar um canal de comunicação entre o Visual Studio e o navegador. Quando o link do navegador está habilitado, o Visual Studio atua como um servidor SignalR ao qual vários clientes (navegadores) podem se conectar. O link do navegador também registra um componente de middleware no pipeline de solicitações do ASP.NET Core. Esse componente injeta referências especiais <script> em cada solicitação de página vinda do servidor. Você pode ver as referências de script selecionando Exibir origem no navegador e rolando até o final do conteúdo da marca <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>

Seus arquivos de origem não foram modificados. O componente middleware injeta as referências de script dinamicamente.

Como o código do lado do navegador é todo escrito em JavaScript, ele funciona em todos os navegadores que SignalR suporta, sem a necessidade de um plug-in do navegador.

Por Nicolò Carandini e Tom Dykstra

O Browser Link é um recurso do Visual Studio. Ele cria um canal de comunicação entre o Development ambiente e um ou mais navegadores da Web. Use o Browser Link para:

  • Atualize seu aplicativo Web em vários navegadores ao mesmo tempo.
  • Testar em vários navegadores com configurações específicas, como tamanhos de tela.
  • Selecione elementos de interface do usuário em navegadores em tempo real e veja a que marcação e código-fonte eles estão correlacionados no Visual Studio.
  • Realize a automação de teste do navegador em tempo real. Browser Link também é extensível.

Adicione o pacote Microsoft.VisualStudio.Web.BrowserLink ao seu projeto. Para projetos ASP.NET Core Pages ou MVC Razor, habilite também a compilação em tempo de execução de arquivos Razor (.cshtml), conforme descrito em Razor Compilação de arquivos no ASP.NET Core. As alterações de sintaxe do Razor são aplicadas somente quando a compilação de runtime foi habilitada.

Ao converter um projeto do ASP.NET Core 2.0 em ASP.NET Core 2.1 e fazer a transição para o metapacote Microsoft.AspNetCore.App, instale o pacote Microsoft.VisualStudio.Web.BrowserLink para a funcionalidade de Link do Navegador. Os modelos de projeto do ASP.NET Core 2.1 usam o metapacote Microsoft.AspNetCore.App por padrão.

Os modelos de projeto Aplicativo Web, Vazio e API Web do ASP.NET Core 2.0 usam o metapacote Microsoft.AspNetCore.All, que contém uma referência de pacote para Microsoft.VisualStudio.Web.BrowserLink. Portanto, o uso do metapacote Microsoft.AspNetCore.All não requer mais nenhuma ação para disponibilizar o Browser Link para uso.

O modelo de projeto Aplicativo Web do ASP.NET Core 1.x tem uma referência de pacote para o pacote Microsoft.VisualStudio.Web.BrowserLink. Outros tipos de projeto exigem que você adicione uma referência de pacote a Microsoft.VisualStudio.Web.BrowserLink.

Configuração

Chame UseBrowserLink no método Startup.Configure:

app.UseBrowserLink();

A chamada UseBrowserLink normalmente é colocada dentro de um bloco if que habilita o Browser Link apenas no ambiente Development. Por exemplo:

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

Para obter mais informações, consulte Ambientes de tempo de execução do ASP.NET Core.

Quando você tem um projeto ASP.NET Core aberto, o Visual Studio mostra o controle da barra de ferramentas do Browser Link ao lado do controle de barra de ferramentas do Debug Target:

Menu suspenso do Link do Navegador

No controle da barra de ferramentas do Browser Link, você pode:

  • Atualize o aplicativo web em vários navegadores ao mesmo tempo.
  • Abrir o Browser Link Dashboard.
  • Habilitar ou desabilitar o Browser Link. Observação: o Browser Link está desabilitado por padrão no Visual Studio.
  • Habilitar ou desabilitar a Sincronização Automática do CSS.

Atualize o aplicativo Web em vários navegadores ao mesmo tempo

Para escolher um único navegador da Web a ser aberto ao iniciar o projeto, use o menu suspenso no controle da barra de ferramentas Destino de Depuração:

Menu suspenso F5

Para abrir vários navegadores ao mesmo tempo, escolha Procurar com... na mesma lista suspensa. Mantenha pressionada a tecla Ctrl para selecionar os navegadores desejados e clique em Procurar:

Abrir muitos navegadores ao mesmo tempo

A captura de tela a seguir mostra o Visual Studio com a exibição Índice aberta e dois navegadores abertos:

Exemplo de sincronização com dois navegadores

Passe o mouse sobre o controle da barra de ferramentas Browser Link para ver os navegadores conectados ao projeto:

Dica ao passar o mouse

Altere a exibição Index, e todos os navegadores conectados serão atualizados quando você clicar no botão de atualização do Browser Link:

Os navegadores sincronizam com as alterações

O Link do Navegador também funciona com navegadores que você inicia de fora do Visual Studio e navega até a URL do aplicativo.

Abra a janela Browser Link Dashboard no menu suspenso do Browser Link para gerenciar a conexão com os navegadores abertos:

open-browserslink-dashboard

Se nenhum navegador estiver conectado, você poderá iniciar uma sessão de não depuração selecionando o link Exibir no Navegador:

Painel do Browserlink sem conexões

Caso contrário, os navegadores conectados são mostrados com o caminho para a página que cada navegador está mostrando:

Painel do Browserlink com duas conexões

Você também pode clicar em um nome de navegador individual para atualizar somente esse navegador.

Ao habilitar novamente o Browser Link depois de desabilitá-lo, você deve atualizar os navegadores para reconectá-los.

Habilitar ou desabilitar a Sincronização Automática do CSS

Quando a Sincronização Automática do CSS está habilitada, os navegadores conectados são atualizados automaticamente quando você faz qualquer alteração nos arquivos CSS.

Como funciona

O Link do Navegador usa SignalR para criar um canal de comunicação entre o Visual Studio e o navegador. Quando o Browser Link está habilitado, o Visual Studio atua como um servidor SignalR ao qual vários clientes (navegadores) podem se conectar. O Browser Link também registra um componente de middleware no pipeline de solicitação do ASP.NET Core. Esse componente injeta referências especiais <script> em cada solicitação de página vinda do servidor. Você pode ver as referências de script selecionando Exibir origem no navegador e rolando até o final do conteúdo da marca <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>

Seus arquivos de origem não foram modificados. O componente middleware injeta as referências de script dinamicamente.

Como o código do lado do navegador é todo escrito em JavaScript, ele funciona em todos os navegadores que SignalR suporta, sem a necessidade de um plug-in do navegador.

  • Última atualização em