Depuração remota do ambiente de trabalho WebView2 Aplicações WinUI 2 (UWP)

Para utilizar o Microsoft Edge DevTools para depurar uma aplicação WebView2 WinUI 2 (UWP), utilize a depuração remota. A depuração remota é necessária para aplicações WebView2 WinUI 2 (UWP) porque, atualmente, as DevTools incorporadas não podem ser iniciadas numa aplicação WebView2 WinUI 2 (UWP) assinada pela loja.

Anexar DevTools remotamente a uma aplicação WebView2 WinUI 2 (UWP) de ambiente de trabalho

Anexe remotamente o Microsoft Edge DevTools a uma aplicação WebView2 WinUI 2 (UWP) de ambiente de trabalho da seguinte forma:

1. No Microsoft Edge, aceda a edge://inspect. É aberta a página Inspecionar com as Ferramentas de Programação do Edge :

   

2. Ativar Developer Mode: abra definições do Windows, selecione Privacidade & segurança>para programadores e, em seguida, ative o botão de alternar Modo de Programador .

3. Na mesma página Definições , ative o botão de alternar Portal do Dispositivo :

   

   Se o seu sistema operativo não estiver atualizado, poderá receber uma mensagem na janela Definições: "Não foi possível encontrar o pacote do Modo de Programador do Windows no Windows Update, pelo que a implementação remota e o Portal do Dispositivo Windows estão indisponíveis. Saiba mais."

4. Se receber essa mensagem, atualize o sistema operativo (SO) para a versão mais recente e, em seguida, ative o botão de alternar Portal do Dispositivo .

5. Quando lhe for pedido para Instalar o pacote do Modo de Programador do Windows, clique em Sim:

   

   Após a conclusão da instalação, tenha em atenção o URL que será utilizado para a ligação de depuração remota. Para localizar este URL, expanda a lista pendente Portal do Dispositivo . Neste caso, o URL do Portal do Dispositivo que será utilizado é http://localhost:50080:

   

6. Instale ferramentas remotas para o Microsoft Edge a partir da Microsoft Store.

7. No Microsoft Edge, aceda ao URL do Portal do Dispositivo que anotou anteriormente. Verifique se a página Confirmar definições de segurança está carregada (no separador Portal do Dispositivo Windows ):

   

8. Se estiver apenas a depurar aplicações que estão a ser executadas localmente, pode selecionar o botão Continuar com uma ligação não protegida .

   Em alternativa, se não estiver a executar a aplicação localmente ou se precisar de se ligar através de HTTPS, selecione a ligação Configurar uma ligação segura e, em seguida, siga os passos na página para a qual foi redirecionado.

9. Verifique se foi redirecionado para a página Gestor de aplicações: Portal do Dispositivo Windows :

   

10. Aceda a http://<Device Portal URL>/msedge e verifique se as Ferramentas Remotas do Microsoft Edge estão a funcionar. A página carrega uma lista vazia: [], a menos que exista uma aplicação em execução que seja depurável por ferramentas remotas.

11. Configure a sua aplicação WebView2 WinUI 2 (UWP) para depuração remota:

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

    Defina a seguinte variável:

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

    Por exemplo, se estiver a utilizar a aplicação UWP de Exemplo WebView2, pode definir a variável de ambiente ao adicionar a seguinte linha no Browser.xaml.cs ficheiro:

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

    A linha está numerada 33 nesta captura de ecrã, no Browser() construtor, abaixo de uma #endif que encapsula uma instrução existente SetEnvironmentVariable :

    

12. Inicie a sua aplicação.

13. Aceda a http://<Device Portal URL>/msedge, como http://localhost:50080/msedge, e certifique-se de que a instância do WebView2 aparece na lista:

    

14. Saiba mais em edge://inspect. Na caixa de texto Ligar a um dispositivo Windows remoto , introduza http://<Device Portal URL>, como http://localhost:50080, e, em seguida, clique em Ligar ao Dispositivo.

15. Verifique se consegue estabelecer ligação com êxito, para que o seu controlo WebView2 depurável, denominado Edge, esteja listado sob o nome do computador:

    

16. Na parte inferior da entrada de controlo Edge WebView2, clique na ligação inspecionar . O Microsoft Edge DevTools é aberto para o controlo WebView2:

    

Agora, pode utilizar o Microsoft Edge DevTools para inspecionar e depurar o controlo WebView2.

Confira também

• Depuração remota de aplicações WebView2 WinUI 2 (UWP)