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

Kayce Basques

Meggin Kearney

Sofia Emelianova

Możesz używać przekierowania portów, aby:

• Przypadek 1. Debuguj kartę otwartą w innej instancji Chrome.
• Zgłoszenie 2. Umieść witrynę na serwerze WWW maszyny do programowania, a potem uzyskuj dostęp do treści z urządzenia z Androidem przez kabel 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 programisty. 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ć 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 kolejną instancję 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 wystąpieniu Chrome, które debugujesz:

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

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

      

   5. Na karcie Urządzenia zobaczysz nowy cel zdalnego sterowania. Kliknij sprawdź 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żna przełączać metody wprowadzania.

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

1. Skonfiguruj zdalne debugowanie między maszyną programistyczną 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 port localhost:8080 jest skonfigurowany domyślnie. Zaznacz pole Włącz przekierowanie portów.

   .

5. Jeśli chcesz skonfigurować inne porty, postępuj zgodnie z instrukcjami 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 adresu localhost:5000, wpisz 5000.

7. W polu tekstowym Adres IP i port po prawej stronie wpisz adres IP lub nazwę hosta na serwerze WWW komputera, na którym działa Twoja witryna, a po niej 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, a także obok nazwy urządzenia, wyświetli się wskaźnik stanu gniazda.

Aby wyświetlić materiały, 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 w polu 5000, wpisz localhost:5000.

Mapowanie na niestandardowe 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. Utwórz więc wpis w pliku hosts na komputerze do programowania, by zmapować tę domenę na localhost (czyli 127.0.0.1 chrome.devtools). Po skonfigurowaniu niestandardowego mapowania domeny i przekierowania portów możesz wyświetlić stronę na urządzeniu z Androidem pod adresem URL chrome.devtools.

Skonfiguruj przekierowanie portów na serwer proxy

Aby zmapować domenę niestandardową, musisz uruchomić serwer proxy na komputerze, na którym tworzysz aplikacje. Przykładami serwerów proxy są Charles, Squid i Fiddler.

Aby skonfigurować przekierowanie portów na serwer proxy:

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

   Uwaga: serwer proxy i serwer WWW muszą działać na różnych portach.

2. Skonfiguruj przekierowanie portów na urządzeniu z Androidem. W polu adres lokalny wpisz localhost:, a po nim numer portu, na którym działa serwer proxy. Jeśli na przykład jest on uruchomiony 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 musisz skonfigurować urządzenie z Androidem, aby mogło komunikować się z serwerem proxy.

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

2. Przytrzymaj nazwę sieci, z którą masz połączenie.

   Uwaga: ustawienia serwera proxy obowiązują w poszczególnych sieciach.

3. Kliknij Zmień sieć.

4. Kliknij Opcje zaawansowane. Zostaną wyświetlone 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 jako port urządzenia w poprzedniej sekcji.

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.

Na urządzeniu z Androidem możesz teraz uzyskać dostęp do domen niestandardowych w taki sam sposób, jak na komputerze do programowania.

Jeśli Twój serwer WWW korzysta z niestandardowego portu, pamiętaj, by go określić przy wysyłaniu żądań 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.

Wskazówka: aby wznowić normalne przeglądanie, po odłączeniu urządzenia od komputera, z którego korzystasz, przywróć ustawienia serwera proxy na swoim urządzeniu z Androidem.