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

Kayce Basques
Kayce Basques
X GitHub Falha
Meggin Kearney
Meggin Kearney
Sofia Emelianova
Sofia Emelianova
GitHub

Você pode usar o encaminhamento de portas para:

  • Caso 1. Depure 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 escuta no dispositivo Android que é mapeada para uma porta TCP na máquina de desenvolvimento. O tráfego entre as portas ocorre por 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 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 Caixa de seleção. Descobrir segmentações de rede está marcado.
    3. Clique em Configurar ao lado da caixa de seleção.

    4. Em Configurações de descoberta de destino, digite localhost:PORT, marque Caixa de seleção. Ativar encaminhamento de porta e clique em Concluído.

      Janela de configurações de descoberta de destino.

    5. Em Dispositivos, você vai encontrar um novo destino remoto. Clique em inspecionar ao lado da guia que você quer depurar.

      O link "Inspect" ao lado da guia no destino remoto.

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

    DevTools no modo de dispositivo.

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

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

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

    O dispositivo Android na lista.

  2. Verifique se a opção Caixa de seleçã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 Ativar encaminhamento de portas.

    As configurações de 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 Port à esquerda, insira o número da porta que permite acessar o site no dispositivo Android. Por exemplo, se você quisesse acessar o site em localhost:5000, digitaria 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 em execução em localhost:5000, digite localhost:5000.

  8. Clique em Concluído.

O encaminhamento de portas está configurado. Você pode ver um indicador de status do encaminhamento de portas na parte de cima, além do nome do dispositivo.

O status do encaminhamento de portas.

Para visualizar o conteúdo, abra o Chrome no dispositivo Android e acesse a porta localhost especificada no campo Device port. Por exemplo, se você digitou 5000 no campo, vá para localhost:5000.

Mapear para domínios locais personalizados

Com o mapeamento de domínios personalizados, é possível ver o 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 só funcione no domínio chrome.devtools da lista de permissões. Então, crie uma entrada no arquivo hosts na sua 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á 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 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 usa.

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

Definir as configurações de proxy no dispositivo

Em seguida, você precisa configurar seu dispositivo Android para se comunicar com o servidor proxy.

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

  2. Toque e mantenha pressionado o nome da rede à qual 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 que você digitou como porta do dispositivo na seção anterior.

  8. Toque em Salvar.

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

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

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