Compartilhar via

Usar ferramentas de desenvolvedor do navegador com ASP.NET Core Blazor Hybrid

  • Artigo

Observação

Esta não é a versão mais recente deste artigo. Para informações sobre a versão vigente, confira a Versão do .NET 8 deste artigo.

Aviso

Esta versão do ASP.NET Core não tem mais suporte. Para obter mais informações, confira .NET e a Política de Suporte do .NET Core. Para informações sobre a versão vigente, confira a Versão do .NET 8 deste artigo.

Importante

Essas informações relacionam-se ao produto de pré-lançamento, que poderá ser substancialmente modificado antes do lançamento comercial. A Microsoft não oferece nenhuma garantia, explícita ou implícita, quanto às informações fornecidas aqui.

Para informações sobre a versão vigente, confira a Versão do .NET 8 deste artigo.

Este artigo explica como usar ferramentas de desenvolvedor do navegador com aplicativos Blazor Hybrid.

Ferramentas de desenvolvedor do navegador com .NET MAUIBlazor

Verifique se o projeto Blazor Hybrid está configurado para dar suporte às ferramentas de desenvolvedor do navegador. Você pode confirmar o suporte às ferramentas de desenvolvedor pesquisando o aplicativo em busca de AddBlazorWebViewDeveloperTools.

Se o projeto ainda não estiver configurado para ferramentas de desenvolvedor do navegador, adicione suporte:

  1. Localizando onde a chamada para AddMauiBlazorWebView é feita, provavelmente dentro do arquivo MauiProgram.cs do aplicativo.

  2. Na parte superior do arquivo MauiProgram.cs, confirme a presença de uma instrução using para Microsoft.Extensions.Logging. Se a instrução using não estiver presente, adicione-a à parte superior do arquivo:

    using Microsoft.Extensions.Logging;

  3. Após a chamada AddMauiBlazorWebView, adicione o seguinte código:

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

Para usar as ferramentas de desenvolvedor do navegador com um aplicativo do Windows:

  1. Execute o aplicativo .NET MAUIBlazor Hybrid para Windows e navegue até uma página de aplicativo que usa um BlazorWebView. O console de ferramentas de desenvolvedor não está disponível em ContentPages sem um BlazorWeb View.

  2. Use o atalho de teclado Ctrl+Shift+I para abrir as ferramentas de desenvolvedor do navegador.

  3. As ferramentas de desenvolvedor fornecem uma variedade de recursos para trabalhar com aplicativos, incluindo quais ativos a página solicitou, quanto tempo os ativos levaram para carregar e o conteúdo dos ativos carregados. O exemplo a seguir mostra a guia Console para ver as mensagens do console, que inclui todas as mensagens de exceção geradas pela estrutura ou pelo código do desenvolvedor:

    Janela DevTools do Microsoft Edge para um aplicativo Blazor Hybrid em execução no Windows

Para usar as ferramentas de desenvolvedor do navegador com um aplicativo Android:

  1. Inicie o emulador do Android e navegue até uma página de aplicativo que usa um BlazorWebView. O console de ferramentas de desenvolvedor não está disponível em ContentPages sem um BlazorWeb View.

  2. Abra o Google Chrome ou o Microsoft Edge.

  3. Acesse chrome://inspect/#devices (Google Chrome) ou edge://inspect/#devices (Microsoft Edge).

  4. Selecione o botão de link inspect para abrir as ferramentas de desenvolvedor. O exemplo a seguir mostra a página DevTools no Microsoft Edge:

    Dispositivos do Microsoft Edge mostrando o botão de link

  5. As ferramentas de desenvolvedor fornecem uma variedade de recursos para trabalhar com aplicativos, incluindo quais ativos a página solicitou, quanto tempo os ativos levaram para carregar e o conteúdo dos ativos carregados. O exemplo a seguir mostra a guia Console para ver as mensagens do console, que inclui todas as mensagens de exceção geradas pela estrutura ou pelo código do desenvolvedor:

    Janela DevTools do Microsoft Edge para um aplicativo Blazor Hybrid em execução em um Pixel 5 emulado

Para usar as ferramentas para desenvolvedores do Safari com um aplicativo iOS:

  1. Abra o Safari para desktop.

  2. Marque a caixa de seleção Safari>Preferências>Avançado>Mostrar menu Desenvolver na barra de menus.

  3. Execute o aplicativo .NET MAUIBlazor Hybrid no simulador do iOS e navegue até uma página do aplicativo que usa um BlazorWebView. O console de ferramentas de desenvolvedor não está disponível em ContentPages sem um BlazorWeb View.

  4. Retorne ao Safari. Selecione Desenvolver>{REMOTE INSPECTION TARGET}>0.0.0.0, onde o espaço reservado {REMOTE INSPECTION TARGET} é o nome simples dos dispositivos (por exemplo, MacBook Pro) ou o número de série do dispositivo (por exemplo, XMVM7VFF10). Se houver várias entradas para 0.0.0.0, selecione a entrada que realça o BlazorWebView. BlazorWebView é realçado em azul no simulador do iOS quando a entrada correta 0.0.0.0 está selecionada.

    O Simulador Safari Develop é aberto mostrando duas entradas para

  5. A janela Inspetor da Web é exibida para o BlazorWebView.

  6. As ferramentas de desenvolvedor fornecem uma variedade de recursos para trabalhar com aplicativos, incluindo quais ativos a página solicitou, quanto tempo os ativos levaram para carregar e o conteúdo dos ativos carregados. O exemplo a seguir mostra a guia Console, que inclui todas as mensagens de exceção geradas pela estrutura ou pelo código do desenvolvedor:

    Janelas do Inspetor da Web e Simulador do Safari para um aplicativo Blazor Hybrid em execução em um iPad mini

Adicione a chave com.apple.security.get-task-allow, do tipo Boolean, ao arquivo de direitos do aplicativo para seu build de depuração.

Para adicionar um arquivo de direitos com a chave com.apple.security.get-task-allow, adicione o arquivo XML a seguir chamado Entitlements.Debug.plist à pasta Platforms/MacCatalyst do projeto.

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 o arquivo de direitos para builds de depuração no Mac Catalyst, adicione o seguinte nó <PropertyGroup> ao arquivo de projeto do aplicativo como um filho do nó <Project>:

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

Para usar as ferramentas para desenvolvedores do Safari com um aplicativo macOS:

  1. Abra o Safari para desktop.

  2. Marque a caixa de seleção Safari>Preferências>Avançado>Mostrar menu Desenvolver na barra de menus.

  3. Execute o aplicativo .NET MAUIBlazor Hybrid no macOS.

  4. Retorne ao Safari. Selecione Desenvolver>{REMOTE INSPECTION TARGET}>0.0.0.0, onde o espaço reservado {REMOTE INSPECTION TARGET} é o nome simples dos dispositivos (por exemplo, MacBook Pro) ou o número de série do dispositivo (por exemplo, XMVM7VFF10). Se houver várias entradas para 0.0.0.0, selecione a entrada que realça o BlazorWebView. BlazorWebView é realçado em azul no macOS quando a entrada correta 0.0.0.0 está selecionada.

  5. A janela Inspetor da Web é exibida para o BlazorWebView.

  6. As ferramentas de desenvolvedor fornecem uma variedade de recursos para trabalhar com aplicativos, incluindo quais ativos a página solicitou, quanto tempo os ativos levaram para carregar e o conteúdo dos ativos carregados. O exemplo a seguir mostra a guia Console, que inclui todas as mensagens de exceção geradas pela estrutura ou pelo código do desenvolvedor:

    Inspetor da Web do Safari para um aplicativo Blazor Hybrid

Recursos adicionais