Access Local Servers

av Kayce Basques
Technical Writer, Chrome DevTools & Lighthouse

av Meggin Kearney
Meggin är en tech writer

värd för en webbplats på en utvecklingsmaskinens webbserver, Dååtvinna innehållet från en Android-enhet.,

med en USB-kabel och Chrome DevTools kan du köra en webbplats från en utvecklingmaskin och sedan visa webbplatsen på en Android-enhet.

TL;DR

  • port forwarding kan du visa innehåll från din utveckling maskinens webbserver på yourAndroid enhet.
  • om webbservern använder en egen domän kan du konfigurera din Android-enhet för att komma åtcontent på den domänen med anpassad domänmappning.

Ställ in Port forwarding

port forwarding gör det möjligt för din Android-enhet att komma åt innehåll som är beinghosted på din utveckling maskinens webbserver., Port forwarding fungerar genomskapa en lyssnande TCP-port på din Android-enhet som kartor till en TCP porton din utvecklingsmaskin. Trafik mellan portarna färdas genom USBconnection mellan din Android-enhet och utvecklingsmaskin, såanslutningen beror inte på din nätverkskonfiguration.

för att aktivera vidarebefordran av port:

  1. Ställ in fjärrfelsökning mellan din utvecklingsmaskin och yourAndroid-enhet. När du är klar bör du se din Android-enhet ilistan.
  2. Klicka på knappen port forwarding. localhost:8080 ställs in som standard.,
  3. Kontrollera aktivera vidarebefordran av port. Om du vill ställa in andra portar, följ stegen 4 och 5. Hoppa annars till steg 6.
  4. i Porttextfältet till vänster anger dulocalhost portnummer frånsom du vill kunna komma åt webbplatsen på din Android-enhet. Till exempel, om du ville komma åt webbplatsen från localhost:5000 skulle du 5000.,
  5. i textfältet IP-adress och port till höger anger du den IP-adress eller värdnamn som din webbplats körs på din utvecklingsmaskins webbserver, följt av portnumret. Om din webbplats till exempel körs pålocalhost:7331 anger du localhost:7331.
  6. Klicka på Klar.

Port forwarding är nu inställd. Du kan se en statusindikator för portenframåt högst upp samt förutom enhetsnamnet.,

för att visa innehållet, öppna Chrome på din Android-enhet och gå tillhanlocalhost port som du angav i fältet enhetsport. Till exempel, om du angav 5000 I fältet, skulle du gå tilllocalhost:5000.

karta till egna lokala domäner

Anpassad domänmappning gör att du kan visa innehåll på en Android-enhetfrån en webbserver på din utvecklingsmaskin som använder en egen domän.,

anta till exempel att din webbplats använder ett JavaScript från tredje part som bara fungerar på den tillåt-listade domänenchrome.devtools. Så skapar du en post i filen hosts på din utvecklingsmaskin för att kartlägga denna domäntill localhost (dvs. 127.0.0.1 chrome.devtools). När du har konfigurerat customdomain mapping och Port forwarding kan du visa webbplatsen på yourAndroid-enheten på webbadressen chrome.devtools.,

konfigurera vidarebefordran av port till proxyserver

för att mappa en egen domän måste du köra en proxyserver på din utvecklingmaskin. Exempel på proxyservrar är Charles, Squid och Fiddler.

för att ställa in port vidarebefordran till en proxy:

  1. kör proxyservern och notera den port som den använder. Obs: Theproxy server och din webbserver måste köras på olika portar.
  2. konfigurera vidarebefordran av port till din Android-enhet. För fältet lokal adress anger dulocalhost: följt av den port som dinproxyserver körs på., Till exempel,om den körs på port 8000, då du skulle ange localhost:8000. I fältet enhetsport anger duDet nummer som du vill att din Android-enhet ska lyssna på, till exempel 3333.

konfigurera proxyinställningar på din enhet

därefter måste du konfigurera din Android-enhet för att kommunicera medproxyservern.

  1. på din Android-enhet gå till Inställningar> Wi-Fi.
  2. länge-tryck på namnet på nätverket som du för närvarande är ansluten till.Obs! proxyinställningar gäller per nätverk.,
  3. tryck på Ändra nätverk.
  4. tryck på Avancerade alternativ. Proxyinställningarna visas.
  5. tryck på Proxymenyn och välj Manuell.
  6. för fältet Proxy-värdnamn anger dulocalhost.
  7. för fältet Proxyport anger du portnumret som du angav fordevice port i föregående avsnitt.
  8. tryck på Spara.

med dessa inställningar vidarebefordrar enheten alla sina förfrågningar till proxy onyour development machine. Proxyn gör förfrågningar på uppdrag av din enhet, så förfrågningar till din anpassade lokala domän är korrekt löst.,

Nu kan du komma åt anpassade domäner på din Android-enhet Android precis som du skulle på utvecklingsmaskinen.

om webbservern körs av en icke-standardport,kom ihåg att ange porten när du begär innehållet från din Androiddevice. Till exempel, om din webbserver använder den anpassade domänenchrome.devtools på port 7331, när du visar webbplatsen från din Androiddevice bör du använda webbadressen chrome.devtools:7331.,

Tips: för att återuppta normal surfning, kom ihåg att återställa proxyinställningarna på din Android-enhet när du kopplar från utvecklingsmaskinen.

Feedback

var den här sidan till hjälp?
Ja
vad var det bästa med den här sidan?
det hjälpte mig att slutföra mitt mål
Tack för feedbacken. Om du har specifika idéer om hur du kan förbättra den här sidan, skapa ett problem.

den hade den information jag behövde
Tack för feedbacken., Om du har specifika idéer om hur du kan förbättra den här sidan, skapa ett problem.

den hade korrekt information
Tack för feedbacken. Om du har specifika idéer om hur du kan förbättra den här sidan, skapa ett problem.

det var lätt att läsa
Tack för feedbacken. Om du har specifika idéer om hur du kan förbättra den här sidan, skapa ett problem.

något annat
Tack för feedbacken. Om du har specifika idéer om hur du kan förbättra den här sidan, skapa ett problem.,

Nej
vad var det värsta med den här sidan?
det hjälpte mig inte att slutföra mitt mål
Tack för feedbacken. Om du har specifika idéer om hur du kan förbättra den här sidan, skapa ett problem.

det saknades information jag behövde
Tack för feedbacken. Om du har specifika idéer om hur du kan förbättra den här sidan, skapa ett problem.

den hade felaktig information
Tack för feedbacken., Om du har specifika idéer om hur du kan förbättra den här sidan, skapa ett problem.

det var svårt att läsa
Tack för feedbacken. Om du har specifika idéer om hur du kan förbättra den här sidan, skapa ett problem.

något annat
Tack för feedbacken. Om du har specifika idéer om hur du kan förbättra den här sidan, skapa ett problem.

Share

Lämna ett svar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *