Mit Portweiterleitung auf lokale Server und Chrome-Instanzen zugreifen

Kayce Basken
Kayce Basken
Twitter GitHub Glitch
Meggin Kearney
Meggin Kearney
Sofia Emelianova
Sofia Emelianova
GitHub

Mit der Portweiterleitung kannst du:

  • Fall 1: Fehler in einem Tab beheben, 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 auf die Inhalte von einem Android-Gerät zu.

In Fall 2 erfolgt die Portweiterleitung über einen überwachenden TCP-Port auf Ihrem Android-Gerät, der einem TCP-Port auf Ihrem Entwicklungscomputer zugeordnet ist. Der Datenverkehr zwischen den Ports erfolgt über die USB-Verbindung zwischen Ihrem Android-Gerät und Ihrem Entwicklungscomputer. 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 auf die Inhalte in dieser Domain über die benutzerdefinierte Domainzuordnung 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, 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, mit der Sie das Debugging ausführen:

    1. Öffnen Sie chrome://inspect/#devices.
    2. Achten Sie darauf, dass 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, klicken Sie das Kästchen Kästchen. Portweiterleitung aktivieren an und klicken Sie dann auf Fertig.

      Das Fenster mit den Einstellungen für die Zielerkennung.

    5. Auf der Seite Geräte sehen Sie nun ein neues Remote-Ziel. Klicken Sie neben dem Tab, für den Sie Fehler beheben möchten, auf inspect.

      Der Link „Inspect“ neben dem Tab auf dem Remote-Ziel.

  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.

    Entwicklertools im Gerätemodus

  4. Neben der Adressleiste können Sie die Eingabemethoden aktivieren oder deaktivieren.

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

  1. Richten Sie die Remote-Fehlerbehebung zwischen Ihrem Entwicklungscomputer und Ihrem Android-Gerät ein. Anschließend sollte Ihr Android-Gerät in der Liste angezeigt werden.

    Das Android-Gerät in der Liste.

  2. Prüfen Sie, ob Kästchen. 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.

    Die Einstellungen für die Portweiterleitung..

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

  6. Geben Sie links im Textfeld Port die Portnummer ein, von der aus 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 rechts im Textfeld IP-Adresse und Port die IP-Adresse oder den Hostnamen ein, auf 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. Sie sehen sowohl oben als auch neben dem Gerätenamen eine Statusanzeige der Portweiterleitung.

Der Portweiterleitungsstatus.

Öffnen Sie dazu Chrome auf Ihrem Android-Gerät und gehen Sie zum Port localhost, den Sie im Feld Geräteport angegeben haben. Wenn Sie beispielsweise 5000 in das Feld eingeben, rufen Sie localhost:5000 auf.

Benutzerdefinierte lokale Domains zuordnen

Mit der benutzerdefinierten Domainzuordnung 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 die JavaScript-Bibliothek eines Drittanbieters verwendet, die nur in der Domain chrome.devtools auf der Zulassungsliste funktioniert. Daher erstellen Sie in der Datei hosts auf Ihrem Entwicklungscomputer einen Eintrag, um diese Domain localhost (d.h. 127.0.0.1 chrome.devtools) zuzuordnen. Nach dem Einrichten der benutzerdefinierten Domainzuordnung und Portweiterleitung 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 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.

  2. Richten Sie eine 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 es beispielsweise über Port 8000 ausgeführt wird, geben Sie localhost:8000 ein. Geben Sie im Feld Geräteport die Nummer ein, die Ihr Android-Gerät überwachen 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. Rufen Sie auf Ihrem Android-Gerät Einstellungen > WLAN auf.

  2. Drücken Sie lange auf den Namen des Netzwerks, mit dem Sie verbunden sind.

  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 in das 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.

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

Wenn Ihr Webserver über einen nicht standardmäßigen Port läuft, 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 an Port 7331 verwendet, sollten Sie beim Aufrufen der Website auf Ihrem Android-Gerät die URL chrome.devtools:7331 verwenden.