Uso del vínculo del explorador en Visual Studio 2013

Browser Link es una nueva característica de Visual Studio 2013 que crea un canal de comunicación entre el entorno de desarrollo y uno o varios exploradores web. Puede usar Browser Link para actualizar la aplicación web en varios exploradores a la vez, lo que resulta útil para las pruebas entre exploradores.

Actualización del explorador

Con la actualización del explorador, puede actualizar varios exploradores que están conectados a Visual Studio a través del vínculo del explorador.

Para usar la actualización del explorador, cree primero una aplicación de ASP.NET mediante cualquiera de las plantillas de proyecto. Para depurar la aplicación, presione F5 o haga clic en el icono de flecha de la barra de herramientas:

Captura de pantalla de Visual Studio, con el icono de flecha resaltado en la barra de herramientas para ilustrar el proceso de depuración de aplicaciones.

También puede usar la lista desplegable para seleccionar un explorador específico para la depuración.

Captura de pantalla de Visual Studio, con el icono de flecha resaltado en la barra de herramientas y el menú desplegable que muestra la lista del explorador.

Para depurar con varios navegadores, seleccione Navegar con. En el cuadro de diálogo Examinar con , mantenga presionada la tecla CTRL para seleccionar más de un explorador. Haga clic en Examinar para depurar con los exploradores seleccionados. Browser Link también funciona si inicia un explorador desde fuera de Visual Studio y navega a la dirección URL de la aplicación.

Captura de pantalla del cuadro de diálogo Examinar con, con la instrucción seleccionar uno o varios exploradores y tres exploradores resaltados y seleccionados.

Los controles Browser Link se encuentran en la lista desplegable con el icono de flecha circular. El icono de flecha es el botón Actualizar .

Captura de pantalla de Visual Studio, con el botón Actualizar resaltado en rojo. El botón Actualizar es una flecha circular.

Para ver qué exploradores están conectados, mantenga el mouse sobre el botón Actualizar durante la depuración. Los exploradores conectados se muestran en una ventana de información sobre herramientas.

Captura de pantalla de Visual Studio, con el botón Actualizar resaltado para indicar que el ratón está sobre el botón. El tooltip muestra los navegadores conectados.

Para actualizar los exploradores conectados, haga clic en el botón Actualizar o presione CTRL+ALT+ENTRAR. Por ejemplo, en la captura de pantalla siguiente se muestra un proyecto de ASP.NET, que he creado con la plantilla de proyecto MVC 5. Puede ver la aplicación que se ejecuta en dos exploradores en la parte superior. En la parte inferior, el proyecto está abierto en Visual Studio.

Captura de pantalla de un proyecto de ASP.NET, con la aplicación ejecutándose en dos navegadores, uno al lado del otro, y el proyecto mostrado debajo en Visual Studio.

En Visual Studio, cambié el <título h1> de la página principal.

Captura de pantalla de Visual Studio, con un proyecto de A S P punto NET mostrado y con el encabezado H 1 resaltado.

Al hacer clic en el botón Actualizar , el cambio apareció en ambas ventanas del explorador:

Captura de pantalla de un proyecto de ASP.NET, con los cambios que aparecen en las ventanas del navegador mostradas lado a lado, y el proyecto mostrado abajo en Visual Studio.

Notas

  • Para habilitar Browser Link, establezca debug=true en el <elemento de compilación> del archivo Web.config del proyecto.
  • La aplicación debe ejecutarse en localhost.
  • La aplicación debe tener como destino .NET 4.0 o posterior.

El panel de control de Browser Link muestra información sobre las conexiones de Browser Link. Para ver el panel, seleccione el menú desplegable de Browser Link (la flecha pequeña situada junto al botón Actualizar). A continuación, haga clic en Panel de vínculos del explorador.

Captura de pantalla de Visual Studio, con el botón Actualizar resaltado y panel de vínculos del explorador resaltado en el menú desplegable.

El panel muestra los exploradores conectados y la dirección URL a la que ha navegado cada explorador.

Captura de pantalla del Panel de Browser Link, con navegadores conectados y la URL a la que ha navegado cada navegador.

En la sección Requisitos previos se muestran los pasos necesarios para habilitar Browser Link para ese proyecto. Por ejemplo, en la captura de pantalla siguiente se muestra un proyecto en el que "depurar" está establecido en false en el archivo Web.config.

Captura de pantalla del panel

Para habilitar Browser Link para archivos HTML estáticos, agregue lo siguiente al archivo 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 rendimiento, quite esta configuración al publicar el proyecto.

El vínculo del explorador está habilitado de forma predeterminada. Hay varias maneras de deshabilitarla:

  • En el menú desplegable Vínculo del explorador, desactive Habilitar vínculo del explorador.

    Captura de pantalla de Visual Studio, con Habilitar Browser Link mostrado y desactivado en el menú desplegable Browser Link.

  • En el archivo Web.config, agregue una clave denominada "vs:EnableBrowserLink" con el valor "false" en la sección appSettings.

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

  • En el archivo Web.config, establezca depurar en false.

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

¿Cómo funciona?

Browser Link usa SignalR para crear un canal de comunicación entre Visual Studio y el explorador. Cuando se habilita Browser Link, Visual Studio actúa como un servidor SignalR al que pueden conectarse varios clientes (exploradores). Browser Link también registra un módulo HTTP con ASP.NET. Este módulo inyecta referencias de <script> especiales en cada solicitud de página desde el servidor. Para ver las referencias de script, seleccione "Ver origen" en el explorador.

Captura de pantalla de visualización de la ventana de origen en el explorador, en la que se muestran referencias de script especiales insertadas por el módulo h t t p.

Los archivos de origen no se modifican. El módulo HTTP inserta las referencias de script dinámicamente.

Dado que el código del lado explorador es todo JavaScript, funciona en todos los exploradores compatibles con SignalR, sin necesidad de ningún complemento del explorador.

  • Last updated on