Compartir a través de

Uso de herramientas para desarrolladores de exploradores con aplicaciones Blazor Hybrid de ASP.NET Core

  • Artículo

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 9 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 9 de este artículo.

Importante

Esta información hace referencia a un producto en versión preliminar, el cual puede sufrir importantes modificaciones antes de que se publique la versión comercial. Microsoft no proporciona ninguna garantía, expresa o implícita, con respecto a la información proporcionada aquí.

Para la versión actual, consulte la versión de .NET 9 de este artículo.

En este artículo se explica cómo usar las herramientas para desarrolladores de exploradores con aplicaciones Blazor Hybrid.

Herramientas para desarrolladores de exploradores con .NET MAUIBlazor

Asegúrate de que el proyecto Blazor Hybrid está configurado para admitir las herramientas para desarrolladores de exploradores. Para confirmar la compatibilidad con las herramientas de desarrollo, busca en la aplicación AddBlazorWebViewDeveloperTools.

Si el proyecto aún no está configurado para las herramientas de desarrollo del explorador, agrega compatibilidad con lo siguiente:

  1. Buscar dónde se realiza la llamada a AddMauiBlazorWebView, probablemente dentro del archivo MauiProgram.cs de la aplicación.

  2. En la parte superior del archivo MauiProgram.cs, confirma la presencia de una instrucción using para Microsoft.Extensions.Logging. Si la instrucción using no está presente, agrégala a la parte superior del archivo:

    using Microsoft.Extensions.Logging;

  3. Después de la llamada a AddMauiBlazorWebView, agrega el código siguiente:

    #if DEBUG
    builder.Services.AddBlazorWebViewDeveloperTools();
    builder.Logging.AddDebug();
#endif

Para usar las herramientas para desarrolladores de exploradores con una aplicación Windows:

  1. Ejecuta la aplicación de .NET MAUIBlazor Hybrid para Windows y ve a una página de la aplicación que use BlazorWebView. La consola de las herramientas de desarrollo no está disponible desde ContentPages sin una BlazorWeb View.

  2. Usa el método abreviado de teclado Ctrl+Mayús+I para abrir las herramientas para desarrolladores de exploradores.

  3. Las herramientas de desarrollo proporcionan una variedad de características para trabajar con aplicaciones, incluidos los recursos solicitados por la página, cuánto tiempo tardaron en cargarse los recursos y el contenido de los recursos cargados. En el ejemplo siguiente se muestra la pestaña Consola para ver los mensajes de la consola, que incluye los mensajes de excepción generados por el marco o el código para desarrolladores:

    Ventana de herramientas de desarrollo de Microsoft Edge para una aplicación Blazor Hybrid que se ejecuta en Windows

Para usar las herramientas para desarrolladores de exploradores con una aplicación Android:

  1. Inicia el emulador de Android y ve a una página de la aplicación que use BlazorWebView. La consola de las herramientas de desarrollo no está disponible desde ContentPages sin una BlazorWeb View.

  2. Abre Google Chrome o Microsoft Edge.

  3. Ve a chrome://inspect/#devices (Google Chrome) o edge://inspect/#devices (Microsoft Edge).

  4. Selecciona el botón de vínculo inspect para abrir las herramientas para desarrolladores. En el ejemplo siguiente se muestra la página DevTools en Microsoft Edge:

    Dispositivos de Microsoft Edge que muestra el botón de vínculo

  5. Las herramientas de desarrollo proporcionan una variedad de características para trabajar con aplicaciones, incluidos los recursos solicitados por la página, cuánto tiempo tardaron en cargarse los recursos y el contenido de los recursos cargados. En el ejemplo siguiente se muestra la pestaña Consola para ver los mensajes de la consola, que incluye los mensajes de excepción generados por el marco o el código para desarrolladores:

    Ventana de herramientas de desarrollo de Microsoft Edge para una aplicación Blazor Hybrid que se ejecuta en un emulador de Pixel 5

Para usar las herramientas para desarrolladores de Safari con una aplicación iOS:

  1. Abre Safari de escritorio.

  2. Activa la casilla Safari>Preferencias>Avanzado>Mostrar el menú Desarrollo en la barra de menús.

  3. Ejecuta la aplicación de .NET MAUIBlazor Hybrid en el simulador de iOS y ve a una página de la aplicación que use BlazorWebView. La consola de las herramientas de desarrollo no está disponible desde ContentPages sin una BlazorWeb View.

  4. Vuelve a Safari. Selecciona Desarrollar>{REMOTE INSPECTION TARGET}>0.0.0.0, donde el marcador de posición {REMOTE INSPECTION TARGET} es el nombre simple del dispositivo (por ejemplo, MacBook Pro) o el número de serie del dispositivo (por ejemplo, XMVM7VFF10). Si hay varias entradas para 0.0.0.0, selecciona la entrada que resalta BlazorWebView. BlazorWebView se resalta en azul en el simulador de iOS cuando se selecciona la entrada 0.0.0.0 correcta.

    Se abre Safari Developer Simulator y muestra dos entradas para

  5. Aparece la ventana Inspector web para BlazorWebView.

  6. Las herramientas de desarrollo proporcionan una variedad de características para trabajar con aplicaciones, incluidos los recursos solicitados por la página, cuánto tiempo tardaron en cargarse los recursos y el contenido de los recursos cargados. En el ejemplo siguiente se muestra la pestaña Consola, que incluye los mensajes de excepción generados por el marco o el código de desarrollador:

    Ventanas del Simulador e Inspector de Safari Web para una aplicación Blazor Hybrid que se ejecuta en un emulador de iPad mini

Agrega la clave com.apple.security.get-task-allow, de tipo Boolean, al archivo de derechos de la aplicación para su compilación de depuración.

Para agregar un archivo de derechos con la clave com.apple.security.get-task-allow, agrega el siguiente archivo XML denominado Entitlements.Debug.plist a la carpeta Platforms/MacCatalyst del proyecto.

Platforms/MacCatalyst/Entitlements.Debug.plist:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>com.apple.security.get-task-allow</key>
    <true/>
</dict>
</plist>

Para consumir el archivo de derechos para las compilaciones de depuración en Mac Catalyst, agrega el nodo <PropertyGroup> siguiente al archivo de proyecto de la aplicación como elemento secundario del nodo <Project>:

<PropertyGroup Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'maccatalyst' and '$(Configuration)' == 'Debug'">
    <CodeSignEntitlements>Platforms/MacCatalyst/Entitlements.Debug.plist</CodeSignEntitlements>
</PropertyGroup>

Para usar las herramientas de desarrollo de Safari con una aplicación macOS:

  1. Abre Safari de escritorio.

  2. Activa la casilla Safari>Preferencias>Avanzado>Mostrar el menú Desarrollo en la barra de menús.

  3. Ejecuta la aplicación .NET MAUIBlazor Hybrid en macOS.

  4. Vuelve a Safari. Selecciona Desarrollar>{REMOTE INSPECTION TARGET}>0.0.0.0, donde el marcador de posición {REMOTE INSPECTION TARGET} es el nombre simple del dispositivo (por ejemplo, MacBook Pro) o el número de serie del dispositivo (por ejemplo, XMVM7VFF10). Si hay varias entradas para 0.0.0.0, selecciona la entrada que resalta BlazorWebView. BlazorWebView se resalta en azul en macOS cuando se selecciona la entrada 0.0.0.0 correcta.

  5. Aparece la ventana Inspector web para BlazorWebView.

  6. Las herramientas de desarrollo proporcionan una variedad de características para trabajar con aplicaciones, incluidos los recursos solicitados por la página, cuánto tiempo tardaron en cargarse los recursos y el contenido de los recursos cargados. En el ejemplo siguiente se muestra la pestaña Consola, que incluye los mensajes de excepción generados por el marco o el código de desarrollador:

    Inspector web de Safari para una aplicación Blazor Hybrid

Recursos adicionales