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

1. Instalar e configurar o Microsoft Edge

2. Instalar as Ferramentas Remotas do Microsoft Edge (Beta) a partir da Microsoft Store

3. Ativar o Modo de Programador e ativar o Portal do Dispositivo

Instalar e configurar o Microsoft Edge

1. Se ainda não o fez, no dispositivo Windows 10 ou posterior que pretende depurar, instale o Microsoft Edge a partir desta página.

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 (Beta)

Instale as Ferramentas Remotas para Microsoft Edge (Beta) a partir da Microsoft Store.

O botão Obter para as Ferramentas Remotas do Microsoft Edge (Beta) poderá estar desativado se estiver a utilizar Windows 10 ou versão posterior 1809 ou anterior. Para configurar o computador anfitrião (debuggee), tem de estar em execução Windows 10 versão 1903 ou posterior. Atualize o computador anfitrião (debuggee) para adquirir as Ferramentas Remotas para o Microsoft Edge (Beta).

Inicie as Ferramentas Remotas para o Microsoft Edge (Beta) e, se lhe for pedido, aceite a caixa de diálogo de permissões na aplicação. Agora, pode fechar as Ferramentas Remotas do Microsoft Edge (Beta) e não precisa de a ter aberta para futuras sessões de depuração remota.

Ativar o Modo de Programador e ativar o Portal do Dispositivo

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.

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.

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

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.

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. 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. Leia mais sobre as portas predefinidas utilizadas pelo Portal do Dispositivo.

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 saber mais, consulte a secção Definições de Porta do Portal do Dispositivo no ambiente de trabalho do Windows.

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. Saiba mais sobre como utilizar as DevTools do Microsoft Edge aqui.

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.

Problemas conhecidos

• O painel Serviços de Escuta de Eventos na ferramenta Elementos está em branco na Windows 10 versão 1903. A equipa planeia corrigir o painel Serviços de Escuta de Eventos numa atualização de manutenção para Windows 10 versão 1903.

• O painel Cookies no painel Aplicação está em branco no Windows 10 versão 1903. A equipa planeia corrigir o painel Cookies numa atualização de serviço para Windows 10 versão 1903.

• A ferramenta Auditorias , a ferramenta Vista 3D , a secção Dispositivos Emulados em Definições e o painel árvore de Acessibilidade na ferramenta Elementos não estão atualmente a funcionar conforme esperado.

• O explorador de ficheiros não inicia a partir das DevTools na ferramenta Origens ou no painel Segurança quando depura remotamente.