Compartilhar via

Usando o Link do Navegador no Visual Studio 2013

  • Artigo

O Link do Navegador é um novo recurso em 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 depuração.

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

Para depurar com vários navegadores, selecione Procurar Com. Na caixa de diálogo Procurar com , mantenha pressionada a tecla CTRL para selecionar mais de um navegador. Clique em Procurar 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 Procurar com, com a instrução selecionar um ou mais e três navegadores realçados e selecionados.

Os controles do Link do Navegador estão localizados na lista suspensa com o ícone de seta circular. 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 o mouse passando o mouse sobre o botão. A dica de ferramenta mostra 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 <título h1> para a home page:

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 exibidas 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 Link do Navegador dashboard mostra informações sobre as conexões do Link do Navegador. Para exibir o dashboard, selecione o menu suspenso Link do Navegador (a seta pequena ao lado do botão Atualizar). Em seguida, clique em 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 dashboard lista os Navegadores conectados e a URL para a qual cada navegador navegou.

Captura de tela do Painel de Link do Navegador, com navegadores conectados e você é l para o qual cada navegador navegou exibido.

A seção Pré-requisitos mostra 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 "depuração" é 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 Habilitar Link do Navegador exibido e desmarcado no menu suspenso Link do 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 depuração como 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. O Link do Navegador também registra um módulo HTTP com 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 origem 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 nenhum plug-in do navegador.