Visual Studio 2013: Browser Link

Una de las novedades que acompañan a Visual Studio 2013 es Browser Link, la cual crea un canal de comunicación con los distintos navegadores que tengamos instalados, con el único objetivo de refrescar todos a la vez desde el propio Visual Studio.

Dependiendo del tipo de aplicación con la que estemos trabajando, la configuración puede estar activada o no: Si estamos desarrollando una aplicación sobre .NET, bajo el framework 4.0 o superior, la configuración estará disponible por defecto. Sin embargo, si tenemos elementos estáticos en nuestra solución (páginas HTML por ejemplo) será necesario añadir el siguiente handler en el archivo Web.config:

  <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>

Lanzando varios navegadores a la vez

El siguiente paso es elegir los navegadores con los que queremos establecer la conexión. Para ello, debemos utilizar el combo que aparece en el menú de Visual Studio y seleccionar Browse With…

Browse With

Se abrirá un cuadro de diálogo donde podremos escoger los navegadores deseados, manteniendo pulsada la tecla Control.

Browse With selection

Una vez hagamos clic en Browse, se lanzarán todos los navegadores seleccionados ejecutando nuestro sitio web. Cuando esto ocurre, en todos ellos se inyectará un script que les permitirá, a través de la tecnología SignalR, estar comunicados con nuestro IDE:

<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Chrome"}
</script>
<script type="text/javascript" src="http://localhost:6297/ca0ec32f81d34d76a0d6e8241fc3d4ba/browserLink" async="async"></script>
<!-- End Browser Link -->

Para ver más información sobre el atributo async, puedes hacerlo en este post.

Para refrescar los navegadores, basta con hacer clic en el siguiente botón de la barra de tareas:

Refresh all - Browser link

Browser Link Dashboard

Si queremos tener más control sobre los navegadores enlazados, podemos hacer uso de Browser Link Dashboard, pestaña que podemos activar a través del mismo botón, haciendo clic en la flecha que lo acompaña:

Browser Link Dashboard menu

Se abrirá esta nueva ventana dentro de Visual Studio 2013 donde aparecen listados todos los navegadores conectados:

Browser Link Dashboard

En esta captura están asociados Internet Explorer 12, Chrome, Safari, Opera y Firefox. Sin embargo, si nos fijamos en la captura anterior, aparece Chrome duplicado. El motivo es que Opera tiene el mismo appName que Chrome (se puede ver el appName asociado a cada navegador en el fragmento del código mostrado anteriormente).

Cada uno de ellos tendrá la opción de Refresh por separado, en el caso de que sólo necesitemos que uno de ellos sea actualizado.

Browser Link Dashboard Refresh browser

Espero que sea de utilidad.

¡Saludos!