Compartilhar via

Usando o Link do Navegador no Visual Studio 2013

O Link do Navegador é um novo recurso no Visual Studio 2013 que cria um canal de comunicação entre o ambiente de desenvolvimento e um ou mais navegadores da Web. Você pode usar o Link do Navegador para atualizar seu aplicativo Web em vários navegadores ao mesmo tempo, o que é útil para testes entre navegadores.

Atualização do navegador

Com a Atualização do Navegador, você pode atualizar vários navegadores conectados ao Visual Studio por meio do Link do Navegador.

Para usar a Atualização do Navegador, primeiro crie um aplicativo ASP.NET usando qualquer um dos modelos de projeto. Depure o aplicativo pressionando F5 ou clicando no ícone de seta na barra de ferramentas:

Captura de tela do Visual Studio, com o ícone de seta realçado na barra de ferramentas para ilustrar o processo de depuração do aplicativo.

Você também pode usar a lista suspensa para selecionar um navegador específico para debugging.

Captura de tela do Visual Studio, com o ícone de seta realçado na barra de ferramentas e no menu suspenso exibindo a lista de navegadores.

Para depurar com vários navegadores, selecione Navegar Com. Na caixa de diálogo Procurar com, mantenha pressionada a tecla CTRL para selecionar mais de um navegador. Clique Navegar para depurar com os navegadores selecionados. O Link do Navegador também funcionará se você iniciar um navegador de fora do Visual Studio e navegar até a URL do aplicativo.

Captura de tela da caixa de diálogo Navegar com, com a instrução selecione um ou mais e três navegadores realçados e selecionados.

Os controles do Browser Link estão localizados na lista suspensa com o ícone circular de seta. O ícone de seta é o botão Atualizar .

Captura de tela do Visual Studio, com o botão Atualizar descrito em vermelho. O botão Atualizar é uma seta circular.

Para ver quais navegadores estão conectados, passe o mouse sobre o botão Atualizar durante a depuração. Os navegadores conectados são mostrados em uma janela ToolTip.

Captura de tela do Visual Studio, com o botão Atualizar realçado para indicar que o mouse está pairando sobre o botão. A dica de ferramenta mostra os navegadores conectados.

Para atualizar os navegadores conectados, clique no botão Atualizar ou pressione CTRL+ALT+ENTER. Por exemplo, a captura de tela a seguir mostra um projeto ASP.NET, que criei usando o modelo de projeto MVC 5. Você pode ver o aplicativo em execução em dois navegadores na parte superior. Na parte inferior, o projeto está aberto no Visual Studio.

Captura de tela do projeto A SP dot Net, com o aplicativo em execução em dois navegadores, lado a lado e projeto exibidos abaixo no Visual Studio.

No Visual Studio, alterei o <cabeçalho h1> para a página inicial:

Captura de tela do Visual Studio, com o projeto A SP dot Net exibido e o título H 1 realçado.

Quando cliquei no botão Atualizar , a alteração apareceu em ambas as janelas do navegador:

Captura de tela do projeto A SP dot Net, com alterações que aparecem nas janelas do navegador exibidas lado a lado e o projeto exibido abaixo no Visual Studio.

Observações

  • Para habilitar o Link do Navegador, defina debug=true no <elemento de compilação> no arquivo Web.config do projeto.
  • O aplicativo deve estar em execução no localhost.
  • O aplicativo deve ter como destino o .NET 4.0 ou posterior.

O painel do Browser Link mostra informações sobre as conexões do navegador. Para visualizar o painel, selecione o menu suspenso 'Link do Navegador' (a pequena seta ao lado do botão Atualizar). Em seguida, clique no Painel de Link do Navegador.

Captura de tela do Visual Studio, com o botão Atualizar realçado e o Painel de Link do Navegador realçado no menu suspenso.

O painel lista os Navegadores conectados e a URL para a qual cada navegador navegou.

Captura de tela do Painel de Links do Navegador, com navegadores conectados e a URL para a qual cada navegador navegou exibida.

A seção Pré-requisitos mostra todas as etapas necessárias para habilitar o Link do Navegador para esse projeto. Por exemplo, a captura de tela a seguir mostra um projeto em que "debug" é definido como false no arquivo Web.config.

Captura de tela do Painel de Link do Navegador, com a seção Pré-requisitos indicando que a depuração deve ser habilitada para o projeto.

Para habilitar o Link do Navegador para arquivos HTML estáticos, adicione o seguinte ao arquivo Web.config.

<configuration>
  <system.webServer>    
    <handlers>
      <add name="Browser Link for HTML" path="*.html" verb="*" 
           type="System.Web.StaticFileHandler, System.Web, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" 
           resourceType="File" preCondition="integratedMode" />
    </handlers>
  </system.webServer>    
</configuration>

Por motivos de desempenho, remova essa configuração ao publicar seu projeto.

O Link do Navegador está habilitado por padrão. Há várias maneiras de desabilitá-lo:

  • No menu suspenso Link do Navegador, desmarque Habilitar Link do Navegador.

    Captura de tela do Visual Studio, com a opção Conexão com Navegador exibida e desmarcada no menu suspenso Conexão com Navegador.

  • No arquivo Web.config, adicione uma chave chamada "vs:EnableBrowserLink" com o valor "false" na seção appSettings.

    <appSettings>
  <add key="vs:EnableBrowserLink" value="false"/>
</appSettings>

  • No arquivo Web.config, defina a opção debug para false.

    <system.web>
  <compilation debug="false" targetFramework="4.5" />
</system.web>

Como funciona?

O Link do Navegador usa o 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. Browser Link também registra um módulo HTTP com o ASP.NET. Este módulo injeta referências de script< especiais >em cada solicitação de página do servidor. Você pode ver as referências de script selecionando "Exibir origem" no navegador.

Captura de tela da janela Exibir o código-fonte no navegador, exibindo referências de script especiais injetadas pelo módulo h t t p.

Seus arquivos de origem não são modificados. O módulo HTTP injeta as referências de script dinamicamente.

Como o código do lado do navegador é todo JavaScript, ele funciona em todos os navegadores compatíveis com o SignalR, sem a necessidade de qualquer plug-in do navegador.

  • Last updated on