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

Kayce Basques

Meggin Kearney

Sofia Emelianova

Za pomocą przekierowania portów możesz:

• Przypadek 1. Debugować kartę otwartą w innej instancji Chrome.
• Przypadek 2. Hostować witrynę na serwerze WWW komputera używanego do programowania, a następnie uzyskiwać dostęp do treści z urządzenia z Androidem za pomocą kabla USB.

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

Dodatkowo, jeśli serwer WWW używa domeny niestandardowej, możesz skonfigurować urządzenie z Androidem tak, aby uzyskiwać dostęp do treści w tej domenie za pomocą mapowania domen niestandardowych.

Konfigurowanie przekierowania portów

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

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

1. Uruchom inną 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 instancji Chrome, w której debugujesz:

   1. Otwórz chrome://inspect/#devices.
   2. Sprawdź, czy zaznaczone jest pole Wykryj cele w sieci.
   3. Obok pola wyboru kliknij Skonfiguruj.

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

      

   5. W sekcji Urządzenia zobaczysz nowy cel zdalny. Obok karty, którą chcesz debugować, kliknij Zbadaj.

      

3. Otworzy się nowe okno Narzędzi deweloperskich 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. Konfigurowanie przekierowania portów przez USB na urządzeniu z Androidem

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

   

2. Sprawdź, czy zaznaczone jest pole Wykryj urządzenia USB.

3. Obok pola wyboru kliknij Przekierowanie portów.

4. W sekcji Ustawienia przekierowania portów domyślnie skonfigurowany jest adres 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 mieć 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 witryna działa na serwerze WWW komputera używanego do programowania, a następnie numer portu. Jeśli np. witryna działa na adresie localhost:5000, wpisz localhost:5000.

8. Kliknij Gotowe.

Przekierowanie portów zostało skonfigurowane. Wskaźnik stanu przekierowania portów jest widoczny u góry oraz obok nazwy urządzenia.

Aby wyświetlić treści, otwórz Chrome na urządzeniu z Androidem i przejdź do portu localhost, który został określony w polu Port urządzenia. Jeśli np. w tym polu wpiszesz 5000, przejdź do adresu localhost:5000.

Mapowanie na niestandardowe domeny lokalne

Mapowanie domen niestandardowych umożliwia wyświetlanie treści na urządzeniu z Androidem z serwera WWW na komputerze używanym do programowania, który używa domeny niestandardowej.

Załóżmy na przykład, że Twoja witryna używa biblioteki JavaScript firmy zewnętrznej, która działa tylko w domenie chrome.devtools znajdującej się na liście dozwolonych. W takim przypadku utwórz wpis w pliku hosts na komputerze używanym do programowania, aby zmapować tę domenę na localhost (czyli 127.0.0.1 chrome.devtools). Po skonfigurowaniu mapowania domen niestandardowych i przekierowania portów będziesz mieć dostęp do witryny na urządzeniu z Androidem pod adresem URL chrome.devtools.

Konfigurowanie przekierowania portów na serwer proxy

Aby zmapować własną domenę, musisz uruchomić serwer proxy na komputerze używanym do programowania. Przykłady serwerów proxy to Charles, Squid i Fiddler.

Aby skonfigurować przekierowanie portów na serwer proxy:

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

2. Skonfiguruj przekierowanie portów na urządzenie z Androidem. W polu Adres lokalny wpisz localhost: i port, na którym działa serwer proxy. Jeśli np. działa na porcie 8000, wpisz localhost:8000. W polu Port urządzenia wpisz numer, na którym ma nasłuchiwać urządzenie z Androidem, np. 3333.

Konfigurowanie ustawień serwera proxy na urządzeniu

Następnie musisz 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ą się łączysz.

3. Kliknij Modyfikuj sieć.

4. Kliknij Opcje zaawansowane. Wyświetlą 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, który został wpisany w poprzedniej sekcji w polu Port urządzenia.

8. Kliknij Zapisz.

Dzięki tym ustawieniom urządzenie przekazuje wszystkie żądania do serwera proxy na komputerze deweloperskim. Serwer proxy wysyła żądania w imieniu urządzenia, więc żądania do dostosowanej domeny lokalnej są prawidłowo rozpoznawane.

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

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