Depuração remota Aplicativos XBOX WebView2 WinUI 2 (UWP)

Para usar o DevTools do Microsoft Edge para depurar um aplicativo WebView2 WinUI 2 (UWP), use a depuração remota. A depuração remota é necessária para aplicativos WebView2 WinUI 2 (UWP) porque, atualmente, o DevTools interno não pode ser iniciado dentro de um aplicativo WebView2 WinUI 2 (UWP) assinado pelo repositório.

Anexar DevTools remotamente a um aplicativo XBOX WebView2 WinUI 2 (UWP)

Anexe o Microsoft Edge DevTools remotamente a um aplicativo XBOX WebView2 WinUI 2 (UWP) da seguinte maneira:

1. No Microsoft Edge, vá para edge://inspect. A página Inspecionar com Ferramentas de Desenvolvedor do Edge é aberta:

   

2. Habilitar o modo de desenvolvedor no XBOX. Consulte a ativação do Modo de Desenvolvedor do XBOX One.

3. No Microsoft Edge, vá para https://<System IP>:11443, onde <System IP> é substituído pelo IP do sistema operacional do XBOX. A página Confirmar configurações de segurança é exibida, na guia Portal de Dispositivos do Windows :

   

4. Clique no botão Continuar com uma conexão não segura . Um erro de certificado SSL é exibido, NET::ERR__CERT_AUTHORITY_INVALID:

   

5. Clique no botão Avançado. Uma mensagem é exibida, "O servidor não pôde provar ...":

   

6. Clique no link Continuar para<System IP>(não seguro), onde <System IP> é substituído pelo IP do sistema operacional do XBOX. O Portal de Dispositivos do XBOX é aberto:

   

7. Vá para https://<System IP>:11443/config/rootcertificate, onde <System IP> é substituído pelo IP do sistema operacional XBOX. Isso baixa um rootcertificate.cer arquivo:

   

8. Abra o arquivo baixado rootcertificate.cer . Uma caixa de diálogo de aviso de segurança é aberta:

   

9. Clique no botão Abrir . Uma caixa de diálogo de certificado é aberta:

   

10. Clique no botão Instalar certificado . Uma caixa de diálogo Bem-vindo à Caixa de Diálogo do Assistente para Importação de Certificados é aberta:

    

11. Selecione o botão de opção Usuário Atual e clique no botão Avançar . O Assistente de Importação de Certificado abre:

    

12. Selecione a opção Colocar todos os certificados no armazenamento a seguir, clique no botão Procurar e selecione Autoridades de Certificação Raiz Confiáveis.

13. Clique no botão Avançar . Uma caixa de diálogo de Aviso de Segurança é aberta:

    

14. Clique no botão Sim .

15. Reinicie o Microsoft Edge.

16. Vá para https://<System IP>:11443, onde <System IP> é substituído pelo IP do sistema operacional do XBOX e verifique se a conexão é indicada como segura (ou seja, uma URL HTTPS):

    

17. No projeto do aplicativo, defina a variável a seguir para configurar o aplicativo WebView2 WinUI 2 (UWP) para depuração remota.

    Para habilitar a depuração remota, uma variável de ambiente deve ser definida no projeto. Essa variável deve ser definida antes de criar a CoreWebView2 instância e antes de definir a WebView2.Source propriedade ou chamar o WebView2.EnsureCoreWebView2Async método.

    "WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS", "--enable-features=msEdgeDevToolsWdpRemoteDebugging"
    

    Por exemplo, se você estiver usando o aplicativo UWP de exemplo WebView2, poderá definir a variável de ambiente adicionando a seguinte linha no Browser.xaml.cs arquivo:

    Environment.SetEnvironmentVariable("WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS", "--enable-features=msEdgeDevToolsWdpRemoteDebugging");
    

    A linha é numerada 33 nesta captura de tela, no Browser() construtor, abaixo de uma #endif que envolve uma instrução existente SetEnvironmentVariable :

    

18. Implante seu aplicativo no seu XBOX usando XBOX Device Portal e inicie seu aplicativo.

19. Saiba mais em edge://inspect.

20. Na caixa de texto Conectar a um dispositivo Windows remoto, insira https://<System IP>:11443, onde <System IP> é substituído pelo IP do sistema operacional XBOX e clique no botão Conectar ao dispositivo.

21. Verifique se você pode se conectar com êxito, para que o controle depurável do WebView2, chamado Edge, seja listado sob o nome do computador:

    

22. Na parte inferior da entrada de controle do Edge WebView2, clique no link inspecionar . O DevTools do Microsoft Edge é aberto para o controle WebView2:

    

Agora você pode usar o DevTools do Microsoft Edge para inspecionar e depurar o controle WebView2 no seu aplicativo XBOX WebView2 WinUI 2 (UWP).

Confira também

• Depuração remota de aplicativos WebView2 WinUI 2 (UWP)