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

Kayce Basques

Meggin Kearney

Sofia Emelianova

U kunt poortdoorschakeling gebruiken voor:

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

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

Als uw webserver een aangepast domein gebruikt, kunt u uw Android-apparaat instellen om toegang te krijgen tot de content op dat domein met aangepaste domeintoewijzing .

Poortdoorschakeling instellen

Volg de volgende stappen, afhankelijk van uw geval.

Case 1: Poortdoorschakeling instellen naar een ander Chrome-exemplaar

1. Voer een ander Chrome-exemplaar uit met de parameter --remote-debugging-port= PORT , bijvoorbeeld:

   MacOS

   open -a "Google Chrome" --args --remote-debugging-port=PORT

   Ramen

   start chrome --remote-debugging-port=PORT

   Linux

   google-chrome --remote-debugging-port=PORT

2. In het Chrome-exemplaar voert u de foutopsporing uit met:

   1. Open chrome://inspect/#devices .
   2. Zorg ervoor Netwerkdoelen detecteren is aangevinkt.
   3. Klik op Configureren naast het selectievakje.

   4. Voer in de instellingen voor doeldetectie localhost: PORT , vink aan Schakel poortdoorsturing in en klik op Gereed .

      

   5. Terug in Apparaten ziet u een nieuw extern doel. Klik op 'Inspecteren' naast het tabblad dat u wilt debuggen.

      

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

   

4. Naast de adresbalk kunt u de invoermethoden in- of uitschakelen.

Case 2: Stel poortdoorschakeling in via USB voor uw Android-apparaat

1. Stel remote debugging in tussen je ontwikkelmachine en je Android-apparaat. Wanneer je klaar bent, zou je Android-apparaat in de lijst moeten staan.

   

2. Zorg ervoor USB-apparaten detecteren is aangevinkt.

3. Klik op Poortdoorsturing naast het selectievakje.

4. In de instellingen voor poortdoorschakeling is localhost:8080 standaard ingesteld. Vink Poortdoorschakeling inschakelen aan.

   .

5. Als u andere poorten wilt instellen, volgt u de volgende stappen. Anders slaat u de stappen over en klikt u op Gereed .

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

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

8. Klik op Gereed .

Port forwarding is nu ingesteld. Bovenaan en naast de apparaatnaam ziet u een statusindicator van de port forwarding.

Om de inhoud te bekijken, opent u Chrome op uw Android-apparaat en gaat u naar de localhost die u hebt opgegeven in het veld Apparaatpoort . Als u bijvoorbeeld 5000 in het veld invoert, gaat u naar localhost:5000 .

Toewijzen aan aangepaste lokale domeinen

Met aangepaste domeintoewijzing kunt u inhoud op een Android-apparaat bekijken vanaf een webserver op uw ontwikkelcomputer die een aangepast domein gebruikt.

Stel bijvoorbeeld dat uw site een JavaScript-bibliotheek van derden gebruikt die alleen werkt op het toegestane domein chrome.devtools . U maakt dus een item aan in uw hosts bestand op uw ontwikkelcomputer om dit domein toe te wijzen aan localhost (d.w.z. 127.0.0.1 chrome.devtools ). Nadat u aangepaste domeintoewijzing en poortdoorschakeling hebt ingesteld, kunt u de site bekijken op uw Android-apparaat via de URL chrome.devtools .

Poortdoorschakeling naar proxyserver instellen

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

Poortdoorschakeling naar een proxy instellen:

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

2. Stel poortdoorschakeling in op je Android-apparaat. Voer in het veld ' Lokaal adres' localhost: in, gevolgd door de poort waarop je proxyserver draait. Als deze bijvoorbeeld poort 8000 gebruikt, voer je localhost:8000 in. Voer in het veld 'Apparaatpoort' het nummer in waarnaar je Android-apparaat moet luisteren, bijvoorbeeld 3333 .

Proxy-instellingen configureren op uw apparaat

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

1. Ga op uw 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 localhost in het veld Proxyhostnaam in.

7. Voer in 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 ontwikkelcomputer. De proxy doet verzoeken namens uw apparaat, zodat verzoeken aan uw aangepaste lokale domein correct worden verwerkt.

Nu hebt u op uw Android-apparaat toegang tot aangepaste domeinen, net zoals u dat op uw ontwikkelcomputer zou doen.

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