Krijg toegang tot lokale servers en Chrome-instanties met port forwarding

Kayce Basques

Meggin Kearney

Sofia Emelianova

U kunt poortforwarding gebruiken om:

• Geval 1. Debuggen van een tabblad dat is geopend in een andere Chrome-instantie.
• Casus 2. Host een website op een webserver op een ontwikkelmachine en open de inhoud vervolgens vanaf een Android-apparaat via een USB-kabel.

In geval 2 werkt port forwarding via een luisterende TCP-poort op uw Android-apparaat die is gekoppeld aan een TCP-poort op uw ontwikkelmachine. Het verkeer tussen de poorten loopt via de USB-verbinding tussen uw Android-apparaat en ontwikkelmachine, waardoor de verbinding niet afhankelijk is van uw netwerkconfiguratie.

Als uw webserver een aangepast domein gebruikt, kunt u uw Android-apparaat bovendien zo instellen dat het toegang krijgt tot de inhoud op dat domein door middel van domeinmapping .

Stel poortforwarding in

Afhankelijk van uw situatie, volgt u de onderstaande stappen.

Geval 1: Stel poortdoorsturing in naar een andere Chrome-instantie.

1. Start een andere Chrome-instantie met de parameter --remote-debugging-port= PORT , bijvoorbeeld:

   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. In de Chrome-instantie waarmee u aan het debuggen bent:

   1. Open chrome://inspect/#devices .
   2. Zorg ervoor dat Het vakje 'Netwerkdoelen ontdekken' is aangevinkt.
   3. Klik op 'Configureren' naast het selectievakje.

   4. Voer in de instellingen voor doeldetectie localhost: PORT in en vink het vakje aan. Schakel poortforwarding in en klik op 'Gereed' .

      

   5. Ga terug naar Apparaten en u ziet een nieuw extern doel. Klik op 'Inspecteren' naast het tabblad dat u wilt debuggen.

      

3. Er wordt een nieuw DevTools-venster in apparaatmodus geopend. In de adresbalk bovenaan kunt u het adres invoeren van de website die u wilt debuggen.

   

4. Naast de adresbalk kunt u de invoermethode wisselen.

Geval 2: Stel poortforwarding via USB in voor uw Android-apparaat.

1. Stel een externe foutopsporingsverbinding in tussen uw ontwikkelcomputer en uw Android-apparaat. Als u klaar bent, zou uw Android-apparaat in de lijst moeten verschijnen.

   

2. Zorg ervoor dat De optie 'USB-apparaten detecteren' is aangevinkt.

3. Vink 'Port forwarding' aan naast het selectievakje.

4. In de instellingen voor poortdoorsturing is localhost:8080 standaard ingesteld. Schakel poortdoorsturing in .

   .

5. Als u andere poorten wilt instellen, volg dan de volgende stappen. Sla anders de stappen over en klik op 'Klaar' .

6. Voer in het tekstveld ' Poort' aan de linkerkant het poortnummer in waarmee u de site op uw Android-apparaat wilt kunnen benaderen. Als u de site bijvoorbeeld via localhost:5000 wilt benaderen, voert u 5000 in.

7. Voer in het tekstveld voor IP-adres en poort aan de rechterkant het IP-adres of de hostnaam in waarop uw site draait op de webserver van uw ontwikkelmachine, gevolgd door het poortnummer. Als uw site bijvoorbeeld draait op localhost:5000 voert u localhost:5000 in.

8. Klik op Klaar .

Port forwarding is nu ingesteld. U kunt de status van de port forwarding bovenaan en naast de apparaatnaam zien.

Om de inhoud te bekijken, open je Chrome op je Android-apparaat en ga je naar de localhost -poort die je hebt opgegeven in het veld 'Apparaatpoort' . Als je bijvoorbeeld 5000 hebt ingevoerd, ga je naar localhost:5000 .

Koppelen aan aangepaste lokale domeinen

Met aangepaste domeinmapping kunt u content op een Android-apparaat bekijken die afkomstig is van een webserver op uw ontwikkelmachine die een aangepast domein gebruikt.

Stel bijvoorbeeld dat uw website gebruikmaakt van een JavaScript-bibliotheek van een derde partij die alleen werkt op het toegestane domein chrome.devtools . U maakt dan een regel aan in het hosts bestand op uw ontwikkelmachine om dit domein te koppelen aan localhost (bijvoorbeeld 127.0.0.1 chrome.devtools ). Na het instellen van de aangepaste domeintoewijzing en poortforwarding kunt u de website op uw Android-apparaat bekijken via de URL chrome.devtools .

Stel poortforwarding in naar de proxyserver.

Om een ​​aangepast domein te koppelen, moet u een proxyserver op uw ontwikkelmachine draaien. Voorbeelden van proxyservers zijn Charles , Squid en Fiddler .

Om poortforwarding naar een proxy in te stellen:

1. Start de proxyserver en noteer de poort die deze gebruikt.

2. Stel poortforwarding in voor je Android-apparaat. Voer in het veld voor het lokale adres ' localhost: in, gevolgd door de poort waarop je proxyserver draait. Als deze bijvoorbeeld op poort 8000 draait, voer je localhost:8000 in. Voer in het veld voor de apparaatpoort het nummer in waarop je Android-apparaat moet luisteren, bijvoorbeeld 3333 .

Configureer de proxy-instellingen op uw apparaat.

Vervolgens moet u uw Android-apparaat configureren om met de proxyserver te communiceren.

1. Ga op je Android-apparaat naar Instellingen > Wi-Fi .

2. Houd de naam van het netwerk waarmee u verbonden bent lang ingedrukt.

3. Tik op Netwerk wijzigen .

4. Tik op Geavanceerde opties . De proxy-instellingen worden weergegeven.

5. Tik op het menu Proxy en selecteer Handmatig .

6. Voer bij het veld 'Proxy hostname' localhost in.

7. Voer bij het veld 'Proxypoort' het poortnummer in dat u in de vorige sectie voor de apparaatpoort hebt ingevoerd.

8. Tik op Opslaan .

Met deze instellingen stuurt uw apparaat al zijn verzoeken door naar de proxy op uw ontwikkelmachine. De proxy doet de verzoeken namens uw apparaat, zodat verzoeken aan uw aangepaste lokale domein correct worden afgehandeld.

Nu kunt u op uw Android-apparaat toegang krijgen tot aangepaste domeinen, net zoals op de ontwikkelmachine.

Als uw webserver een niet-standaard poort gebruikt, vergeet dan niet de poort te specificeren wanneer u de inhoud opvraagt ​​vanaf uw Android-apparaat. Als uw webserver bijvoorbeeld het aangepaste domein chrome.devtools gebruikt op poort 7331 , moet u, wanneer u de site vanaf uw Android-apparaat bekijkt, de URL chrome.devtools:7331 gebruiken.