Accedi ai server locali e alle istanze di Chrome con il port forwarding

Kayce Basques

Meggin Kearney

Sofia Emelianova

Puoi utilizzare il port forwarding per:

• Caso 1. Eseguire il debug di una scheda aperta in un'altra istanza di Chrome.
• Caso 2. Ospitare un sito su un server web della macchina di sviluppo, quindi accedere ai contenuti da un dispositivo Android tramite un cavo USB.

Nel Caso 2, il port forwarding funziona tramite una porta TCP in ascolto sul tuo dispositivo Android che esegue il mapping a una porta TCP sulla tua macchina di sviluppo. Il traffico tra le porte passa attraverso la connessione USB tra il dispositivo Android e la macchina di sviluppo, quindi la connessione non dipende dalla configurazione di rete.

Inoltre, se il server web utilizza un dominio personalizzato, puoi configurare il dispositivo Android per accedere ai contenuti di quel dominio con il mapping di domini personalizzati.

Configura port forwarding

A seconda del caso, segui i passaggi successivi.

Caso 1: configura il port forwarding a un'altra istanza di Chrome

1. Esegui un'altra istanza di Chrome con il --remote-debugging-port=PORT parametro, ad esempio:

   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. Nell'istanza di Chrome di cui stai eseguendo il debug:

   1. Apri chrome://inspect/#devices.
   2. Assicurati che Rileva target di rete sia selezionata.
   3. Fai clic su Configura accanto alla casella di controllo.

   4. In Impostazioni di rilevamento target, inserisci localhost:PORT, seleziona la casella di controllo Attiva port forwarding e fai clic su Fine.

      

   5. Nella sezione Dispositivi, vedrai un nuovo target remoto. Fai clic su Ispeziona accanto alla scheda di cui vuoi eseguire il debug.

      

3. Si apre una nuova finestra di DevTools in modalità dispositivo. Nella barra degli indirizzi in alto, puoi inserire l'indirizzo del sito web di cui vuoi eseguire il debug.

   

4. Accanto alla barra degli indirizzi, puoi attivare/disattivare i metodi di input.

Caso 2: configura il port forwarding tramite USB per il tuo dispositivo Android

1. Configura il debug remoto tra la macchina di sviluppo e il dispositivo Android. Al termine, dovresti vedere il tuo dispositivo Android nell'elenco.

   

2. Assicurati che Rileva dispositivi USB sia selezionata.

3. Fai clic su Port forwarding accanto alla casella di controllo.

4. In Impostazioni di port forwarding, localhost:8080 è configurato per impostazione predefinita. Seleziona Attiva port forwarding.

   .

5. Se vuoi configurare altre porte, segui i passaggi successivi. Altrimenti, salta i passaggi e fai clic su Fine.

6. Nel campo di testo Porta a sinistra, inserisci il numero della porta da cui vuoi poter accedere al sito sul tuo dispositivo Android. Ad esempio, se vuoi accedere al sito da localhost:5000, inserisci 5000.

7. Nel campo di testo Indirizzo IP e porta a destra, inserisci l'indirizzo IP o il nome host su cui è in esecuzione il sito sul server web della macchina di sviluppo, seguito dal numero della porta. Ad esempio, se il sito è in esecuzione su localhost:5000, inserisci localhost:5000.

8. Fai clic su Fine.

Il port forwarding è ora configurato. Puoi vedere un indicatore di stato del port forwarding in alto e accanto al nome del dispositivo.

Per visualizzare i contenuti, apri Chrome sul tuo dispositivo Android e vai alla porta localhost che hai specificato nel campo Porta dispositivo. Ad esempio, se hai inserito 5000 nel campo, allora vai a localhost:5000.

Esegui il mapping a domini locali personalizzati

Il mapping di domini personalizzati ti consente di visualizzare i contenuti su un dispositivo Android da un server web sulla tua macchina di sviluppo che utilizza un dominio personalizzato.

Ad esempio, supponiamo che il tuo sito utilizzi una libreria JavaScript di terze parti che funziona solo sul dominio consentito chrome.devtools. Quindi, crei una voce nel file hosts sulla tua macchina di sviluppo per mappare questo dominio a localhost (ad es. 127.0.0.1 chrome.devtools). Dopo aver configurato il mapping di domini personalizzati e il port forwarding, potrai visualizzare il sito sul tuo dispositivo Android all'URL chrome.devtools.

Configura il port forwarding al server proxy

Per mappare un dominio personalizzato, devi eseguire un server proxy sulla tua macchina di sviluppo. Esempi di server proxy sono Charles, Squid e Fiddler.

Per configurare il port forwarding a un proxy:

1. Esegui il server proxy e prendi nota della porta che utilizza.

   Nota: il server proxy e il server web devono essere eseguiti su porte diverse.

2. Configura il port forwarding al tuo dispositivo Android. Nel campo Indirizzo locale, inserisci localhost: seguito dalla porta su cui è in esecuzione il server proxy. Ad esempio, se è in esecuzione sulla porta 8000, inserisci localhost:8000. Nel campo Porta dispositivo , inserisci il numero su cui vuoi che il tuo dispositivo Android sia in ascolto, ad esempio 3333.

Configura le impostazioni del proxy sul dispositivo

Ora devi configurare il dispositivo Android per comunicare con il server proxy.

1. Sul dispositivo Android, vai a Impostazioni > Wi-Fi.

2. Tieni premuto il nome della rete a cui hai effettuato la connessione.

   Nota: le impostazioni del proxy si applicano per rete.

3. Tocca Modifica rete.

4. Tocca Opzioni avanzate. Vengono visualizzate le impostazioni del proxy.

5. Tocca il menu Proxy e seleziona Manuale.

6. Nel campo Nome host proxy, inserisci localhost.

7. Nel campo Porta proxy, inserisci il numero della porta che hai inserito per Porta dispositivo nella sezione precedente.

8. Tocca Salva.

Con queste impostazioni, il dispositivo inoltra tutte le richieste al proxy sulla macchina di sviluppo. Il proxy effettua le richieste per conto del dispositivo, quindi le richieste al dominio locale personalizzato vengono risolte correttamente.

Ora puoi accedere ai domini personalizzati sul tuo dispositivo Android proprio come faresti sulla macchina di sviluppo.

Se il server web è in esecuzione su una porta non standard, ricordati di specificare la porta quando richiedi i contenuti dal tuo dispositivo Android. Ad esempio, se il server web utilizza il dominio personalizzato chrome.devtools sulla porta 7331, quando visualizzi il sito dal tuo dispositivo Android devi utilizzare l'URL chrome.devtools:7331.

**Suggerimento:** per riprendere la navigazione normale, ricordati di ripristinare le impostazioni del proxy sul tuo dispositivo Android dopo aver disconnesso la macchina di sviluppo.