Dostęp do serwerów lokalnych i instancji Chrome za pomocą przekierowania portów

Kayce Basques
Kayce Basques
Twitter GitHub Usterka
Meggin Kearney
Meggin Kearney
Sofia Emelianowa
Sofia Emelianova
GitHub

Przekierowanie portów może służyć do:

  • Przypadek 1. Debugowanie karty otwartej w innym wystąpieniu Chrome.
  • Przypadek 2. Umieść witrynę na serwerze WWW na komputerze, a potem użyj jej na urządzeniu z Androidem, używając kabla USB.

W przypadku 2 przekierowanie portów działa przez nasłuchujący port TCP urządzenia z Androidem. Jest on mapowany na port TCP w Twoim komputerze, którego używasz do programowania. Ruch między portami jest przesyłany przez połączenie USB między urządzeniem z Androidem a komputerem, więc to połączenie nie zależy od konfiguracji sieci.

Poza tym jeśli Twój serwer WWW używa domeny niestandardowej, możesz skonfigurować urządzenie z Androidem tak, by uzyskiwało dostęp do treści w tej domenie za pomocą mapowania domeny niestandardowej.

Skonfiguruj przekierowanie portów

W zależności od przypadku postępuj zgodnie z dalszymi instrukcjami.

Przypadek 1. Konfigurowanie przekierowania portów do innej instancji Chrome

  1. Uruchom inne wystąpienie Chrome z parametrem --remote-debugging-port=PORT, na przykład:

    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. W instancji Chrome, którą debugujesz za pomocą:

    1. Otwórz pokój chrome://inspect/#devices.
    2. Upewnij się, że pole Pole wyboru. Discovery sieci docelowe jest zaznaczone.
    3. Kliknij Skonfiguruj obok pola wyboru.

    4. W sekcji Ustawienia wykrywania celów wpisz localhost:PORT, zaznacz Pole wyboru. Włącz przekierowanie portów i kliknij Gotowe.

      Okno ustawień wykrywania docelowego.

    5. Po powrocie na kartę Urządzenia zobaczysz nowy cel zdalny. Kliknij inspect (sprawdź) obok karty, którą chcesz debugować.

      Link do inspekcji obok karty celu zdalnego.

  3. Otworzy się nowe okno Narzędzi deweloperskich w trybie urządzenia. Na pasku adresu u góry możesz wpisać adres witryny, którą chcesz debugować.

    Narzędzia deweloperskie w trybie urządzenia.

  4. Obok paska adresu możesz przełączać metody wprowadzania.

Przypadek 2. Konfigurowanie przekierowania portów przez USB na urządzeniu z Androidem

  1. Skonfiguruj zdalne debugowanie między komputerem programisty a urządzeniem z Androidem. Gdy skończysz, Twoje urządzenie z Androidem powinno być widoczne na liście.

    Urządzenie z Androidem na liście.

  2. Upewnij się, że jest zaznaczona opcja Pole wyboru. Odkryj urządzenia USB.

  3. Obok pola wyboru kliknij Przekierowanie portów.

  4. W Ustawieniach przekierowania portów domyślnie skonfigurowana jest zasada localhost:8080. Zaznacz Włącz przekierowanie portów.

    Ustawienia przekierowania portów..

  5. Jeśli chcesz skonfigurować inne porty, wykonaj czynności opisane poniżej. W przeciwnym razie pomiń te kroki i kliknij Gotowe.

  6. W polu tekstowym Port po lewej stronie wpisz numer portu, z którego chcesz uzyskać dostęp do witryny na urządzeniu z Androidem. Jeśli np. chcesz uzyskać dostęp do witryny z localhost:5000, wpisz 5000.

  7. W polu tekstowym Adres IP i port po prawej stronie wpisz adres IP lub nazwę hosta, na którym działa Twoja witryna na serwerze WWW swojego komputera, a potem wpisz numer portu. Jeśli np. witryna działa w localhost:5000, wpisz localhost:5000.

  8. Kliknij Gotowe.

Przekierowanie portów zostało skonfigurowane. U góry i obok nazwy urządzenia widoczny jest wskaźnik stanu portu dalej.

Stan przekierowania portów.

Aby wyświetlić zawartość, otwórz Chrome na urządzeniu z Androidem i przejdź do portu localhost określonego w polu Port urządzenia. Jeśli np. w polu wpiszesz 5000, otwórz stronę localhost:5000.

Zmapuj na niestandardowe domeny lokalne

Mapowanie domeny niestandardowej pozwala wyświetlać na urządzeniu z Androidem zawartość z serwera WWW na komputerze programisty, który korzysta z domeny niestandardowej.

Załóżmy np., że Twoja witryna korzysta z biblioteki JavaScript innej firmy, która działa tylko w domenie chrome.devtools umieszczonej na liście dozwolonych. W związku z tym tworzysz wpis w pliku hosts na komputerze, aby zmapować tę domenę na localhost (tj. 127.0.0.1 chrome.devtools). Po skonfigurowaniu niestandardowego mapowania domeny i przekierowania portów witrynę na urządzeniu z Androidem będzie można wyświetlić pod adresem URL chrome.devtools.

Skonfiguruj przekierowanie portów do serwera proxy

Aby zmapować domenę niestandardową, na komputerze programisty musisz uruchomić serwer proxy. Przykłady serwerów proxy to Charles, Squid i Fiddler.

Aby skonfigurować przekierowanie portów do serwera proxy:

  1. Uruchom serwer proxy i zanotuj używany port.

  2. Skonfiguruj przekierowywanie portów na swoje urządzenie z Androidem. W polu adres lokalny wpisz localhost:, a po nim nazwę portu, na którym działa serwer proxy. Jeśli na przykład działa na porcie 8000, wpisz localhost:8000. W polu Port urządzenia wpisz numer, na którym urządzenie z Androidem ma nasłuchiwać, np. 3333.

Konfigurowanie ustawień serwera proxy na urządzeniu

Następnie należy skonfigurować urządzenie z Androidem tak, aby komunikowało się z serwerem proxy.

  1. Na urządzeniu z Androidem otwórz Ustawienia > Wi-Fi.

  2. Naciśnij i przytrzymaj nazwę sieci, z którą masz połączenie.

  3. Kliknij Modyfikuj sieć.

  4. Kliknij Opcje zaawansowane. Pojawią się ustawienia serwera proxy.

  5. Kliknij menu Serwer proxy i wybierz Ręcznie.

  6. W polu Nazwa hosta serwera proxy wpisz localhost.

  7. W polu Port serwera proxy wpisz numer portu podany w poprzedniej sekcji jako port urządzenia.

  8. Kliknij Zapisz.

Przy takich ustawieniach urządzenie przekazuje wszystkie żądania do serwera proxy na komputerze, na którym pracujesz. Serwer proxy wysyła żądania w imieniu urządzenia, więc żądania wysyłane do dostosowanej domeny lokalnej są prawidłowo rozpoznawane.

Teraz na urządzeniu z Androidem z Androidem masz dostęp do domen niestandardowych, tak jak na komputerze.

Jeśli Twój serwer WWW korzysta z niestandardowego portu, pamiętaj, by podać go przy żądaniu treści z urządzenia z Androidem. Jeśli na przykład Twój serwer WWW używa domeny niestandardowej chrome.devtools na porcie 7331, to podczas wyświetlania witryny na urządzeniu z Androidem należy użyć adresu URL chrome.devtools:7331.