Puoi utilizzare il port forwarding per:
- Caso 1. Esegui il debug di una scheda aperta in un'altra istanza di Chrome.
- Caso 2. Ospita un sito sul server web di un computer di sviluppo, quindi accedi ai contenuti da un dispositivo Android tramite un cavo USB.
Nel caso 2, il port forwarding funziona attraverso una porta TCP di ascolto sul tuo dispositivo Android che viene mappata a una porta TCP sul tuo computer di sviluppo. Il traffico tra le porte passa attraverso la connessione USB tra il dispositivo Android e il computer di sviluppo, quindi la connessione non dipende dalla configurazione di rete.
Inoltre, se il tuo server web utilizza un dominio personalizzato, puoi configurare il dispositivo Android per accedere ai contenuti su quel dominio tramite la mappatura del dominio personalizzato.
Configura port forwarding
A seconda del caso, segui i passaggi successivi.
Caso 1: configurare il port forwarding a un'altra istanza di Chrome
Esegui un'altra istanza di Chrome con il parametro
--remote-debugging-port=PORT
, ad esempio:Sistema operativo Mac
open -a "Google Chrome" --args --remote-debugging-port=PORT
Windows
start chrome --remote-debugging-port=PORT
Linux
google-chrome --remote-debugging-port=PORT
Nell'istanza di Chrome in cui stai eseguendo il debug con:
- Apri
chrome://inspect/#devices
. - Assicurati che
Scopri i target di rete sia selezionato.
- Fai clic su Configura accanto alla casella di controllo.
In Impostazioni di rilevamento destinazione, inserisci
localhost:PORT
, selezionaAbilita il port forwarding e fai clic su Fine.
Torna alla sezione Dispositivi e vedrai un nuovo target remoto. Fai clic su ispeziona accanto alla scheda di cui vuoi eseguire il debug.
- Apri
Si apre una nuova finestra DevTools in modalità dispositivo. Nella barra degli indirizzi in alto, puoi inserire l'indirizzo del sito web di cui vuoi eseguire il debug.
Accanto alla barra degli indirizzi, puoi attivare/disattivare i metodi di immissione.
Caso 2: Configurare l'inoltro alla porta tramite USB per il dispositivo Android
Configura il debug remoto tra il computer di sviluppo e il dispositivo Android. Al termine, il tuo dispositivo Android dovrebbe apparire nell'elenco.
Assicurati che l'opzione
Rileva dispositivi USB sia selezionata.
Fai clic su Port forwarding accanto alla casella di controllo.
In Impostazioni di port forwarding,
localhost:8080
è configurato per impostazione predefinita. Seleziona Attiva port forwarding..
Se vuoi configurare altre porte, segui la procedura riportata di seguito. In caso contrario, salta i passaggi e fai clic su Fine.
Nel campo di testo Porta a sinistra, inserisci il numero di porta da cui vuoi essere in grado di accedere al sito sul tuo dispositivo Android. Ad esempio, se vuoi accedere al sito da
localhost:5000
inserirai5000
.Nel campo di testo Indirizzo IP e porta a destra, inserisci l'indirizzo IP o il nome host da cui se il sito è in esecuzione sul server web del computer di sviluppo, seguito dal numero della porta. Per Ad esempio, se il sito è in esecuzione su
localhost:5000
, devi inserirelocalhost:5000
.Fai clic su Fine.
Il port forwarding è ora configurato. In alto è presente anche un indicatore di stato della porta in avanti accanto al nome del dispositivo.
Per visualizzare i contenuti, apri Chrome sul tuo dispositivo Android e accedi alla porta localhost
che
specificato nel campo Porta dispositivo. Ad esempio, se hai inserito 5000
nel campo, allora
verrebbe indirizzato a localhost:5000
.
Mappa a domini locali personalizzati
La mappatura del dominio personalizzata ti consente di visualizzare contenuti su un dispositivo Android da un server web sul tuo di sviluppo software che usa un dominio personalizzato.
Ad esempio, supponiamo che il tuo sito utilizzi una libreria JavaScript di terze parti che funziona solo
dominio consentito chrome.devtools
. Quindi, crei una voce nel file hosts
sul tuo
di sviluppo per mappare questo dominio a localhost
(ad esempio 127.0.0.1 chrome.devtools
). Dopo il giorno
configurando la mappatura del dominio e il port forwarding personalizzati, potrai visualizzare il sito nella
Dispositivo Android all'URL chrome.devtools
.
Configura il port forwarding al server proxy
Per mappare un dominio personalizzato, devi eseguire un server proxy sul computer di sviluppo. Esempi di proxy I server sono Charles, Squid e Fiddler.
Per configurare il port forwarding a un proxy:
Esegui il server proxy e prendi nota della porta che sta utilizzando.
Configura il port forwarding sul tuo dispositivo Android. Nel campo dell'indirizzo locale, inserisci
localhost:
seguito dalla porta su cui è in esecuzione il server proxy. Ad esempio, se si tratta di in esecuzione sulla porta8000
, dovrai inserirelocalhost:8000
. Nel campo Porta del dispositivo inserisci il numero che il tuo dispositivo Android deve ascoltare, ad esempio3333
.
Configura le impostazioni del proxy sul tuo dispositivo
Successivamente, devi configurare il dispositivo Android per comunicare con il server proxy.
- Sul tuo dispositivo Android, vai a Impostazioni > Wi-Fi.
Tieni premuto il nome della rete a cui sei connesso.
Tocca Modifica rete.
Tocca Opzioni avanzate. Vengono visualizzate le impostazioni del proxy.
Tocca il menu Proxy e seleziona Manuale.
Nel campo Nome host del proxy, inserisci
localhost
.Nel campo Porta proxy, inserisci il numero di porta specificato per porta del dispositivo nella sezione precedente.
Tocca Salva.
Con queste impostazioni, il dispositivo inoltra tutte le sue richieste al proxy sulla base in una macchina virtuale. Il proxy effettua le richieste per conto del tuo dispositivo, quindi le richieste al tuo server vengono risolti correttamente.
Ora puoi accedere ai domini personalizzati sul tuo dispositivo Android come faresti di sviluppo software.
Se il server web è in esecuzione su una porta non standard, ricordati di specificare la porta quando
richiedendo i contenuti dal tuo dispositivo Android. Ad esempio, se il tuo server web utilizza la libreria
dominio chrome.devtools
sulla porta 7331
, quando visualizzi il sito dal tuo dispositivo Android dovresti
utilizzare l'URL chrome.devtools:7331
.