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

Kayce Basques

Meggin Kearney

Sofia Emelianova

Przekierowanie portów umożliwia:

• Przypadek 1. Debugowanie karty otwartej w innej instancji Chrome.
• Przypadek 2. Utwórz witrynę na serwerze WWW na maszynie programisty, a potem uzyskaj dostęp do treści z urządzenia z Androidem za pomocą kabla USB.

W przypadku 2 przekierowanie portu działa przez port TCP nasłuchujący na urządzeniu z Androidem, który jest mapowany na port TCP na komputerze programistycznym. Ruch między portami odbywa się przez połączenie USB między urządzeniem z Androidem a komputerem do programowania, więc połączenie nie zależy od konfiguracji sieci.

Jeśli Twój serwer WWW korzysta z domeny niestandardowej, możesz skonfigurować urządzenie z Androidem, aby uzyskiwało dostęp do treści w tej domenie za pomocą mapowania domeny niestandardowej.

Skonfiguruj przekierowanie portów

W zależności od sytuacji wykonaj te czynności.

Przypadek 1. Konfigurowanie przekierowania portu do innego wystąpienia Chrome

1. Uruchom inny proces Chrome z parametrem --remote-debugging-port=PORT, na przykład:

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

   start chrome --remote-debugging-port=PORT

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

2. W wystąpieniu Chrome, które debugujesz:

   1. Otwórz pokój chrome://inspect/#devices.
   2. Sprawdź, czy zaznaczone jest pole Dowiedz się, jakie sieci obejmują kierowanie.
   3. Obok pola wyboru kliknij Konfiguruj.

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

      

   5. W sekcji Urządzenia zobaczysz nowy cel zdalny. Kliknij sprawdzanie obok karty, którą chcesz debugować.

      

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

   

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

Przypadek 2. Skonfiguruj przekierowanie portów przez USB na urządzeniu z Androidem

1. Skonfiguruj debugowanie zdalne między maszyną do programowania a urządzeniem z Androidem. Gdy skończysz, na liście powinien pojawić się Twój telefon z Androidem.

   

2. Upewnij się, że zaznaczone jest pole Wykrywaj urządzenia USB.

3. Obok pola wyboru kliknij Przekierowanie portów.

4. W ustawieniach przekierowania portów domyślnie wybrana jest opcja localhost:8080. Zaznacz Włącz przekierowanie portów.

   .

5. Jeśli chcesz skonfigurować inne porty, wykonaj te czynności. 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 adresu 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 na komputerze programistycznym, a następnie numer portu. Jeśli na przykład Twoja witryna działa na localhost:5000, wpisz localhost:5000.

8. Kliknij Gotowe.

Przekierowanie portów zostało skonfigurowane. U góry, obok nazwy urządzenia, zobaczysz wskaźnik stanu przekierowania portu.

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 na przykład wpiszesz 5000 w polu, przejdziesz do localhost:5000.

Mapowanie na własne domeny lokalne

Mapowanie niestandardowej domeny umożliwia wyświetlanie treści na urządzeniu z Androidem z serwera WWW na komputerze programisty, który korzysta z niestandardowej domeny.

Załóżmy na przykład, że Twoja witryna korzysta z biblioteki JavaScript firmy zewnętrznej, która działa tylko w domenie chrome.devtools na liście dozwolonych. Na maszynie deweloperskiej tworzysz wpis w pliku hosts, aby mapować tę domenę na localhost (czyli 127.0.0.1 chrome.devtools). Po skonfigurowaniu mapowania niestandardowej domeny i przekierowania portów możesz wyświetlić witrynę na urządzeniu z Androidem pod adresem URL chrome.devtools.

Konfigurowanie przekierowania portów na serwer proxy

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

Aby skonfigurować przekierowanie portów na serwer proxy:

1. Uruchom serwer proxy i zapisz numer portu, którego używa.

2. Skonfiguruj przekierowanie portów na urządzeniu z Androidem. W polu Adres lokalny wpisz localhost:, a następnie port, na którym działa serwer proxy. Jeśli na przykład działa on na porcie 8000, wpisz localhost:8000. W polu Port urządzenia wpisz numer, który ma być odbierany przez urządzenie z Androidem, np. 3333.

Konfigurowanie ustawień serwera proxy na urządzeniu

Następnie musisz skonfigurować urządzenie z Androidem, aby mogło komunikować się z serwerem proxy.

1. Na urządzeniu z Androidem wybierz Ustawienia > Wi-Fi.

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

3. Kliknij Zmień sieć.

4. Kliknij Opcje zaawansowane. Wyświetlą się ustawienia serwera proxy.

5. Kliknij menu Proxy i wybierz Ręcznie.

6. W polu Nazwa hosta serwera proxy wpisz localhost.

7. W polu Port serwera proxy wpisz numer portu, który został podany w sekcji Port urządzenia.

8. Kliknij Zapisz.

Przy tych ustawieniach urządzenie przekierowuje wszystkie żądania do serwera proxy na Twoim komputerze programistycznym. Serwer proxy wysyła żądania w imieniu urządzenia, dzięki czemu żądania wysyłane do Twojej niestandardowej domeny lokalnej są prawidłowo rozwiązywane.

Teraz możesz uzyskiwać dostęp do domen niestandardowych na urządzeniu z Androidem tak samo jak na komputerze deweloperskim.

Jeśli Twój serwer internetowy działa na porcie niestandardowym, pamiętaj, aby podać ten port podczas żądania treści z urządzenia z Androidem. Jeśli na przykład serwer WWW używa domeny niestandardowej chrome.devtools na porcie 7331, podczas wyświetlania witryny na urządzeniu z Androidem należy użyć adresu URL chrome.devtools:7331.