Depuração remota de aplicativos do HoloLens 2 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.

O WebView2 no HoloLens 2 e o plug-in WebView para Unity estão em versão prévia e sujeitos a alterações antes da disponibilidade geral.

O WebView2 e o plug-in WebView2 só são compatíveis com dispositivos HoloLens 2 que executam a atualização do Windows 11. Para obter mais informações, consulte Atualizar o HoloLens 2.

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

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

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

   

2. Habilitar Portal do Dispositivo: abra as Configurações do Windows, selecione Atualizar & Segurança>Para desenvolvedores e ative a alternância do Portal do Dispositivo :

   

   Em Conectar-se usando>Ethernet, observe a URL que será usada para a conexão de depuração remota.

3. Instale as Ferramentas Remotas para Microsoft Edge da Microsoft Store em seu dispositivo HoloLens 2.

4. 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 ):

   

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

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

   

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

8. 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 :

   

9. Inicie seu aplicativo em seu dispositivo HoloLens 2.

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

    

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

12. 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:

    

13. 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 aplicativo HoloLens 2 WebView2 WinUI 2 (UWP).

Confira também

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