Depurar remotamente dispositivos Windows

Depure remotamente conteúdo ao vivo em um dispositivo Windows 10 ou posterior a partir de seu computador Windows ou macOS.

Este tutorial ensina as seguintes tarefas:

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

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

• Faça um screencast do seu dispositivo Windows em uma instância do DevTools no computador de desenvolvimento.

Etapa 1: Configurar o host (máquina de depuração)

O host ou 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 a máquina host (depuração), use as subseções a seguir, em ordem.

Instalar e configurar o Microsoft Edge

1. Se ainda não estiver instalado, no dispositivo com Windows 10 ou posterior que você deseja depurar, instale o Microsoft Edge em Conheça o Microsoft Edge.

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 se o número da versão é 75 ou superior.

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

4. Em Sinalizadores de pesquisa, digite Habilitar depuração remota por meio do Portal de Dispositivos do Windows. Defina esse sinalizador como Habilitado. 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 para Microsoft Edge da Microsoft Store.

   Para configurar o computador host (depurador), ele deve estar executando o Windows 10 versão 1903 ou posterior. Se você estiver no Windows 10 ou versão posterior 1809 ou anterior, o botão Baixar ou Obter nessa página Ferramentas Remotas para Microsoft Edge pode estar desabilitado. Atualize o computador host (depurador) para adquirir Ferramentas Remotas para o Microsoft Edge.

   

2. Inicie as Ferramentas Remotas para o Microsoft Edge e, se solicitado, aceite a caixa de diálogo de permissões no aplicativo.

3. Feche as Ferramentas Remotas para o Microsoft Edge. Você não precisa tê-lo aberto para futuras sessões de depuração remota.

Ativar o Modo de Desenvolvedor e habilitar o Portal de Dispositivos

1. Ativar o modo de desenvolvedor; consulte Habilitar seu dispositivo para desenvolvimento.

2. Habilitar Portal de Dispositivos; consulte Visão geral do Portal de Dispositivos do Windows.

3. Se você estiver em uma rede Wi-Fi, verifique se a rede está marcada como Domínio ou Privada. 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 uma rede privada.

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

5. Abra o aplicativo Configurações . Em Localizar uma configuração, insira Developer settings e selecione-a. Ative o modo de desenvolvedor. Agora você pode ativar o Portal de Dispositivos configurando Ativar o diagnóstico remoto em conexões de rede local como Ativado. Opcionalmente, você pode ativar a Autenticação para que o dispositivo cliente (depurador) forneça as credenciais corretas para se conectar a esse dispositivo.

6. Se Ativar o diagnóstico remoto em conexões de rede local. tiver sido ativada anteriormente, você deverá desativá-la e ativá-la novamente para que o Portal de Dispositivos funcione com as Ferramentas Remotas para Microsoft Edge.

   Se uma seção Para desenvolvedores não for exibida nas Configurações, o Portal de Dispositivos pode já estar ativado, então tente reiniciar o dispositivo com Windows 10 ou posterior.

   

7. Observe o endereço IP da máquina e a porta de conexão que são exibidos em Conectar-se usando:. O endereço IP na imagem abaixo é 192.168.86.78 e a porta de conexão é 50080:

   

   Você insere as informações no dispositivo cliente (depurador) na próxima seção, "Etapa 2: Configurar o cliente (computador depurador)".

8. Abrir guias no Microsoft Edge e nos PWAs (Aplicativos Web Progressivos) no computador host (depurador) que você deseja depurar do computador cliente (depurador).

Etapa 2: Configurar o cliente (computador depurador)

O cliente ou computador depurador é o dispositivo do qual você deseja depurar. Este dispositivo pode ser seu computador de desenvolvimento diário ou pode ser apenas seu PC ou MacBook quando estiver trabalhando em casa.

1. Para configurar o computador cliente (depurador), instale o Microsoft Edge por meio do Conheça o Microsoft Edge , caso ainda não o tenha feito.

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 se o número da versão é 75 ou superior.

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 da máquina host (depuração) 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 você 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 à máquina host (depuração) usando https em vez de http:

1. Acesse Microsoft http://IP address:50080/config/rootcertificate Edge no computador do 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 de 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 de Autoridades de Certificação Raiz Confiáveis .

8. Agora, ao se conectar à máquina host (depuração) da máquina cliente (depurador) usando a edge://inspect página, você deve usar um valor diferente connection port . Por padrão, para Windows de área de trabalho, o Portal de Dispositivos usa 50080 como o connection port para http. Para https, o Portal de Dispositivos usa 50043 para seguir este padrão: https://IP address:50043 na edge://inspect página.

Para ver as portas padrão usadas pelo Portal de Dispositivos, consulte a tabela em Instalação na visão geral do Portal de Dispositivos do Windows.

Portas padrão

A porta padrão para http é 50080 e a porta padrão para https é 50043, mas nem sempre é esse o caso, porque o Portal de Dispositivos na área de trabalho reivindica portas no intervalo efêmero (>50.000) para evitar colisões com declarações de porta existentes no dispositivo.

Para ver as portas padrão usadas pelo Portal de Dispositivos, consulte a tabela em Instalação na visão geral do Portal de Dispositivos do Windows.

Para obter informações sobre as configurações de porta, consulte Portal de Dispositivos do Windows para Área de Trabalho.

Veja também:

• Configuração baseada no Registro no Portal de Dispositivos do Windows para Área de Trabalho.

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 todos os PWAs abertos no host.

Determine o conteúdo que você deseja depurar e clique em inspecionar. O DevTools do Microsoft Edge é aberto em uma nova guia e faz a screencast do conteúdo do computador host (depurador) para o computador cliente (depurador). Agora você pode usar todo o poder do DevTools do Microsoft Edge no cliente para conteúdo em execução no host.

Veja também:

• Documentação do Microsoft Edge DevTools

Inspecionar elementos

Por exemplo, tente inspecionar um elemento. Vá para a ferramenta Elementos da instância do DevTools no cliente e passe o mouse sobre um elemento para realçá-lo no visor 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 do DevTools no cliente e toque no elemento na tela do dispositivo host.

Selecionar elemento é desativado após o primeiro toque, portanto, você precisa ativá-lo novamente sempre que quiser usar esse recurso.

Passo 4: Faça a transmissão da tela do seu host para o seu dispositivo cliente

Por padrão, a instância do DevTools no cliente tem o screencasting ativado, o que permite que você exiba o conteúdo no dispositivo host na instância do DevTools no dispositivo cliente. Clique em Alternar 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.
• As teclas digitadas no computador são enviadas para o dispositivo.
• Para simular um gesto de pinçagem, segure a tecla Shift enquanto arrasta.
• Para rolar, use o trackpad ou a roda do mouse, ou arremesse com o ponteiro do mouse.

Observações sobre screencasts:

• Os screencasts exibem apenas o conteúdo da página. As partes transparentes do screencast representam interfaces de dispositivo, como a barra de endereços do Microsoft Edge, a barra de tarefas do Windows 10 ou posterior e o teclado do Windows 10 ou posterior.

• Os screencasts afetam negativamente as taxas de quadros. Desabilite o screencasting enquanto mede rolagens ou animações para obter uma imagem mais precisa do desempenho da sua página.

• Se a tela do dispositivo host for bloqueada, o conteúdo do screencast desaparecerá. Desbloqueie a tela do dispositivo host para retomar automaticamente o screencast.