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

Kayce Basques
Meggin Kearney
Meggin Kearney
Sofia Emelianova
Sofia Emelianova
GitHub

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 con 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

  1. Esegui un'altra istanza di Chrome con il parametro --remote-debugging-port=PORT, 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 in cui stai eseguendo il debug con:

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

    4. In Impostazioni di rilevamento destinazione, inserisci localhost:PORT, seleziona Casella di controllo. Abilita il port forwarding e fai clic su Fine.

      La finestra delle impostazioni di rilevamento della destinazione.

    5. Torna alla sezione Dispositivi e vedrai un nuovo target remoto. Fai clic su inspect accanto alla scheda di cui vuoi eseguire il debug.

      Il link di ispezione accanto alla scheda nella destinazione remota.

  3. 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.

    DevTools in modalità dispositivo.

  4. 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

  1. Configura il debug remoto tra il computer di sviluppo e il dispositivo Android. Al termine, il tuo dispositivo Android dovrebbe apparire nell'elenco.

    Il dispositivo Android nell'elenco.

  2. Assicurati che l'opzione Casella di controllo. 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.

    Le impostazioni di port forwarding..

  5. Se vuoi configurare altre porte, segui la procedura riportata di seguito. In caso contrario, salta i passaggi e fai clic su Fine.

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

  7. Nel campo di testo Indirizzo IP e porta a destra, inserisci l'indirizzo IP o il nome host su cui viene eseguito il sito sul server web del computer di sviluppo, seguito dal numero di porta. Ad esempio, se il tuo sito viene eseguito su localhost:5000, devi inserire localhost:5000.

  8. Fai clic su Fine.

Il port forwarding è ora configurato. Puoi vedere un indicatore di stato della porta in avanti in alto oltre al nome del dispositivo.

Lo stato del port forwarding.

Per visualizzare i contenuti, apri Chrome sul tuo dispositivo Android e accedi alla porta localhost specificata nel campo Porta del dispositivo. Ad esempio, se inserisci 5000 nel campo, visualizzerai localhost:5000.

Mappa a domini locali personalizzati

Il mapping di dominio personalizzato ti consente di visualizzare i contenuti su un dispositivo Android da un server web sul tuo computer 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 nella lista consentita chrome.devtools. Pertanto, dovrai creare 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 la mappatura del dominio e il port forwarding personalizzati, 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 sul computer di sviluppo. Esempi di server proxy sono Charles, Squid e violetto.

Per configurare il port forwarding a un proxy:

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

  2. Configura il port forwarding sul tuo dispositivo Android. Per il campo indirizzo locale, inserisci localhost: seguito dalla porta su cui è in esecuzione il server proxy. Ad esempio, se è in esecuzione sulla porta 8000, devi inserire localhost:8000. Nel campo Porta del dispositivo, inserisci il numero di telefono su cui vuoi che il tuo dispositivo Android ascolti, ad esempio 3333.

Configura le impostazioni del proxy sul tuo dispositivo

Successivamente, 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 sei connesso.

  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 del proxy, inserisci localhost.

  7. Nel campo Porta proxy, inserisci il numero di porta specificato per porta del dispositivo nella sezione precedente.

  8. Tocca Salva.

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

Ora puoi accedere a domini personalizzati sul tuo dispositivo Android come faresti sul computer di sviluppo.

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