Mit Portweiterleitung auf lokale Server und Chrome-Instanzen zugreifen

Kayce Basques

Meggin Kearney

Sofia Emelianova

Mit der Portweiterleitung haben Sie folgende Möglichkeiten:

• Fall 1 : Fehlerbehebung auf einem Tab, der in einer anderen Chrome-Instanz geöffnet wurde
• Fall 2 : Eine Website auf einem Webserver einer Entwicklungsmaschine hosten und dann über ein USB-Kabel von einem Android-Gerät aus auf die Inhalte zugreifen

In Fall 2 funktioniert die Portweiterleitung über einen wartenden TCP-Port auf Ihrem Android-Gerät, der einem TCP-Port auf Ihrer Entwicklungsmaschine zugeordnet ist. Der Traffic zwischen den Ports wird über die USB-Verbindung zwischen Ihrem Android-Gerät und dem Entwicklungscomputer übertragen. Die Verbindung ist also nicht von Ihrer Netzwerkkonfiguration abhängig.

Wenn Ihr Webserver eine benutzerdefinierte Domain verwendet, können Sie außerdem Ihr Android-Gerät so einrichten, dass es mit der benutzerdefinierten Domainzuordnung auf die Inhalte unter dieser Domain zugreift.

Portweiterleitung einrichten

Führen Sie je nach Fall die folgenden Schritte aus.

Fall 1: Portweiterleitung zu einer anderen Chrome-Instanz einrichten

1. Führen Sie eine weitere Chrome-Instanz mit dem --remote-debugging-port=PORT Parameter aus, z. B.:

   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. Gehen Sie in der Chrome-Instanz, mit der Sie die Fehlerbehebung durchführen, so vor:

   1. Öffnen Sie chrome://inspect/#devices.
   2. Achten Sie darauf, dass das Kästchen Netzwerkziele erkennen aktiviert ist.
   3. Klicken Sie neben dem Kästchen auf Konfigurieren.

   4. Geben Sie unter Einstellungen für die Zielerkennung localhost:PORT ein, aktivieren Sie das Kästchen Portweiterleitung aktivieren und klicken Sie auf Fertig.

      

   5. Zurück unter Geräte sehen Sie ein neues Remote-Ziel. Klicken Sie neben dem Tab, auf dem Sie die Fehlerbehebung durchführen möchten, auf Untersuchen.

      

3. Ein neues DevTools-Fenster im Gerätemodus wird geöffnet. Geben Sie oben in der Adressleiste die Adresse der Website ein, auf der Sie die Fehlerbehebung durchführen möchten.

   

4. Neben der Adressleiste können Sie die Eingabemethoden umschalten.

Fall 2: Portweiterleitung über USB für Ihr Android-Gerät einrichten

1. Richten Sie die Remote-Fehlerbehebung zwischen Ihrer Entwicklungsmaschine und Ihrem Android-Gerät ein. Wenn Sie fertig sind, sollte Ihr Android-Gerät in der Liste angezeigt werden.

   

2. Achten Sie darauf, dass das Kästchen USB-Geräte erkennen aktiviert ist.

3. Klicken Sie neben dem Kästchen auf Portweiterleitung.

4. In den Einstellungen für die Portweiterleitung ist standardmäßig localhost:8080 eingerichtet. Aktivieren Sie das Kästchen Portweiterleitung aktivieren.

   .

5. Wenn Sie andere Ports einrichten möchten, führen Sie die nächsten Schritte aus. Andernfalls überspringen Sie die Schritte und klicken Sie auf Fertig.

6. Geben Sie im Textfeld Port links die Portnummer ein, über die Sie auf Ihrem Android-Gerät auf die Website zugreifen möchten. Wenn Sie beispielsweise über localhost:5000 auf die Website zugreifen möchten, geben Sie 5000 ein.

7. Geben Sie im Textfeld IP-Adresse und Port rechts die IP-Adresse oder den Hostnamen ein, unter dem Ihre Website auf dem Webserver Ihres Entwicklungscomputers ausgeführt wird, gefolgt von der Portnummer. Wenn Ihre Website beispielsweise unter localhost:5000 ausgeführt wird, geben Sie localhost:5000 ein.

8. Klicken Sie auf Fertig.

Die Portweiterleitung ist jetzt eingerichtet. Oben und neben dem Gerätenamen wird ein Statussymbol für die Portweiterleitung angezeigt.

Wenn Sie die Inhalte ansehen möchten, öffnen Sie Chrome auf Ihrem Android-Gerät und rufen Sie den localhost-Port auf, den Sie im Feld Geräteport angegeben haben. Wenn Sie beispielsweise 5000 in das Feld eingegeben haben, rufen Sie localhost:5000 auf.

Benutzerdefinierten lokalen Domains zuordnen

Mit der benutzerdefinierten Domainzuordnung können Sie Inhalte auf einem Android-Gerät von einem Webserver auf Ihrem Entwicklungscomputer aus ansehen, der eine benutzerdefinierte Domain verwendet.

Angenommen, Ihre Website verwendet eine JavaScript-Bibliothek eines Drittanbieters, die nur in der zugelassenen Domain chrome.devtools funktioniert. Sie erstellen also einen Eintrag in der Datei hosts auf Ihrem Entwicklungscomputer, um diese Domain localhost zuzuordnen (d.h. 127.0.0.1 chrome.devtools). Nachdem Sie die benutzerdefinierte Domainzuordnung und die Portweiterleitung eingerichtet haben, können Sie die Website auf Ihrem Android-Gerät unter der URL chrome.devtools aufrufen.

Portweiterleitung zum Proxyserver einrichten

Wenn Sie eine benutzerdefinierte Domain zuordnen möchten, müssen Sie einen Proxyserver auf Ihrem Entwicklungscomputer ausführen. Beispiele für Proxy server sind Charles, Squid und Fiddler.

So richten Sie die Portweiterleitung zu einem Proxy ein:

1. Führen Sie den Proxyserver aus und notieren Sie sich den verwendeten Port.

   **Hinweis**: Der Proxyserver und der Webserver müssen auf verschiedenen Ports ausgeführt werden.

2. Richten Sie die Portweiterleitung zu Ihrem Android-Gerät ein. Geben Sie im Feld Lokale Adresse localhost: gefolgt von dem Port ein, auf dem Ihr Proxyserver ausgeführt wird. Wenn er beispielsweise auf Port 8000 ausgeführt wird, geben Sie localhost:8000 ein. Geben Sie im Feld Geräteport die Nummer ein, auf der Ihr Android-Gerät lauschen soll, z. B. 3333.

Proxy-Einstellungen auf Ihrem Gerät konfigurieren

Als Nächstes müssen Sie Ihr Android-Gerät so konfigurieren, dass es mit dem Proxyserver kommuniziert.

1. Gehen Sie auf Ihrem Android-Gerät zu Einstellungen > WLAN.

2. Halten Sie den Namen des Netzwerks gedrückt, mit dem Sie verbunden sind.

   **Hinweis**: Die Proxyeinstellungen gelten pro Netzwerk.

3. Tippen Sie auf Netzwerk ändern.

4. Tippen Sie auf Erweiterte Optionen. Die Proxy-Einstellungen werden angezeigt.

5. Tippen Sie auf das Menü Proxy und wählen Sie Manuell aus.

6. Geben Sie im Feld Proxy-Hostname localhost ein.

7. Geben Sie im Feld Proxy-Port die Portnummer ein, die Sie im vorherigen Abschnitt für Geräteport eingegeben haben.

8. Tippen Sie auf Speichern.

Mit diesen Einstellungen leitet Ihr Gerät alle Anfragen an den Proxy auf Ihrem Entwicklungscomputer weiter. Der Proxy sendet Anfragen im Namen Ihres Geräts, sodass Anfragen an Ihre benutzerdefinierte lokale Domain ordnungsgemäß aufgelöst werden.

Sie können jetzt auf benutzerdefinierte Domains auf Ihrem Android-Gerät genauso zugreifen wie auf dem Entwicklungscomputer.

Wenn Ihr Webserver über einen nicht standardmäßigen Port ausgeführt wird, müssen Sie den Port angeben, wenn Sie die Inhalte von Ihrem Android-Gerät anfordern. Wenn Ihr Webserver beispielsweise die benutzerdefinierte Domain chrome.devtools auf Port 7331 verwendet, sollten Sie beim Aufrufen der Website von Ihrem Android-Gerät aus die URL chrome.devtools:7331 verwenden.

Tipp: Wenn Sie wieder normal im Internet surfen möchten, müssen Sie die Proxy-Einstellungen auf Ihrem Android-Gerät wiederherstellen, nachdem Sie die Verbindung zum Entwicklungscomputer getrennt haben.