Área de trabalho de depuração remota Aplicativos 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 uma área de trabalho Aplicativo WebView2 WinUI 2 (UWP)

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

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

   

2. Habilitar Developer Mode: abra as Configurações do Windows, selecione Privacidade & segurança>Para desenvolvedores e ative a alternância Modo de desenvolvedor .

3. Na mesma página Configurações , ative a alternância do Portal de Dispositivos :

   

   Se o seu sistema operacional não estiver atualizado, você poderá receber uma mensagem na janela Configurações: "Não foi possível encontrar o pacote do Modo de Desenvolvedor do Windows no Windows Update, portanto, a implantação remota e o Portal de Dispositivos do Windows não estão disponíveis. Saiba mais."

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

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

   

   Após a conclusão da instalação, observe a URL que será usada para a conexão de depuração remota. Para encontrar essa URL, expanda a lista suspensa do Portal de Dispositivos . Nesse caso, a URL do Portal de Dispositivos que será usada é http://localhost:50080:

   

6. Instale as Ferramentas Remotas para Microsoft Edge por meio da Microsoft Store.

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

   

8. Se você estiver apenas depurando aplicativos executados localmente, poderá selecionar o botão Continuar com uma conexão não segura .

   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 para a qual você foi redirecionado.

9. Verifique se você foi redirecionado para o Gerenciador de aplicativos: Página do Portal de Dispositivos do Windows :

   

10. Vá e http://<Device Portal URL>/msedge verifique se as Ferramentas Remotas para o 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 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.

    Defina a seguinte variável:

    "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 :

    

12. Inicie seu aplicativo.

13. Vá para http://<Device Portal URL>/msedge, como http://localhost:50080/msedge, e verifique se sua instância do WebView2 aparece na lista:

    

14. Saiba mais em edge://inspect. Na caixa de texto Conectar a um dispositivo remoto do Windows , 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 depurável do WebView2, chamado Edge, seja listado sob o nome do computador:

    

16. 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.

Confira também

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