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

Kayce Basques
Kayce Basques
Twitter GitHub Glitch
Meggin Kearney
Meggin Kearney
Sofia Emelianova
Sofia Emelianova
GitHub

Puoi utilizzare il port forwarding per:

  • Custodia 1. Esegui il debug di una scheda aperta su un'istanza di Chrome diversa.
  • Custodia 2. Ospita un sito sul server web di un computer di sviluppo, quindi accedi ai contenuti da un dispositivo Android tramite cavo USB.

Nel Caso 2, il port forwarding funziona attraverso una porta TCP di ascolto sul tuo dispositivo Android che corrisponde a una porta TCP sul tuo computer 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 in modo che acceda ai contenuti di quel dominio con una mappatura di domini personalizzata.

Configura port forwarding

A seconda del tuo 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 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 di cui stai eseguendo il debug con:

    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 individuazione del target, inserisci localhost:PORT, seleziona Casella di controllo. Attiva port forwarding e fai clic su Fine.

      La finestra delle impostazioni di rilevamento di 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 sul target remoto.

  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. Puoi attivare/disattivare i metodi di immissione accanto alla barra degli indirizzi.

Caso 2: configurare l'inoltro alla porta tramite USB per il dispositivo Android

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

    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 i passaggi riportati 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, se vuoi accedere al sito da localhost:5000, devi inserire 5000.

  7. Nel campo di testo Indirizzo IP e porta sulla 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 di porta. Ad esempio, se il sito è in esecuzione su localhost:5000, devi inserire localhost:5000.

  8. Fai clic su Fine.

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

Lo stato del port forwarding.

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

Mappa a domini locali personalizzati

La mappatura di domini personalizzata 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 incluso nella lista consentita chrome.devtools. Creerai quindi una voce nel file hosts sul tuo computer di sviluppo per mappare questo dominio a localhost (ossia 127.0.0.1 chrome.devtools). Dopo aver configurato il mapping di domini 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 sulla macchina di sviluppo. Esempi di server proxy sono Charles, Squid e sentirephy.

Per configurare il port forwarding a un proxy:

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

  2. Configura l'inoltro alla porta sul tuo dispositivo Android. Nel campo dell'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 dispositivo, inserisci il numero sul quale il tuo dispositivo Android deve rimanere in ascolto, ad esempio 3333.

Configurazione delle impostazioni 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. Premi a lungo 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 del proxy, inserisci il numero di porta 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 a domini personalizzati sul tuo dispositivo Android, proprio come faresti sul computer di sviluppo.

Se il server web utilizza una porta non standard, ricordati di specificare la porta 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.