Use 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 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. 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, 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
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
Na instância do Chrome que você está depurando com:
- Abra
chrome://inspect/#devices
. - Verifique se
Descobrir segmentações de rede está marcado.
- Clique em Configurar ao lado da caixa de seleção.
Em Configurações de descoberta de destino, digite
localhost:PORT
, marqueAtivar encaminhamento de portas e clique em Concluído.
Em Dispositivos, você verá um novo destino remoto. Clique em inspecionar ao lado da guia que você quer depurar.
- Abra
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.
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
Configure a depuração remota entre a máquina de desenvolvimento e o dispositivo Android. Quando terminar, você verá seu dispositivo Android na lista.
Verifique se a opção
Descobrir dispositivos USB está marcada.
Clique em Encaminhamento de portas ao lado da caixa de seleção.
Em Configurações de encaminhamento de portas,
localhost:8080
é definido por padrão. Marque Ativar encaminhamento de portas..
Se você quiser configurar outras portas, siga as próximas etapas. Caso contrário, pule as etapas e clique em Concluído.
No campo de texto Porta à esquerda, insira o número da porta que será usada consigam acessar o site em seu dispositivo Android. Por exemplo, se você quisesse acessar o site em
localhost:5000
, insira5000
.No campo de texto Endereço IP e porta à direita, digite o endereço IP ou o nome do host em que seu site está sendo executado no servidor da Web da máquina de desenvolvimento, seguido pelo número da porta. Para exemplo, se o site estiver sendo executado em
localhost:5000
, insiralocalhost:5000
.Clique em Concluído.
O encaminhamento de portas está configurado. Na parte de cima, também vai aparecer um indicador de status do encaminhamento de portas. ao lado do nome do dispositivo.
Para acessar o conteúdo, abra o Chrome no seu dispositivo Android e acesse a porta localhost
que você
especificado no campo Porta do dispositivo. Por exemplo, se você inserir 5000
no campo,
iria para localhost:5000
.
Mapear para domínios locais personalizados
Com o mapeamento de domínios personalizados, você pode conferir o conteúdo de um dispositivo Android de um servidor da Web no seu máquina de desenvolvimento usando um domínio personalizado.
Por exemplo, suponha que seu site use uma biblioteca JavaScript de terceiros que funcione apenas na
domínio da lista de permissões chrome.devtools
. Então, você cria uma entrada no arquivo hosts
no seu
máquina de desenvolvimento para mapear esse domínio para localhost
(ou seja, 127.0.0.1 chrome.devtools
). Depois
configurando o mapeamento de domínio personalizado e o encaminhamento de portas, você poderá exibir o site
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 proxy os servidores são Charles, Squid e Fiddler.
Para configurar o encaminhamento de portas para um proxy:
Execute o servidor proxy e anote a porta que ele está usando.
Configure o encaminhamento de portas para seu dispositivo Android. No campo de endereço local, insira
localhost:
seguido pela porta em que o servidor proxy está sendo executado. Por exemplo, se for em execução na porta8000
, insiralocalhost:8000
. No campo porta do dispositivo insira o número que você quer que seu dispositivo Android ouça, como3333
.
Definir configurações de proxy no dispositivo
Em seguida, você precisa configurar seu dispositivo Android para se comunicar com o servidor proxy.
- No dispositivo Android, acesse Configurações > Wi-Fi.
Toque e mantenha pressionado o nome da rede a que você está conectado.
Toque em Modificar rede.
Toque em Opções avançadas. As configurações de proxy serão exibidas.
Toque no menu Proxy e selecione Manual.
No campo Nome do host do proxy, insira
localhost
.No campo Porta do proxy, digite o número da porta que você digitou como porta do dispositivo na na seção anterior.
Toque em Salvar.
Com essas configurações, seu dispositivo encaminha todas as solicitações para o proxy no seu ambiente de desenvolvimento máquina virtual. O proxy faz solicitações em nome do dispositivo, ou seja, faz solicitações para o local domínio sejam resolvidos corretamente.
Agora você pode acessar domínios personalizados no seu dispositivo Android da mesma forma que faria no máquina de desenvolvimento de software.
Se o servidor da Web não estiver sendo executado em uma porta não padrão, lembre-se de especificar a porta quando
solicitar o conteúdo de seu dispositivo Android. Por exemplo, se o servidor da Web estiver usando o servidor
domínio chrome.devtools
na porta 7331
, ao visualizar o site em seu dispositivo Android, verifique
usar o URL chrome.devtools:7331
.