Nota
O acesso a esta página requer autorização. Pode tentar iniciar sessão ou alterar os diretórios.
O acesso a esta página requer autorização. Pode tentar alterar os diretórios.
Observação
Esta não é a versão mais recente deste artigo. Para a versão atual, consulte a versão .NET 10 deste artigo.
Advertência
Esta versão do ASP.NET Core não é mais suportada. 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 .NET 9 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 ambiente de desenvolvimento e um ou mais navegadores da web. Utilize o link do navegador para:
- Atualize seu aplicativo Web em vários navegadores ao mesmo tempo.
- Teste em vários navegadores com configurações específicas, como tamanhos de tela.
- Selecione os elementos da interface do utilizador em navegadores, em tempo real, e veja a que marcação e origem eles estão correlacionados no Visual Studio.
- Conduza a automação de testes de navegador em tempo real.
Compilação em tempo de execução vs. recarga a quente
Use a ligação do navegador com compilação de tempo de execução ou recarregamento a quente para ver o efeito de alterações em tempo de execução em Razor (.cshtml) arquivos. Recomendamos o recarregamento em tempo real.
Como usar o link do navegador
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 :
A partir do controlo da barra de links do navegador, podes:
- Atualize o aplicativo Web em vários navegadores ao mesmo tempo.
- Abra o Painel de links do navegador.
- Ative ou desative o Browser Link.
- Ative ou desative o CSS Hot Reload.
Atualize o aplicativo Web em vários navegadores ao mesmo tempo
Para escolher um único navegador da Web para iniciar ao iniciar o projeto, use o menu suspenso no controle da barra de ferramentas Debug Target :
Para abrir vários navegadores ao mesmo tempo, escolha Navegar com... no mesmo menu pendente. Mantenha pressionada a tecla Ctrl para selecionar os navegadores desejados e clique em Procurar:
A captura de tela a seguir mostra o Visual Studio com o modo de exibição Índice aberto e dois navegadores abertos:
Passe o cursor sobre o controle da barra de ferramentas de link do navegador para ver os navegadores que estão conectados ao projeto:
Altere a visualização do Índice e todos os navegadores conectados serão atualizados quando clicares no botão de atualizar do link do navegador.
O link do navegador também funciona com navegadores lançados fora do Visual Studio, desde que se navegue até o URL da aplicação.
O painel de links do navegador
Abra a janela do dashboard de links do navegador no menu dropdown de links do navegador para gerenciar a conexão com os navegadores abertos:
Os navegadores conectados são mostrados com o caminho para a página que cada navegador está mostrando:
Você também pode clicar em um nome de navegador individual para atualizar apenas esse navegador.
Ativar ou desativar o link do navegador
Ao reativar o link do navegador depois de desativá-lo, você deve atualizar os navegadores para reconectá-los.
Ativar ou desativar a recarga a quente de CSS
Quando o CSS hot reload está ativado, os navegadores conectados são atualizados automaticamente quando se 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 SignalR servidor ao qual vários clientes (navegadores) podem se conectar. O link do navegador também registra um componente de middleware no pipeline de solicitação do ASP.NET Core. Este componente injeta referências especiais <script> em cada solicitação de página do servidor. Você pode ver as referências de script selecionando Exibir fonte no navegador e rolando até o final do conteúdo da <body> tag:
<!-- 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 são modificados. O componente middleware injeta as referências de script dinamicamente.
Como o código do lado do navegador é todo JavaScript, ele funciona em todos os navegadores que SignalR suportam sem a necessidade de um plug-in do navegador.
Por Nicolò Carandini e Tom Dykstra
Browser Link é um recurso do Visual Studio. Ele cria um canal de comunicação entre o ambiente de desenvolvimento e um ou mais navegadores da web. Use o link do navegador para:
- Atualize seu aplicativo Web em vários navegadores ao mesmo tempo.
- Teste em vários navegadores com configurações específicas, como tamanhos de tela.
- Selecione os elementos da interface do utilizador em navegadores, em tempo real, e veja a que marcação e origem eles estão correlacionados no Visual Studio.
- Conduza a automação de testes de navegador em tempo real. O Browser Link também é extensível.
Configuração do Browser Link
Adicione o pacote Microsoft.VisualStudio.Web.BrowserLink ao seu projeto. Para páginas ASP.NET Core Razor ou projetos MVC, habilite também a compilação em tempo de execução de arquivos Razor conforme descrito na compilação de .cshtml no arquivo Razor.
Razor As alterações de sintaxe são aplicadas somente quando a compilação em tempo de execução foi habilitada.
Ao converter um projeto do ASP.NET Core 2.0 para o 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 Browser Link. Os modelos de projeto ASP.NET Core 2.1 usam o Microsoft.AspNetCore.App metapacote por padrão.
Os modelos de projeto ASP.NET Core 2.0 Web Application, Empty e Web API usam o metapacote Microsoft.AspNetCore.All, que contém uma referência de pacote para Microsoft.VisualStudio.Web.BrowserLink. Portanto, usar o Microsoft.AspNetCore.All metapacote não requer nenhuma ação adicional para tornar o Browser Link disponível para uso.
O modelo de projeto Aplicativo Web 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 ao Microsoft.VisualStudio.Web.BrowserLink.
Configuração
Chame UseBrowserLink no método Startup.Configure:
app.UseBrowserLink();
A UseBrowserLink chamada é normalmente colocada dentro de um bloco if que só ativa o Browser Link no ambiente de desenvolvimento. Por exemplo:
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
app.UseBrowserLink();
}
Para obter mais informações, consulte ASP.NET Core runtime environments.
Como usar o Browser Link
Quando você tem um projeto ASP.NET Core aberto, o Visual Studio mostra o controle da barra de ferramentas Link do navegador ao lado do controle da barra de ferramentas Debug Target :
No controle da barra de ferramentas Link do navegador, você pode:
- Atualize o aplicativo Web em vários navegadores ao mesmo tempo.
- Abra o Painel de links do navegador.
- Ative ou desative o Browser Link. Nota: O link do navegador está desativado por padrão no Visual Studio.
- Habilite ou desabilite a Sincronização Automática CSS.
Atualize o aplicativo Web em vários navegadores ao mesmo tempo
Para escolher um único navegador da Web para iniciar ao iniciar o projeto, use o menu suspenso no controle da barra de ferramentas Debug Target :
Para abrir vários navegadores ao mesmo tempo, escolha Navegar com... no mesmo menu pendente. Mantenha pressionada a tecla Ctrl para selecionar os navegadores desejados e clique em Procurar:
A captura de tela a seguir mostra o Visual Studio com o modo de exibição Índice aberto e dois navegadores abertos:
Passe o cursor sobre o controle da barra de ferramentas Link do navegador para ver os navegadores conectados ao projeto:
Altere a visualização do Índice e todos os navegadores conectados serão atualizados quando clicar no botão de atualização do Browser Link.
O Browser Link também funciona com navegadores que você inicia de fora do Visual Studio e navega até a URL do aplicativo.
O painel de links do navegador
Abra a janela Painel de controle do Browser Link no menu de opções Browser Link para gerenciar a conexão com navegadores abertos:
Se nenhum navegador estiver conectado, você poderá iniciar uma sessão sem depuração selecionando o link Exibir no navegador :
Caso contrário, os navegadores conectados são mostrados com o caminho para a página que cada navegador está mostrando:
Você também pode clicar em um nome de navegador individual para atualizar apenas esse navegador.
Ativar ou desativar o Browser Link
Ao reativar o Browser Link depois de desativá-lo, você deve atualizar os navegadores para reconectá-los.
Ativar ou desativar a Sincronização Automática CSS
Quando a Sincronização Automática CSS está ativada, os navegadores conectados são atualizados automaticamente quando você faz qualquer alteração nos arquivos CSS.
Como funciona
O Browser Link é usado 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 SignalR servidor ao qual vários clientes (navegadores) podem se conectar. O Browser Link também registra um componente de middleware no pipeline de solicitações do ASP.NET Core. Este componente injeta referências especiais <script> em cada solicitação de página do servidor. Você pode ver as referências de script selecionando Exibir fonte no navegador e rolando até o final do conteúdo da <body> tag:
<!-- 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 são modificados. O componente middleware injeta as referências de script dinamicamente.
Como o código do lado do navegador é todo JavaScript, ele funciona em todos os navegadores que SignalR suportam sem a necessidade de um plug-in do navegador.
Colabore connosco no GitHub
A origem deste conteúdo pode ser encontrada no GitHub, onde também pode criar e rever problemas e pedidos Pull. Para mais informações, consulte o nosso guia do contribuidor.
