Nota:
El acceso a esta página requiere autorización. Puede intentar iniciar sesión o cambiar directorios.
El acceso a esta página requiere autorización. Puede intentar cambiar los directorios.
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
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. Usa el enlace del navegador 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 código fuente 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
Usa Link del navegador 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.
Cómo usar el enlace del navegador
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:
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 Debug Target:
Para abrir varios exploradores a la vez, elija Abrir 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:
En la siguiente captura de pantalla se muestran Visual Studio con la vista Index abierta y dos exploradores abiertos:
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:
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:
La característica vínculo del explorador 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.
El panel de enlace del navegador
Abra la ventana panel de vínculo del navegador desde el menú desplegable de Browser Link para administrar la conexión con los exploradores abiertos:
Los exploradores conectados aparecen enumerados con la ruta de acceso a la página que se está mostrando en cada explorador:
También puede hacer clic en un nombre de explorador para actualizar solo ese explorador.
Activar o desactivar vínculo del navegador
Si vuelve a habilitar Vínculo de explorador después de deshabilitarlo, deberá actualizar los exploradores para conectarlos de nuevo.
Activar o desactivar 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 procedente 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 Browser Link para:
- Actualiza tu aplicación web en varios exploradores a la vez.
- Probar en varios navegadores 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 código fuente con los que está correlacionado en Visual Studio.
- Automatice las pruebas del navegador en tiempo real. El Browser Link también es extensible.
Configuración de Browser Link
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.
Cómo usar Browser Link
Si tiene un proyecto de ASP.NET Core abierto, Visual Studio muestra el control de la barra de herramientas de Browser Link junto al de destino de depuración:
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 Debug Target:
Para abrir varios exploradores a la vez, elija Abrir 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:
La siguiente captura de pantalla muestra Visual Studio con la vista Index abierta y dos exploradores abiertos:
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:
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:
Browser Link también funciona con los exploradores que inicie desde fuera de Visual Studio y naveguen a la dirección URL de la aplicación.
Panel de control de Browser Link
Abra la ventana Browser Link Dashboard desde el menú desplegable de Browser Link para administrar la conexión con los exploradores abiertos:
Si no hay ningún navegador conectado, puede iniciar una sesión que no sea de depuración seleccionando el vínculo Ver en el navegador:
De lo contrario, los exploradores conectados se muestran con la ruta de acceso a la página que se está mostrando en cada explorador:
También puede hacer clic en un nombre de explorador para actualizar solo ese explorador.
Habilitar o deshabilitar Browser Link
Si vuelve a habilitar Browser Link 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
Browser Link usa SignalR para crear un canal de comunicación entre Visual Studio y el explorador. Si Browser Link está habilitado, Visual Studio actuará como un servidor 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 enviada desde el 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 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.
Colaborar con nosotros en GitHub
El origen de este contenido se puede encontrar en GitHub, donde también puede crear y revisar problemas y solicitudes de incorporación de cambios. Para más información, consulte nuestra guía para colaboradores.
