Browser Link en ASP.NET Core

Nota

Esta no es la versión más reciente de este artículo. Para la versión actual, consulte la versión de .NET 10 de este artículo.

Advertencia

Esta versión de ASP.NET Core ya no se admite. Para obtener más información, consulte la directiva de compatibilidad de .NET y .NET Core. Para la versión actual, consulte la versión de .NET 10 de este artículo.

Por Nicolò Carandini y Tom Dykstra

Vínculo con exploradores es una característica de Visual Studio. Crea un canal de comunicación entre el Development entorno y uno o varios exploradores web. Use Vínculo con exploradores para lo siguiente:

  • Actualiza tu aplicación web en varios exploradores a la vez.
  • Realice pruebas en varios navegadores con configuraciones específicas, como los tamaños de pantalla.
  • Seleccionar elementos de interfaz de usuario en exploradores en tiempo real y ver el marcado y el origen con los que está correlacionado en Visual Studio.
  • Realizar la automatización de pruebas de exploradores en tiempo real.

Compilación en tiempo de ejecución frente a recarga en caliente

Use Vínculo con exploradores con compilación en tiempo de ejecución o recarga activa para ver el efecto de los cambios en tiempo de ejecución en los archivos de Razor (.cshtml). Se recomienda hot reload.

Si tiene un proyecto de ASP.NET Core abierto, Visual Studio muestra el control de la barra de herramientas Vínculo del explorador junto al de Tipo de depuración:

menú desplegable de enlace del navegador

Desde el control de vínculo del explorador de la barra de herramientas, puede realizar las siguientes acciones:

  • Actualizar la aplicación web en varios exploradores a la vez.
  • Abra el Browser Link Dashboard.
  • Habilitar o deshabilitar Browser Link.
  • Active o desactive CSS Recarga activa.

Actualiza la aplicación web en varios exploradores a la vez

Para elegir un único explorador web que se inicie al abrir el proyecto, use el menú desplegable del control de la barra de herramientas de destino de depuración:

Menú desplegable F5

Para abrir varios exploradores a la vez, elija Examinar con… en el mismo menú desplegable. Mantenga presionada la tecla Ctrl para seleccionar los navegadores que quiera y, a continuación, haga clic en Examinar:

Abre muchos navegadores a la vez

En la siguiente captura de pantalla se muestran Visual Studio con la vista Index abierta y dos exploradores abiertos:

Ejemplo de sincronización con dos exploradores

Pase el mouse por encima del control de la barra de herramientas de Enlace del explorador para ver los exploradores que están conectados al proyecto:

Sugerencia que se muestra al pasar el mouse

Cambie la vista de índice; todos los navegadores conectados se actualizarán cuando haga clic en el botón de actualización del vínculo del navegador:

Los navegadores se sincronizan con los cambios

La característica Vínculo con exploradores también funciona con los exploradores que se inician desde fuera de Visual Studio y navegan a la dirección URL de la aplicación.

Abra la ventana Panel de Vínculo con exploradores desde el menú desplegable de la característica para administrar la conexión con los exploradores abiertos:

how-to-open-browserlink-dashboard

Los exploradores conectados aparecen enumerados con la ruta de acceso a la página que se está mostrando en cada explorador:

Panel del enlace del navegador con dos conexiones

También puede hacer clic en un nombre de explorador para actualizar solo ese explorador.

Si vuelve a habilitar Vínculo con exploradores después de deshabilitarlo, deberá actualizar los exploradores para conectarlos de nuevo.

Habilitación o deshabilitación de la recarga activa de CSS

Si se habilita la recarga en caliente de CSS, los exploradores conectados se actualizarán automáticamente al realizar cualquier cambio en los archivos CSS.

Funcionamiento

El enlace del explorador usa SignalR para crear un canal de comunicación entre Visual Studio y el explorador. Cuando Browser Link está habilitado, Visual Studio actúa como un servidor SignalR al que pueden conectarse varios clientes (exploradores). Browser Link también registra un componente de middleware en la canalización de solicitudes de ASP.NET Core. Este componente inserta referencias especiales de <script> en cada solicitud de página del servidor. Para ver las referencias de script, seleccione Ver código fuente en el explorador y desplácese hasta el final del contenido de la etiqueta <body>:

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

Tus archivos fuente no se han modificado. El componente de middleware inserta las referencias de script dinámicamente.

Dado que el código del explorador es JavaScript, funciona en todos los exploradores que admite SignalR sin requerir un complemento de explorador.

Por Nicolò Carandini y Tom Dykstra

Browser Link es una característica de Visual Studio. Crea un canal de comunicación entre el Development entorno y uno o varios exploradores web. Use Vínculo con exploradores para:

  • Actualiza tu aplicación web en varios exploradores a la vez.
  • Probar en varios exploradores con una configuración específica como los tamaños de pantalla.
  • Seleccionar elementos de interfaz de usuario en exploradores en tiempo real y ver el marcado y el origen con los que está correlacionado en Visual Studio.
  • Realizar la automatización de pruebas de exploradores en tiempo real. El Browser Link también es extensible.

Agregue el paquete Microsoft.VisualStudio.Web.BrowserLink a su proyecto. En los proyectos de Razor Pages o MVC de ASP.NET Core, habilite también la compilación en tiempo de ejecución de los archivos de Razor (.cshtml), como se explica en Compilación de archivos Razor en ASP.NET Core. Los cambios en la sintaxis de Razor solo se aplican cuando está habilitada la compilación en tiempo de ejecución.

Al convertir un proyecto de ASP.NET Core 2.0 en ASP.NET Core 2.1 y pasar al metapaquete Microsoft.AspNetCore.App, instale el paquete Microsoft.VisualStudio.Web.BrowserLink para la funcionalidad de Browser Link. De forma predeterminada, las plantillas de proyecto de ASP.NET Core 2.1 usan el metapaquete Microsoft.AspNetCore.App.

Las plantillas de proyecto Aplicación web, Vacío y API web de ASP.NET Core 2.0 usan el metapaquete Microsoft.AspNetCore.All, que contiene una referencia de paquete a Microsoft.VisualStudio.Web.BrowserLink. Por lo tanto, el uso del metapaquete Microsoft.AspNetCore.All no requiere ninguna acción adicional para que Browser Link esté disponible para su uso.

La plantilla de proyecto de aplicación web de ASP.NET Core 1.x tiene una referencia de paquete al paquete Microsoft.VisualStudio.Web.BrowserLink. Otros tipos de proyectos requieren que agregues una referencia de paquete a Microsoft.VisualStudio.Web.BrowserLink.

Configuración

Llame a UseBrowserLink en el método Startup.Configure:

app.UseBrowserLink();

La llamada UseBrowserLink normalmente se coloca dentro de un bloque if que solo habilita Browser Link en el entorno Development. Por ejemplo:

if (env.IsDevelopment())
{
    app.UseDeveloperExceptionPage();
    app.UseBrowserLink();
}

Para obtener más información, consulte entornos de tiempo de ejecución de ASP.NET Core.

Si tiene un proyecto de ASP.NET Core abierto, Visual Studio muestra el control de la barra de herramientas de Vínculo con exploradores junto al de destino de depuración:

Menú desplegable de Browser Link

Desde el control de la barra de herramientas de Browser Link, puede realizar las siguientes acciones:

  • Actualizar la aplicación web en varios exploradores a la vez.
  • Abra el Browser Link Dashboard.
  • Habilitar o deshabilitar Browser Link. Nota: Browser Link está deshabilitado de forma predeterminada en Visual Studio.
  • Habilitar o deshabilitar la sincronización automática de CSS.

Actualiza la aplicación web en varios exploradores a la vez

Para elegir un único explorador web que se inicie al abrir el proyecto, use el menú desplegable del control de la barra de herramientas de destino de depuración:

Menú desplegable F5

Para abrir varios exploradores a la vez, elija Examinar con… en el mismo menú desplegable. Mantenga presionada la tecla Ctrl para seleccionar los navegadores que quiera y, a continuación, haga clic en Examinar:

Abrir varios navegadores a la vez

La siguiente captura de pantalla muestra Visual Studio con la vista Index abierta y dos exploradores abiertos:

Ejemplo de sincronización con dos exploradores

Pase el mouse por encima del control de la barra de herramientas de Browser Link para ver los exploradores que están conectados al proyecto:

Sugerencia que se muestra al pasar el mouse

Cambie la vista de índice; todos los exploradores conectados se actualizarán cuando haga clic en el botón de actualización de Browser Link:

Los navegadores se sincronizan con los cambios

La característica Vínculo con exploradores también funciona con los exploradores que se inician desde fuera de Visual Studio y navegan a la dirección URL de la aplicación.

Abra la ventana Browser Link Dashboard desde el menú desplegable de Browser Link para administrar la conexión con los exploradores abiertos:

open-browserslink-dashboard

Si no hay ningún explorador conectado, puede iniciar una sesión que no sea de depuración seleccionando el vínculo Ver en el explorador:

Panel de BrowserLink: sin conexiones

De lo contrario, los exploradores conectados se muestran con la ruta de acceso a la página que se está mostrando en cada explorador:

Panel de BrowserLink: dos conexiones

También puede hacer clic en un nombre de explorador para actualizar solo ese explorador.

Si vuelve a habilitar Vínculo con exploradores después de deshabilitarlo, debe actualizar los exploradores para conectarlos de nuevo.

Activar o desactivar la sincronización automática de CSS

Si se habilita la sincronización automática de CSS, los navegadores conectados se actualizarán automáticamente al realizar cualquier cambio en los archivos CSS.

Funcionamiento

Vínculo con exploradores usa SignalR para crear un canal de comunicación entre Visual Studio y el explorador. Si Vínculo con exploradores está habilitado, Visual Studio actuará como un servidor de SignalR al que se pueden conectar varios clientes (exploradores). Browser Link también registra un componente de middleware en la canalización de solicitudes de ASP.NET Core. Este componente inserta referencias especiales de <script> en cada solicitud de página del servidor. Para ver las referencias de script, seleccione Ver código fuente en el explorador y desplácese hasta el final del contenido de la etiqueta <body>:

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

Los archivos de código fuente no se modifican. El componente de middleware inserta las referencias de script dinámicamente.

Dado que el código del explorador es JavaScript, funciona en todos los exploradores que admite SignalR sin requerir un complemento de explorador.

  • Se actualizó por última vez el