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

É possível usar o encaminhamento de portas para:

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

No Caso 2, o encaminhamento de portas funciona por meio de uma porta TCP de detecção no dispositivo Android, que é mapeada para uma porta TCP na máquina de desenvolvimento. O tráfego entre as portas é transmitido pela conexão USB entre o dispositivo Android e a máquina de desenvolvimento. Assim, 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, será possível configurar o dispositivo Android para acessar o conteúdo nesse domínio com o mapeamento de domínio personalizado.

Configurar o encaminhamento de portas

Dependendo do 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 com que você está depurando:

   1. Abra o 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, digite localhost:PORT, marque Ativar encaminhamento de portas e clique em Concluído.

      

   5. Em Dispositivos, você vai encontrar um novo destino remoto. Clique em inspect 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, insira o endereço do site que você 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 seu dispositivo Android

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

   

2. Confira 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 é definido por padrão. Marque a opção Ativar encaminhamento de portas.

   .

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

6. No campo de texto Porta à esquerda, insira o número da porta que você quer usar para 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 sua máquina de desenvolvimento, seguido pelo número da porta. Por exemplo, se o site estiver em execução em localhost:5000, insira localhost:5000.

8. Clique em Concluído.

O encaminhamento de portas está configurado. Você pode ver um indicador de status da porta encaminhada na parte superior, bem como ao lado do nome do dispositivo.

Para acessar o conteúdo, abra o Chrome no dispositivo Android e acesse a porta localhost especificada no campo Porta do dispositivo. Por exemplo, se você tivesse digitado 5000 no campo, iria para localhost:5000.

Mapear para domínios locais personalizados

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

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

Configurar o encaminhamento de portas para o servidor proxy

Para mapear um domínio personalizado, execute um servidor proxy na sua máquina de desenvolvimento. Exemplos de servidores proxy são Charles, Squid e LinkedIn.

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 seu dispositivo Android. No campo endereço local, digite localhost: seguido pela 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 seu dispositivo Android ouça, como 3333.

Definir 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 serã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 do dispositivo na seção anterior.

8. Toque em Salvar.

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

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

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