Aplicativos WebView2 WinUI 2 (UWP) da área de trabalho de depuração remota

Para usar o Microsoft Edge DevTools para depurar um aplicativo UWP (WebView2 WinUI 2), use a depuração remota. A depuração remota é necessária para aplicativos UWP (WebView2 WinUI 2) porque, atualmente, os DevTools internos não podem ser iniciados dentro de um aplicativo WebView2 WinUI 2 (UWP) assinado pela loja.

Anexar DevTools remotamente a um aplicativo DevTools do WebView2 WinUI 2 (UWP) da área de trabalho

Anexar o Microsoft Edge DevTools remotamente a um aplicativo WebView2 WinUI 2 (UWP) da área de trabalho da seguinte maneira:

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

   

2. Habilitar Developer Mode: Abra configurações do Windows, selecione Privacidade & segurança>Para desenvolvedores e ative o alternância Modo de Desenvolvedor .

3. Na mesma página Configurações , ative o alternância do Portal do Dispositivo :

   

   Se o sistema operacional não estiver atualizado, você poderá receber uma mensagem na janela Configurações: "O pacote modo de desenvolvedor do Windows não pôde ser encontrado em Windows Update, portanto, a implantação remota e o Portal do Dispositivo do Windows não estão disponíveis. Saiba mais".

4. Se você receber essa mensagem, atualize o sistema operacional (sistema operacional) para a versão mais recente e ative o alternância do Portal do Dispositivo .

5. Quando solicitado a instalar o pacote modo de desenvolvedor do Windows, clique em Sim:

   

   Depois que a instalação for concluída, observe a URL que será usada para a conexão de depuração remota. Para localizar essa URL, expanda a lista suspensa Portal de Dispositivos . Nesse caso, a URL do Portal do Dispositivo que será usada é http://localhost:50080:

   

6. Instale ferramentas remotas para o Microsoft Edge na Microsoft Store.

7. No Microsoft Edge, acesse a URL do Portal do Dispositivo que você observou anteriormente. Verifique se a página Confirmar configurações de segurança está carregada (na guia Portal do Dispositivo windows ):

   

8. Se você estiver apenas depurando aplicativos que estão em execução localmente, poderá selecionar o botão Continuar com uma conexão sem segurança .

   Ou, se você não estiver executando o aplicativo localmente ou se precisar se conectar por HTTPS, selecione o link Configurar uma conexão segura e siga as etapas na página à qual você é redirecionado.

9. Verifique se você foi redirecionado para o Gerenciador de Aplicativos: página do Portal do Dispositivo do Windows :

   

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

11. Configure seu aplicativo WebView2 WinUI 2 (UWP) para depuração remota:

    Para habilitar a depuração remota, uma variável de ambiente deve ser definida em seu 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.

    Defina a seguinte variável:

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

    Por exemplo, se você estiver usando o aplicativo UWP de Exemplo do 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 :

    

12. Inicie seu aplicativo.

13. Vá para http://<Device Portal URL>/msedge, como http://localhost:50080/msedge, e certifique-se de que sua instância do WebView2 seja exibida na lista:

    

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

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

    

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

    

Agora você pode usar o Microsoft Edge DevTools para inspecionar e depurar o controle WebView2.

Confira também

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