Depurar remotamente dispositivos Windows

Depuração remota de conteúdo ao vivo em um dispositivo Windows 10 ou posterior do computador Windows ou macOS.

Este tutorial ensina as seguintes tarefas:

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

• Inspecione e depure o conteúdo ao vivo em seu dispositivo Windows a partir de seu computador de desenvolvimento.

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

Etapa 1: configurar o host (computador de depuração)

O host ou o computador de depuração é o dispositivo Windows 10 ou posterior que você deseja depurar. Pode ser um dispositivo remoto difícil de acessar fisicamente ou pode não ter periféricos de teclado e mouse, dificultando a interação com o Microsoft Edge DevTools nesse dispositivo.

Para configurar o computador host (depurador):

1. Instalar e configurar o Microsoft Edge

2. Instalar as Ferramentas Remotas do Microsoft Edge (Beta) na Microsoft Store

3. Ativar o Modo do Desenvolvedor e habilitar o Portal do Dispositivo

Instalar e configurar o Microsoft Edge

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

2. Se você estiver usando uma versão pré-instalada do Microsoft Edge no computador host (depurador), verifique se você tem o Microsoft Edge (Chromium) e não o Microsoft Edge (EdgeHTML). Uma maneira rápida de marcar é carregar edge://settings/help no navegador e confirmar que o número da versão é 75 ou mais.

3. edge://flags Acesse no Microsoft Edge.

4. Em Sinalizadores de pesquisa, digite Habilitar depuração remota por meio do Portal do Dispositivo do Windows. Defina esse sinalizador como Habilitado. Em seguida, clique no botão Reiniciar para reiniciar o Microsoft Edge.

Instalar as Ferramentas Remotas do Microsoft Edge (Beta)

Instale as Ferramentas Remotas do Microsoft Edge (Beta) da Microsoft Store.

Observação

O botão Obter para as Ferramentas Remotas do Microsoft Edge (Beta) pode estar desabilitado se você estiver no Windows 10 ou posterior versão 1809 ou anterior. Para configurar o computador host (depurador), ele deve estar executando Windows 10 versão 1903 ou posterior. Atualize o computador host (depurador) para adquirir as Ferramentas Remotas do Microsoft Edge (Beta).

Inicie as Ferramentas Remotas do Microsoft Edge (Beta) e, se solicitado, aceite a caixa de diálogo permissões no aplicativo. Agora você pode fechar as Ferramentas Remotas do Microsoft Edge (Beta) e não precisa abri-la para futuras sessões de depuração remota.

Ativar o Modo do Desenvolvedor e habilitar o Portal do Dispositivo

Se você estiver em uma rede WiFi, verifique se a rede está marcada como Domínio ou Privado. Você pode verificar o estado abrindo o aplicativo Segurança do Windows, selecionando Firewall & proteção de rede e verificando se sua rede está listada como uma rede de domínio ou rede privada.

Se sua rede estiver listada como Pública, vá para Configurações>Rede &>Internet Wi-Fi, clique em sua rede e alterne o botão Perfil de Rede para Privado.

Agora, abra o aplicativo Configurações . Em Localizar uma configuração, insira Developer settings e selecione-a. Alterne no Modo de Desenvolvedor. Agora você pode ativar o Portal do Dispositivo configurando Ativar diagnóstico remotas em conexões de rede de área local para Ativar. Opcionalmente, você pode ativar a Autenticação para que o dispositivo cliente (depurador) forneça as credenciais corretas para se conectar a esse dispositivo.

Observação

Se Ativar o diagnóstico remoto sobre conexões de rede de área local. Foi ativado anteriormente, você deverá desativá-lo e ativá-lo novamente para que o Portal do Dispositivo funcione com as Ferramentas Remotas do Microsoft Edge (Beta). Se uma seção For developers não for exibida em Configurações, o Portal do Dispositivo já poderá estar ativado, portanto, tente reiniciar o dispositivo Windows 10 ou posterior.

Observe o endereço IP do computador e a porta de conexão exibida em Conectar usando:. O endereço IP na imagem abaixo é 192.168.86.78 e a porta de conexão é 50080:

Insira as informações sobre o dispositivo cliente (depurador) na próxima seção. Abra guias no Microsoft Edge e no PWAs (Progressive Aplicativos Web) no computador host (depurador) que você deseja depurar do computador cliente (depurador).

Etapa 2: configurar o cliente (computador de depurador)

O computador cliente ou depurador é o dispositivo do qual você deseja depurar. Esse dispositivo pode ser seu computador de desenvolvimento diário ou pode ser apenas seu computador ou MacBook ao trabalhar em casa.

1. Para configurar o computador cliente (depurador), instale o Microsoft Edge nesta página se você ainda não tiver.

2. Se você estiver usando uma versão pré-instalada do Microsoft Edge no computador host (depurador), verifique se você tem o Microsoft Edge (Chromium) e não o Microsoft Edge (EdgeHTML). Uma maneira rápida de marcar é carregar edge://settings/help no navegador e confirmar que o número da versão é 75 ou mais.

3. Acesse a edge://inspect página no Microsoft Edge. Por padrão, você deve estar na seção Dispositivos .

4. Em Conectar-se a um dispositivo Windows remoto, insira o endereço IP e a porta de conexão do computador host (depurador) na caixa de texto seguindo este padrão: http://IP address:connection port.

5. Clique em Conectar ao Dispositivo.

   

6. Se você configurar a autenticação para o computador host (depurador), será solicitado que insira o nome de usuário e a senha do computador cliente (depurador) para se conectar com êxito.

Usando https em vez de http

Se você quiser se conectar ao computador host (depurador) usando https em vez de http:

1. http://IP address:50080/config/rootcertificate Acesse no Microsoft Edge no computador cliente (depurador). Isso baixa automaticamente um certificado de segurança chamado rootcertificate.cer.

2. Selecione rootcertificate.cer. Isso abre a ferramenta Gerenciador de Certificados do Windows.

3. Clique em Instalar certificado..., verifique se o Usuário Atual está ativado e clique em Avançar.

4. Clique em Colocar todos os certificados no repositório a seguir e clique em Procurar....

5. Selecione o repositório Autoridades de Certificação Raiz Confiáveis e clique em OK.

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

7. Se solicitado, confirme se deseja instalar esse certificado no repositório Autoridades de Certificação Raiz Confiáveis .

8. Agora, ao se conectar ao computador host (depurador) do computador cliente (depurador) usando a edge://inspect página, você deve usar um valor diferente connection port . Por padrão, para o Windows da área de trabalho, o Portal do Dispositivo usa 50080 como o connection port para http. Para https, o Portal do Dispositivo usa 50043 para seguir este padrão: https://IP address:50043 na edge://inspect página. Leia mais sobre as portas padrão usadas pelo Portal do Dispositivo.

Observação

A porta padrão para http é 50080 e a porta padrão para https é 50043, mas isso nem sempre é o caso, porque o Portal do Dispositivo na área de trabalho declara portas no intervalo efêmero (>50.000) para evitar colisões com declarações de porta existentes no dispositivo. Para saber mais, confira a seção Configurações da Porta para Portal de Dispositivos na área de trabalho do Windows.

Etapa 3: Depurar conteúdo no host do cliente

Se o computador cliente (depurador) se conectar com êxito ao computador host (depurador), a edge://inspect página no cliente agora exibirá uma lista das guias no Microsoft Edge e quaisquer PWAs abertas no host.

Determine o conteúdo que você deseja depurar e clique em inspecionar. O Microsoft Edge DevTools abre em uma nova guia e exibe o conteúdo do computador host (depurador) para o computador cliente (depurador). Agora você pode usar toda a potência do Microsoft Edge DevTools no cliente para conteúdo em execução no host. Saiba mais sobre como usar o Microsoft Edge DevTools aqui.

Inspecionar elementos

Por exemplo, tente inspecionar um elemento. Acesse a ferramenta Elementos da instância DevTools no cliente e passe o mouse em um elemento para realçá-lo no modo de exibição do dispositivo host.

Você também pode tocar em um elemento na tela do dispositivo host para selecioná-lo na ferramenta Elementos . Selecione Selecionar Elemento na instância DevTools no cliente e toque no elemento na tela do dispositivo host.

Observação

Selecione Elemento está desabilitado após o primeiro toque, portanto, você precisa ativá-lo novamente sempre que quiser usar esse recurso.

Importante

O painel Ouvintes de Eventos na ferramenta Elementos está em branco no Windows 10 versão 1903. Esse é um problema conhecido e a equipe planeja corrigir o painel Ouvintes de Eventos em uma atualização de manutenção para Windows 10 versão 1903.

Etapa 4: Exibir a tela do host para o dispositivo cliente

Por padrão, a instância DevTools no cliente tem o screencasting ativado, o que permite exibir o conteúdo no dispositivo host na instância DevTools em seu dispositivo cliente. Clique em Alternar o Screencast para ativar ou desativar esse recurso.

Você pode interagir com o screencast de várias maneiras:

• Os cliques são traduzidos em toques, disparando eventos de toque adequados no dispositivo.
• Os golpes de tecla no computador são enviados para o dispositivo.
• Para simular um gesto de beliscão, segure Shift enquanto arrasta.
• Para rolar, use o trackpad ou a roda do mouse ou o arremesso com o ponteiro do mouse.

Algumas anotações em screencasts:

• Os screencasts exibem apenas o conteúdo da página. Partes transparentes do screencast representam interfaces do dispositivo, como a barra de endereços 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 quadros. Desabilite o screencasting ao medir rolamentos ou animações para obter uma imagem mais precisa do desempenho de sua página.
• Se a tela do dispositivo host bloquear, o conteúdo do screencast desaparecerá. Desbloqueie a tela do dispositivo host para retomar automaticamente o screencast.

Problemas Conhecidos

O painel Ouvintes de Eventos na ferramenta Elementos está em branco no Windows 10 versão 1903. A equipe planeja corrigir o painel Ouvintes de Eventos em uma atualização de manutenção para Windows 10 versão 1903.

O painel Cookies no painel Aplicativo está em branco no Windows 10 versão 1903. A equipe planeja corrigir o painel Cookies em uma atualização de serviço para Windows 10 versão 1903.

A ferramenta Auditorias , a ferramenta Exibição 3D , a seção Dispositivos Emulados em Configurações e o painel de árvore acessibilidade na ferramenta Elementos não estão funcionando conforme o esperado. A equipe planeja corrigir as ferramentas listadas em uma atualização futura do Microsoft Edge.

O explorador de arquivos não é iniciado do DevTools na ferramenta Fontes ou no painel Segurança quando você depura remotamente. A equipe planeja corrigir as ferramentas em uma atualização futura do Microsoft Edge.