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. Eseguire il debug di una scheda aperta in un'altra istanza di Chrome.
  • Caso 2. Ospitando un sito su un server web della macchina di sviluppo, puoi accedere ai contenuti da un dispositivo Android tramite un cavo USB.

Nel caso 2, l'inoltro di porta funziona tramite una porta TCP in ascolto sul dispositivo Android che mappa a una porta TCP sulla macchina di sviluppo. Il traffico tra le porte passa attraverso la connessione USB tra il dispositivo Android e la macchina di sviluppo, pertanto la connessione non dipende dalla configurazione di rete.

Inoltre, se il tuo server web utilizza un dominio personalizzato, puoi configurare il tuo dispositivo Android in modo che acceda ai contenuti di quel dominio con la mappatura dei domini personalizzati.

Configura port forwarding

A seconda della richiesta, 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 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

  2. Nell'istanza di Chrome con cui esegui il debug:

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

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

      La finestra delle impostazioni di rilevamento dei target.

    5. Tornando a Dispositivi, vedrai un nuovo target remoto. Fai clic su Ispeziona accanto alla scheda che vuoi eseguire il debug.

      Il link di ispezione accanto alla scheda sul target remoto.

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

    DevTools in modalità dispositivo.

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

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

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

    Il dispositivo Android nell'elenco.

  2. Assicurati che l'opzione Casella di controllo. Rileva dispositivi USB sia selezionata.

  3. Fai clic su Inoltro di porta accanto alla casella di controllo.

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

    Le impostazioni di port forwarding..

  5. Se vuoi configurare altre porte, segui i passaggi successivi. 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 accedere al sito sul tuo dispositivo Android. Ad esempio, se vuoi 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 è in esecuzione il tuo sito sul server web della tua macchina di sviluppo, seguito dal numero di porta. Ad esempio, se il tuo sito è pubblicato su localhost:5000, devi inserire localhost:5000.

  8. Fai clic su Fine.

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

Lo stato del port forwarding.

Per visualizzare i contenuti, apri Chrome sul dispositivo Android e vai alla porta localhost specificata nel campo Porta dispositivo. Ad esempio, se hai inserito 5000 nel campo, verrete indirizzati a localhost:5000.

Mappatura a domini locali personalizzati

La mappatura dei 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 nella lista consentita chrome.devtools. Pertanto, crea una voce nel file hosts sulla tua macchina di sviluppo per mappare questo dominio a localhost (ovvero 127.0.0.1 chrome.devtools). Dopo aver configurato la mappatura del dominio personalizzato e il port forwarding, potrai visualizzare il sito sul tuo dispositivo Android all'URL chrome.devtools.

Configurare 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 in uso.

  2. Configura il port forwarding sul tuo dispositivo Android. Per il campo Indirizzo locale, inseriscilocalhost: 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 su cui vuoi che il dispositivo Android ascolti, ad esempio 3333.

Configurare le impostazioni del proxy sul dispositivo

Successivamente, devi configurare il dispositivo Android in modo che comunichi 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.

  3. Tocca Modifica rete.

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

  5. Tocca il menu Proxy e seleziona Manuale.

  6. Per il campo Nome host del proxy, inserisci localhost.

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

  8. Tocca Salva.

Con queste impostazioni, il dispositivo inoltra tutte le richieste al proxy sulla macchina di sviluppo. Il proxy invia richieste per conto del tuo dispositivo, in modo che le richieste al tuo dominio locale personalizzato vengano risolte correttamente.

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

Se il tuo server web è in esecuzione su una porta non standard, ricordati di specificarla quando richiedi i contenuti dal 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.