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 Einen Tab debuggen, der in einer anderen Chrome-Instanz geöffnet wurde
• Fall 2: Hosten Sie eine Website auf dem Webserver eines Entwicklungscomputers und greifen Sie dann über ein USB-Kabel von einem Android-Gerät auf die Inhalte zu.

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

Wenn Ihr Webserver eine benutzerdefinierte Domain verwendet, können Sie Ihr Android-Gerät so einrichten, dass es mithilfe der Zuordnung einer benutzerdefinierten Domain auf die Inhalte dieser Domain zugreift.

Portweiterleitung einrichten

Führen Sie je nach Fall die nächsten Schritte aus.

Fall 1: Portweiterleitung zu einer anderen Chrome-Instanz einrichten

1. Führen Sie eine weitere Chrome-Instanz mit dem Parameter --remote-debugging-port=PORT 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. In der Chrome-Instanz, in der Sie das Debuggen durchführen:

   1. Öffnen Sie chrome://inspect/#devices.
   2. Achten Sie darauf, dass bei Netzwerkziele ermitteln ein Häkchen gesetzt ist.
   3. Klicken Sie neben dem Kästchen auf Konfigurieren.

   4. Geben Sie unter Einstellungen für die Zielerkennung localhost:PORT ein, setzen Sie ein Häkchen bei Portweiterleitung aktivieren und klicken Sie auf Fertig.

      

   5. Auf der Seite Geräte sehen Sie ein neues Remote-Ziel. Klicken Sie neben dem Tab, den Sie debuggen möchten, auf Prüfen.

      

3. Ein neues DevTools-Fenster im Gerätemodus wird geöffnet. Geben Sie oben in der Adressleiste die Adresse der Website ein, die Sie debuggen 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 das Remote-Debugging zwischen Ihrem Entwicklungscomputer und Ihrem Android-Gerät ein. Danach sollte Ihr Android-Gerät in der Liste angezeigt werden.

   

2. Achten Sie darauf, dass 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. Klicken Sie das Kästchen Portweiterleitung aktivieren an.

   .

5. Wenn Sie weitere Ports einrichten möchten, fahren Sie mit den nächsten Schritten fort. 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 von localhost:5000 auf die Website zugreifen möchten, geben Sie 5000 ein.

7. Geben Sie rechts im Textfeld IP-Adresse und Port die IP-Adresse oder den Hostnamen ein, unter der bzw. dem Ihre Website auf dem Webserver Ihres Entwicklungscomputers ausgeführt wird, gefolgt von der Portnummer. Wenn Ihre Website beispielsweise auf 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 sehen Sie einen Statusindikator für die Portweiterleitung.

Wenn Sie sich 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 eingeben, werden Sie zu localhost:5000 weitergeleitet.

Benutzerdefinierten lokalen Domains zuordnen

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

Angenommen, auf Ihrer Website wird eine JavaScript-Bibliothek von Drittanbietern verwendet, die nur auf der Zulassungsliste stehenden Domain chrome.devtools funktioniert. Sie erstellen also einen Eintrag in der hosts-Datei auf Ihrem Entwicklungscomputer, um diese Domain localhost (d.h. 127.0.0.1 chrome.devtools) zuzuordnen. 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 an Proxyserver einrichten

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

So richten Sie die Portweiterleitung zu einem Proxy ein:

1. Starten Sie den Proxyserver und notieren Sie sich den verwendeten Port.

2. Richten Sie die Portweiterleitung auf Ihrem Android-Gerät ein. Geben Sie in das Feld lokale Adresse localhost: gefolgt vom 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 die Ihr Android-Gerät hören soll, z. B. 3333.

Proxy-Einstellungen auf dem Gerät konfigurieren

Als Nächstes müssen Sie Ihr Android-Gerät für die Kommunikation mit dem Proxyserver konfigurieren.

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.

3. Tippen Sie auf Netzwerk ändern.

4. Tippen Sie auf Erweiterte Optionen. Die Proxyeinstellungen werden angezeigt.

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

6. Geben Sie im Feld Proxy-Hostname den Wert 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 stellt Anfragen im Namen Ihres Geräts, sodass Anfragen an Ihre benutzerdefinierte lokale Domain korrekt aufgelöst werden.

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

Wenn dein Webserver über einen nicht standardmäßigen Port ausgeführt wird, musst du den Port angeben, wenn du die Inhalte von deinem Android-Gerät anforderst. Wenn Ihr Webserver beispielsweise die benutzerdefinierte Domain chrome.devtools auf Port 7331 verwendet, sollten Sie die URL chrome.devtools:7331 verwenden, wenn Sie die Website auf Ihrem Android-Gerät aufrufen.