Acessar servidores locais e instâncias do Chrome com o encaminhamento de portas

Kayce Basques

Meggin Kearney

Sofia Emelianova

Você pode usar o encaminhamento de portas para:

• Caso 1. Depurar uma guia aberta em outra instância do Chrome.
• Caso 2. Hospedar um site em um servidor da Web de máquina de desenvolvimento e acessar o conteúdo de um dispositivo Android usando um cabo USB.

No Caso 2, o encaminhamento de portas funciona por uma porta TCP de escuta no dispositivo Android que é mapeada para uma porta TCP na máquina de desenvolvimento. O tráfego entre as portas passa pela conexão USB entre o dispositivo Android e a máquina de desenvolvimento. Portanto, a conexão não depende da configuração de rede.

Além disso, se o servidor da Web estiver usando um domínio personalizado, você poderá configurar o dispositivo Android para acessar o conteúdo nesse domínio com mapeamento de domínio personalizado.

Configurar o encaminhamento de portas

Dependendo do seu caso, siga as próximas etapas.

Caso 1: configurar o encaminhamento de portas para outra instância do Chrome

1. Execute outra instância do Chrome com o parâmetro --remote-debugging-port=PORT, por exemplo:

   MacOS

   open -a "Google Chrome" --args --remote-debugging-port=PORT

   Windows

   start chrome --remote-debugging-port=PORT

   Linux

   google-chrome --remote-debugging-port=PORT

2. Na instância do Chrome que você está depurando com:

   1. Abra chrome://inspect/#devices.
   2. Verifique se a opção Descobrir destinos de rede está marcada.
   3. Clique em Configurar ao lado da caixa de seleção.

   4. Em Configurações de descoberta de destino, insira localhost:PORT, marque Ativar encaminhamento de portas e clique em Concluído.

      

   5. De volta aos Dispositivos, você verá um novo destino remoto. Clique em Inspecionar ao lado da guia que você quer depurar.

      

3. Uma nova janela do DevTools no modo de dispositivo é aberta. Na barra de endereço na parte de cima da tela, você pode inserir o endereço do site que quer depurar.

   

4. Ao lado da barra de endereço, você pode alternar os métodos de entrada.

Caso 2: configurar o encaminhamento de portas por USB para o dispositivo Android

1. Configure a depuração remota entre a máquina de desenvolvimento e o dispositivo Android. Quando terminar, o dispositivo Android vai aparecer na lista.

   

2. Verifique se a opção Descobrir dispositivos USB está marcada.

3. Clique em Encaminhamento de portas ao lado da caixa de seleção.

4. Em Configurações de encaminhamento de portas, localhost:8080 é configurado por padrão. Marque Ativar encaminhamento de portas.

   .

5. Se você quiser configurar outras portas, siga as próximas etapas. Caso contrário, pule as etapas e clique em Concluído.

6. No campo de texto Porta à esquerda, insira o número da porta em que você quer acessar o site no dispositivo Android. Por exemplo, se você quiser acessar o site de localhost:5000, insira 5000.

7. No campo de texto Endereço IP e porta à direita, insira o endereço IP ou o nome do host em que o site está sendo executado no servidor da Web da máquina de desenvolvimento, seguido pelo número da porta. Por exemplo, se o site estiver sendo executado em localhost:5000, insira localhost:5000.

8. Clique em Concluído.

O encaminhamento de portas está configurado. Um indicador de status do encaminhamento de portas aparece na parte de cima e ao lado do nome do dispositivo.

Para visualizar o conteúdo, abra o Chrome no dispositivo Android e acesse a porta localhost especificada no campo Porta do dispositivo. Por exemplo, se você inseriu 5000 no campo, então você acessaria localhost:5000.

Mapear para domínios locais personalizados

O mapeamento de domínio personalizado permite visualizar conteúdo em um dispositivo Android de um servidor da Web na máquina de desenvolvimento que está usando um domínio personalizado.

Por exemplo, suponha que seu site use uma biblioteca JavaScript de terceiros que só funciona no domínio da lista de permissões chrome.devtools. Então, você cria uma entrada no arquivo hosts na máquina de desenvolvimento para mapear esse domínio para localhost (ou seja, 127.0.0.1 chrome.devtools). Depois de configurar o mapeamento de domínio personalizado e o encaminhamento de portas, você poderá visualizar o site no dispositivo Android no URL chrome.devtools.

Configurar o encaminhamento de portas para o servidor proxy

Para mapear um domínio personalizado, é necessário executar um servidor proxy na máquina de desenvolvimento. Exemplos de servidores proxy são Charles, Squid e Fiddler.

Para configurar o encaminhamento de portas para um proxy:

1. Execute o servidor proxy e anote a porta que ele está usando.

2. Configure o encaminhamento de portas para o dispositivo Android. No campo endereço local, insira localhost: seguido da porta em que o servidor proxy está sendo executado. Por exemplo, se ele estiver sendo executado na porta 8000, insira localhost:8000. No campo porta do dispositivo , insira o número que você quer que o dispositivo Android detecte, como 3333.

Definir as configurações de proxy no dispositivo

Em seguida, configure o dispositivo Android para se comunicar com o servidor proxy.

1. No dispositivo Android, acesse Configurações > Wi-Fi.

2. Mantenha pressionado o nome da rede a que você está conectado.

3. Toque em Modificar rede.

4. Toque em Opções avançadas. As configurações de proxy são exibidas.

5. Toque no menu Proxy e selecione Manual.

6. No campo Nome do host do proxy, insira localhost.

7. No campo Porta do proxy, insira o número da porta que você inseriu para porta do dispositivo na seção anterior.

8. Toque em Salvar.

Com essas configurações, o dispositivo encaminha todas as solicitações para o proxy na máquina de desenvolvimento. O proxy faz solicitações em nome do dispositivo, para que as solicitações para o domínio local personalizado sejam resolvidas corretamente.

Agora você pode acessar domínios personalizados no dispositivo Android da mesma forma que faria na máquina de desenvolvimento.

Se o servidor da Web estiver sendo executado em uma porta não padrão, especifique a porta ao solicitar o conteúdo do dispositivo Android. Por exemplo, se o servidor da Web estiver usando o domínio chrome.devtools personalizado na porta 7331, ao visualizar o site no dispositivo Android, você deverá usar o URL chrome.devtools:7331.