Mit Portweiterleitung auf lokale Server und Chrome-Instanzen zugreifen

Kayce Basques

Meggin Kearney

Sofia Emelianova

Mit der Portweiterleitung haben Sie folgende Möglichkeiten:

• Case 1. Fehler auf einem Tab beheben, der in einer anderen Chrome-Instanz geöffnet wurde.
• Fall 2. Sie können eine Website auf dem Webserver eines Entwicklungscomputers hosten und dann über ein USB-Kabel auf den Inhalt eines Android-Geräts zugreifen.

In Fall 2 funktioniert die Portweiterleitung über einen überwachten 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 Entwicklungssystem geleitet. Die Verbindung hängt also nicht von Ihrer Netzwerkkonfiguration ab.

Wenn Ihr Webserver eine benutzerdefinierte Domain verwendet, können Sie Ihr Android-Gerät außerdem so einrichten, dass über die benutzerdefinierte Domainzuordnung auf die Inhalte in dieser Domain zugegriffen wird.

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. Beispiel:

   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 Debugging durchführen:

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

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

      

   5. Unter Geräte sehen Sie ein neues Remote-Ziel. Klicken Sie neben dem Tab, auf dem Sie Fehler beheben möchten, auf inspect.

      

3. Im Gerätemodus wird ein neues Entwicklertools-Fenster geöffnet. In der Adressleiste oben können Sie die Adresse der Website eingeben, auf der Sie Fehler beheben möchten.

   

4. Neben der Adressleiste können Sie zwischen den Eingabemethoden wechseln.

Fall 2: Richten Sie für Ihr Android-Gerät die Portweiterleitung über USB ein

1. Richten Sie das Remote-Debugging zwischen Ihrem Entwicklungscomputer 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 USB-Geräte entdecken aktiviert ist.

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

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

   .

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

6. Geben Sie links im Textfeld Port die Portnummer ein, über die Sie mit 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 rechts im Textfeld IP-Adresse und Port die IP-Adresse oder den Hostnamen, auf dem Ihre Website auf dem Webserver Ihres Entwicklungscomputers ausgeführt wird, gefolgt von der Portnummer ein. 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 sehen Sie eine Statusanzeige der Portweiterleitung sowie neben dem Gerätenamen.

Öffnen Sie Chrome auf Ihrem Android-Gerät und rufen Sie den Port localhost 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 anzeigen lassen, der eine benutzerdefinierte Domain verwendet.

Angenommen, Ihre Website verwendet eine JavaScript-Bibliothek eines Drittanbieters, die nur in der Domain chrome.devtools auf der Zulassungsliste funktioniert. Daher erstellen Sie einen Eintrag in der Datei hosts auf Ihrem Entwicklungscomputer, um diese Domain localhost zuzuordnen (z.B. 127.0.0.1 chrome.devtools). Nachdem Sie die benutzerdefinierte Domainzuordnung und 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. Führen Sie den Proxyserver aus und notieren Sie sich den verwendeten Port.

   Hinweis: Der Proxyserver und der Webserver müssen an unterschiedlichen 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 sie beispielsweise auf Port 8000 ausgeführt wird, geben Sie localhost:8000 ein. Geben Sie in das Feld Geräteport die Nummer ein, die Ihr Android-Gerät überwachen soll, z. B. 3333.

Proxy-Einstellungen auf Ihrem 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. Drücken Sie lange auf den Namen des Netzwerks, mit dem Sie verbunden sind.

   Hinweis: Proxy-Einstellungen 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 den Wert localhost ein.

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

8. Tippe 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 ordnungsgemäß aufgelöst werden.

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

Wenn Ihr Webserver über einen nicht standardmäßigen Port ausgeführt wird, denken Sie daran, den Port anzugeben, wenn Sie den Inhalt von Ihrem Android-Gerät anfordern. 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.

Tipp: Damit Sie den normalen Browser weiterhin nutzen können, müssen Sie die Proxy-Einstellungen auf Ihrem Android-Gerät zurücksetzen, nachdem Sie die Verbindung zum Entwicklungscomputer getrennt haben.