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

Artigo
07/18/2024

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 Xbox WebView2 WinUI 2 (UWP)

Anexe as DevTools do Microsoft Edge remotamente a uma aplicação Xbox WebView2 WinUI 2 (UWP) da seguinte forma:

No Microsoft Edge, aceda a edge://inspect. É aberta a página Inspecionar com as Ferramentas de Programação do Edge :
Ative o Modo de Programador na Xbox. Consulte Ativação do Modo de Programador da Xbox One.
No Microsoft Edge, aceda a https://<System IP>:11443, onde <System IP> é substituído pelo IP do SO do Sistema Xbox. A página Confirmar definições de segurança é apresentada no separador Portal do Dispositivo Windows :
Clique no botão Continuar com uma ligação não protegida . É apresentado um erro de certificado SSL, NET::ERR__CERT_AUTHORITY_INVALID:
Clique no botão Avançado. É apresentada uma mensagem: "O servidor não pôde provar...":
Clique na ligação Continuar para<System IP>(não seguro), onde <System IP> é substituída pelo IP do SO do Sistema Xbox. O Portal do Dispositivo Xbox é aberto:
Aceda a https://<System IP>:11443/config/rootcertificate, onde <System IP> é substituído pelo IP do SO do Sistema Xbox. Esta ação transfere um rootcertificate.cer ficheiro:
Abra o ficheiro transferido rootcertificate.cer . É aberta uma caixa de diálogo de aviso de segurança:
Clique no botão Abrir . É aberta uma caixa de diálogo Certificado :
Clique no botão Instalar Certificado . É aberta uma caixa de diálogo Bem-vindo ao Assistente de Importação de Certificados :
Selecione o botão de opção Utilizador Atual e, em seguida, clique no botão Seguinte . O Assistente de Importação de Certificados é aberto:
Selecione a opção Colocar todos os certificados no seguinte arquivo, clique no botão Procurar e, em seguida, selecione Autoridades de Certificação de Raiz Fidedigna.
Clique no botão Seguinte . É aberta uma caixa de diálogo Aviso de Segurança :
Clique no botão Sim .
Reinicie o Microsoft Edge.
Aceda a https://<System IP>:11443, onde <System IP> é substituído pelo IP do SO do Sistema Xbox e verifique se a ligação é indicada como segura (ou seja, um URL HTTPS):
No seu projeto de aplicação, defina a seguinte variável para configurar 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.
```
"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 :
Implemente a sua aplicação na Xbox com Xbox Device Portal e inicie a sua aplicação.
Saiba mais em edge://inspect.
Na caixa de texto Ligar a um dispositivo Windows remoto , introduza https://<System IP>:11443, onde <System IP> é substituído pelo IP do SO do Sistema Xbox e, em seguida, clique no botão Ligar ao Dispositivo .
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:
Na parte inferior da entrada de controlo Edge WebView2, clique na ligação inspecionar . O Microsoft Edge DevTools é aberto para o controlo WebView2: