Depurar remotamente dispositivos Windows

Depuração remota de conteúdos em direto num dispositivo Windows 10 ou posterior a partir do seu computador Windows ou macOS.

Este tutorial ensina-lhe as seguintes tarefas:

• Configure o seu dispositivo Windows para depuração remota e ligue-se ao mesmo a partir do seu computador de desenvolvimento.

• Inspecione e depure conteúdos dinâmicos no seu dispositivo Windows a partir do seu computador de desenvolvimento.

• Conteúdo screencast do seu dispositivo Windows para uma instância de DevTools no seu computador de desenvolvimento.

Passo 1: Configurar o anfitrião (máquina de depuração)

O anfitrião ou o computador de depuração é o dispositivo Windows 10 ou posterior que pretende depurar. Pode ser um dispositivo remoto difícil de aceder fisicamente ou pode não ter periféricos de teclado e rato, dificultando a interação com as DevTools do Microsoft Edge nesse dispositivo.

Para configurar o computador anfitrião (debuggee), utilize as seguintes sub-secções, por ordem.

Instalar e configurar o Microsoft Edge

1. Se ainda não estiver instalado, no dispositivo Windows 10 ou posterior que pretende depurar, instale o Microsoft Edge, de Obter a Conhecer o Microsoft Edge.

2. Se estiver a utilizar uma versão pré-instalada do Microsoft Edge no computador anfitrião (debuggee), verifique se tem o Microsoft Edge (Chromium) e não o Microsoft Edge (EdgeHTML). Uma forma rápida de marcar é carregar edge://settings/help no browser e confirmar que o número da versão é 75 ou superior.

3. Aceda a edge://flags no Microsoft Edge.

4. Em Sinalizadores de pesquisa, escreva em Ativar a depuração remota através do Portal do Dispositivo Windows. Defina esse sinalizador como Ativado. Em seguida, clique no botão Reiniciar para reiniciar o Microsoft Edge.

Instalar as Ferramentas Remotas para o Microsoft Edge

1. Instale as Ferramentas Remotas do Microsoft Edge a partir da Microsoft Store.

   Para configurar o computador anfitrião (debuggee), tem de estar em execução Windows 10 versão 1903 ou posterior. Se estiver no Windows 10 ou versão posterior 1809 ou anterior, o botão Transferir ou Obter nessa página ferramentas remotas do Microsoft Edge poderá estar desativado. Atualize o computador anfitrião (debuggee) para adquirir Ferramentas Remotas para o Microsoft Edge.

   

2. Inicie as Ferramentas Remotas para o Microsoft Edge e, se lhe for pedido, aceite a caixa de diálogo de permissões na aplicação.

3. Feche as Ferramentas Remotas do Microsoft Edge. Não precisa de o ter aberto para futuras sessões de depuração remota.

Ativar o Modo de Programador e ativar o Portal do Dispositivo

1. Ativar o Modo de Programador; veja Ativar o seu dispositivo para desenvolvimento.

2. Ativar o Portal do Dispositivo; veja Descrição geral do Portal do Dispositivo Windows.

3. Se estiver numa rede Wi-Fi, certifique-se de que a rede está marcada como Domínio ou Privado. Pode verificar o estado ao abrir a aplicação Segurança do Windows, ao selecionar Firewall & proteção de rede e verificar se a sua rede está listada como uma rede de Domínio ou rede privada.

4. Se a sua rede estiver listada como Pública, aceda a Definições>Rede &Wi-Fi da Internet>, clique na sua rede e alterne o botão Perfil de rede para Privado.

5. Abra a aplicação Definições . Em Localizar uma definição, introduza-a Developer settings e selecione-a. Alternar no Modo de Programador. Agora, pode ativar o Portal do Dispositivo ao definir Ativar o diagnóstico remoto através de ligações de rede de área local como Ligado. Em seguida, opcionalmente, pode ativar a Autenticação para que o dispositivo cliente (depurador) tenha de fornecer as credenciais corretas para ligar a este dispositivo.

6. Se ativar o diagnóstico remoto através de ligações de rede de área local. foi ativado anteriormente, tem de o desativar e voltar a ativá-lo para que o Portal do Dispositivo funcione com as Ferramentas Remotas do Microsoft Edge (Beta).

   Se uma secção Para programadores não for apresentada nas Definições, o Portal do Dispositivo poderá já estar ativado, por isso, tente reiniciar o dispositivo Windows 10 ou posterior.

   

7. Tenha em atenção o endereço IP do computador e a porta de ligação que são apresentados em Ligar com:. O endereço IP na imagem abaixo é 192.168.86.78 e a porta de ligação é 50080:

   

   Introduza as informações no dispositivo cliente (depurador) na secção seguinte, "Passo 2: Configurar o cliente (computador de depurador)".

8. Abra os separadores no Microsoft Edge e no Aplicativos Web Progressivo (PWAs) no computador anfitrião (debuggee) que pretende depurar a partir do computador cliente (depurador).

Passo 2: Configurar o cliente (computador de depurador)

O computador cliente ou depurador é o dispositivo a partir do qual pretende depurar. Este dispositivo pode ser o seu computador de desenvolvimento diário ou pode ser apenas o seu PC ou MacBook ao trabalhar a partir de casa.

1. Para configurar o computador cliente (depurador), instale o Microsoft Edge a partir desta página , caso ainda não o tenha feito.

2. Se estiver a utilizar uma versão pré-instalada do Microsoft Edge no computador anfitrião (debuggee), verifique se tem o Microsoft Edge (Chromium) e não o Microsoft Edge (EdgeHTML). Uma forma rápida de marcar é carregar edge://settings/help no browser e confirmar que o número da versão é 75 ou superior.

3. Aceda à edge://inspect página no Microsoft Edge. Por predefinição, deve estar na secção Dispositivos .

4. Em Ligar a um dispositivo Windows remoto, introduza o endereço IP e a porta de ligação do computador anfitrião (debuggee) na caixa de texto, seguindo este padrão: http://IP address:connection port.

5. Clique em Ligar ao Dispositivo.

   

6. Se configurar a autenticação para o computador anfitrião (debuggee), ser-lhe-á pedido que introduza o Nome de Utilizador e a Palavra-passe do computador cliente (depurador) para se ligar com êxito.

Utilizar https em vez de http

Se quiser ligar-se ao computador anfitrião (debuggee) com https o em vez de http:

1. Aceda a http://IP address:50080/config/rootcertificate no Microsoft Edge no computador cliente (depurador). Esta ação transfere automaticamente um certificado de segurança com o nome rootcertificate.cer.

2. Selecione rootcertificate.cer. Esta ação abre a ferramenta Gestor de Certificados do Windows.

3. Clique em Instalar certificado..., certifique-se de que o Utilizador Atual está ativado e, em seguida, clique em Seguinte.

4. Clique em Colocar todos os certificados no seguinte arquivo e clique em Procurar....

5. Selecione o arquivo Autoridades de Certificação de Raiz Fidedigna e, em seguida, clique em OK.

6. Clique em Avançar, e em seguida, clique em Concluir.

7. Se lhe for pedido, confirme que pretende instalar este certificado no arquivo autoridades de certificação de raiz fidedigna .

8. Agora, ao ligar ao computador anfitrião (debuggee) a partir do computador cliente (depurador) através da edge://inspect página, tem de utilizar um valor diferente connection port . Por predefinição, para o Ambiente de Trabalho do Windows, o Portal do Dispositivo utiliza 50080 como o connection port para http. Para httpso , o Portal do Dispositivo utiliza 50043 para seguir este padrão: https://IP address:50043 na edge://inspect página.

Para ver as portas predefinidas que são utilizadas pelo Portal do Dispositivo, veja a tabela em Configuração no Portal do Dispositivo Windows.

Portas predefinidas

A porta predefinida para http é 50080 e a porta predefinida para https é 50043, mas nem sempre é o caso, porque o Portal do Dispositivo no ambiente de trabalho afirma portas no intervalo efémero (>50 000) para evitar colisões com afirmações de porta existentes no dispositivo.

Para ver as portas predefinidas que são utilizadas pelo Portal do Dispositivo, veja a tabela em Configuração no Portal do Dispositivo Windows.

Para obter informações sobre as definições de porta, consulte Portal do Dispositivo Windows para Ambiente de Trabalho.

Veja também:

• Configuração baseada no registo no Portal de Dispositivos do Windows para Ambiente de Trabalho.

Passo 3: Depurar conteúdo no anfitrião a partir do cliente

Se o computador cliente (depurador) se ligar com êxito ao computador anfitrião (debuggee), a edge://inspect página no cliente apresenta agora uma lista dos separadores no Microsoft Edge e quaisquer PWAs abertos no anfitrião.

Determine o conteúdo que pretende depurar e, em seguida, clique em inspecionar. O Microsoft Edge DevTools é aberto num novo separador e filtra o conteúdo do computador anfitrião (debuggee) para o computador cliente (depurador). Agora, pode utilizar todas as funcionalidades do Microsoft Edge DevTools no cliente para conteúdos em execução no anfitrião.

Veja também:

• Documentação do Microsoft Edge DevTools

Inspecionar elementos

Por exemplo, tente inspecionar um elemento. Aceda à ferramenta Elementos da sua instância de DevTools no cliente e paire o cursor sobre um elemento para realçá-lo na janela viewport do dispositivo anfitrião.

Também pode tocar num elemento no ecrã do dispositivo anfitrião para o selecionar na ferramenta Elementos . Selecione Selecionar Elemento na instância de DevTools no cliente e, em seguida, toque no elemento no ecrã do dispositivo anfitrião.

Selecionar Elemento é desativado após o primeiro toque, pelo que tem de ativá-lo novamente sempre que quiser utilizar esta funcionalidade.

Importante

O painel Serviços de Escuta de Eventos na ferramenta Elementos está em branco na Windows 10 versão 1903. Este é um problema conhecido e a equipa planeia corrigir o painel Serviços de Escuta de Eventos numa atualização de manutenção para Windows 10 versão 1903.

Passo 4: filtrar o ecrã do anfitrião para o dispositivo cliente

Por predefinição, a instância de DevTools no cliente tem o screencast ativado, o que lhe permite ver o conteúdo no dispositivo anfitrião na instância de DevTools no seu dispositivo cliente. Clique em Ativar/Desativar Screencast para ativar ou desativar esta funcionalidade.

Pode interagir com o screencast de várias formas:

• Os cliques são traduzidos em toques e acionam eventos táteis adequados no dispositivo.
• Os batimentos de teclas no computador são enviados para o dispositivo.
• Para simular um gesto de aproximar os dedos, mantenha premida a tecla Shift enquanto arrasta.
• Para deslocar, utilize o trackpad ou a roda do rato ou fling com o ponteiro do rato.

Notas sobre screencasts:

• Os screencasts só apresentam o conteúdo da página. Partes transparentes do screencast representam interfaces de dispositivo, como a barra de Endereço do Microsoft Edge, a barra de tarefas Windows 10 ou posterior e o teclado Windows 10 ou posterior.

• Os screencasts afetam negativamente as taxas de fotogramas. Desative o screencast enquanto mede deslocamentos ou animações para obter uma imagem mais precisa do desempenho da sua página.

• Se o ecrã do dispositivo anfitrião bloquear, o conteúdo do seu screencast desaparece. Desbloqueie o ecrã do dispositivo anfitrião para retomar automaticamente o screencast.